Создайте простую систему чата для нескольких человек на основе SpringBoot+WebSocket.

Java

предисловие

Мне нечего делать сегодня, давайте узнаем про протокол WebStocket. Давайте кратко посмотрите на это.

Что такое веб-сокет

   Прежде всего, что такое WebSocket? WebSocket — это протокол для полнодуплексной связи по одному TCP-соединению. Это более официальное заявление, Проще говоря, в TCP-соединении обе стороны связи могут общаться друг с другом. Например, когда A и B разговаривают по телефону, когда A разговаривает, B также может разговаривать для обмена информацией, что называется полнодуплексной связью. В соответствии с симплексной связью и полудуплексной связью симплексная связь может передаваться только от A к B, например, к компьютерам и принтерам. Полудуплексная связь означает, что AB могут общаться друг с другом, но одновременно может осуществляться только односторонняя связь, например рация.

В чем разница между WebSocket и http

WebSocket与http的关系

Та же точка

   построен поверх TCP, и данные передаются по протоколу TCP.

разница

Протокол   HTTP является односторонним протоколом, то есть браузер может только запрашивать ресурсы у сервера, а сервер может передавать данные в браузер, но сервер не может активно передавать данные в браузер. Он делится на длинное соединение и короткое соединение.Короткое соединение требует трех рукопожатий для каждого HTTP-запроса, чтобы отправить свой собственный запрос, и каждый запрос соответствует ответу;длинное соединение заключается в том, чтобы поддерживать соединение в течение короткого времени и сохранять TCP от отключения, которое относится к TCP-соединению.

WebSocket — это протокол двусторонней связи. После установления соединения сервер WebSocket и клиент могут активно отправлять или получать данные друг другу, как и Socket. Разница в том, что WebSocket — это простая симуляция, основанная на Интернете. Протокол сокета; WebSocket должен быть подключен через рукопожатие, аналогично TCP, он также требует установления рукопожатия между клиентом и сервером и может взаимодействовать друг с другом после успешного соединения. Когда WebSocket устанавливает рукопожатие, данные передаются по http-протоколу «GET/chat HTTP/1.1», который использует только некоторые простые поля http-протокола. Но после того, как соединение установлено, реальная фаза передачи данных не требует участия протокола http.

полезность

  WebSocket решает проблему, заключающуюся в том, что клиент должен долго опрашивать, чтобы инициировать несколько HTTP-запросов к обозревателю ресурсов сервера.

Используйте WebSocket для создания системы чата с несколькими людьми

  1. Представляем jar-пакет WebSocket

Грейдл:

compile group: 'org.springframework.boot', name: 'spring-boot-starter-websocket', version: '2.1.8.RELEASE'

Мейвен:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
    <version>2.1.8.RELEASE</version>
</dependency>

  1. Добавить поддержку WebSocket.

  Inject ServerEndpointExporter, этот bean-компонент автоматически зарегистрирует конечную точку Websocket, объявленную с помощью аннотации @ServerEndpoint.

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @author: zp
 * @Date: 2019-09-18 10:03
 * @Description:
 */
@Configuration
public class AppConfiguration {

    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }

}

  1. Создайте класс реализации для WebSocket

Значение в   @ServerEndpoint("/webSocket/{page}") — это адрес, к которому нужно получить доступ, который аналогичен @RequestMapping в Controller. Затем реализуйте @OnOpen (открыть соединение), @OnClose (закрыть соединение), @onMessage (получить сообщение), @Error (вызвать исключение).

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * @author: zp
 * @Date: 2019-09-20 15:12
 * @Description:
 */
@Component
@ServerEndpoint("/webSocket/{page}")
public class WebSocket {
    private Logger log = LoggerFactory.getLogger(this.getClass());

    /**
     * 用来记录房间的人数
     */
    private static AtomicInteger onlinePersons = new AtomicInteger(0);

    /**
     * 用来记录房间及人数
     */
    private static Map<String,Set> roomMap = new ConcurrentHashMap(8);

    @OnOpen
    public void open(@PathParam("page") String page, Session session) throws IOException {
        Set set = roomMap.get(page);
        // 如果是新的房间，则创建一个映射，如果房间已存在，则把用户放进去
        if(set == null){
            set = new CopyOnWriteArraySet();
            set.add(session);
            roomMap.put(page,set);
        }else{
            set.add(session);
        }
        // 房间人数+1
        onlinePersons.incrementAndGet();
        log.info("新用户{}进入聊天,房间人数:{}",session.getId(),onlinePersons);
    }

    @OnClose
    public void close(@PathParam("page") String page, Session session){
        // 如果某个用户离开了，就移除相应的信息
        if(roomMap.containsKey(page)){
            roomMap.get(page).remove(session);
        }
        // 房间人数-1
        onlinePersons.decrementAndGet();
        log.info("用户{}退出聊天,房间人数:{}",session.getId(),onlinePersons);
    }

    @OnMessage
    public void reveiveMessage(@PathParam("page") String page, Session session,String message) throws IOException {
        log.info("接受到用户{}的数据:{}",session.getId(),message);
        // 拼接一下用户信息
        String msg = session.getId()+" : "+ message;
        Set<Session> sessions = roomMap.get(page);
        // 给房间内所有用户推送信息
        for(Session s : sessions){
            s.getBasicRemote().sendText(msg);
        }
    }

    @OnError
    public void error(Throwable throwable){
        try {
            throw throwable;
        } catch (Throwable e) {
            log.error("未知错误");
        }
    }
}

Напишите супер простой тест страницы

   В интерфейсе есть посуда, я не могу написать красивый пользовательский интерфейс, извините~

<html>
<head>
    <meta charset="UTF-8"></meta>
    <title>springboot项目WebSocket测试demo</title>
</head>
<body>
<h3>springboot项目websocket测试demo</h3>
<h4>测试说明</h4>
<h5>文本框中数据数据，点击‘发送测试’，文本框中的数据会发送到后台websocket，后台接受到之后，会再推送数据到前端，展示在下方；点击关闭连接，可以关闭该websocket；可以跟踪代码，了解具体的流程；代码上有详细注解</h5>
<br />
<input id="text" type="text" />
<button onclick="send()">发送测试</button>
<hr />
<button onclick="clos()">关闭连接</button>
<hr />
<div id="message"></div>
<script>
    var websocket = null;
    if('WebSocket' in window){
        websocket = new WebSocket("ws://127.0.0.1:9999/webSocket/1");
    }else{
        alert("您的浏览器不支持websocket");
    }
    websocket.onerror = function(){
        setMessageInHtml("send error！");
    }
    websocket.onopen = function(){
        setMessageInHtml("连接成功！")
        setTimeout(function(){setMessageInHtml("欢迎来到这里！")
    },2000)
    }
    websocket.onmessage = e => setMessageInHtml(e.data)
    websocket.onclose = function(){
        setMessageInHtml("连接断开！")
    }
    window.onbeforeunload = function(){
        clos();
    }
    function setMessageInHtml(message){
        document.getElementById('message').innerHTML += message+"</br>";
    }
    function clos(){
        websocket.close(3000,"强制关闭");
    }
    function send(){
        var msg = document.getElementById('text').value;
        websocket.send(msg);
    }
</script>
</body>
</html>

контрольная работа

file

постскриптум

   Надеюсь, у нас каждый день будет небольшой урожай~

file

Следуйте за мной, если вы найдете это полезным

Категории