【spring（六）】WebSocket网络传输协议

键���敲烂，年薪30万

目录

核心概要：

概念介绍：

对比HTTP协议：⭐

WebSocket入门案例：⭐

---

核心概要：

websocket对比http

概念介绍：

        WebSocket是Web服务器的一个组件，WebSocket是一种基于TCP的新的网络传输协议，它实现了浏览器与服务器全双工通信——浏览器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。

深度理解：

        前端发送请求建立连接，服务器接收到连接请求，与前端建立连接(基于WebSocket)，前端发送请求到服务器，服务器给出响应，连接不会关闭，如果前端再次发送请求，服务器正常处理，直到这次连接关闭。

应用场景：

        例如 视频弹幕，网页聊天，浏览器的实时动态。

对比HTTP协议：⭐

WebSocket入门案例：⭐

        实现步骤：

• 资源准备：有html页面作为客户端
• 服务器端导入WebSocket的maven坐标
• 导入WebSocket的服务器组件
• 导入配置类，注册WebSocket的服务端组件
• 注册一个定时任务类，用于测试。

          分析：

  WebSocketServer是接收响应前端请求的，相当于SpringMVC中的Controller。

  前端代码：

          WebSocket Demo        发送消息    关闭连接            var websocket = null;    var clientId = Math.random().toString(36).substr(2);    //判断当前浏览器是否支持WebSocket    if('WebSocket' in window){        //连接WebSocket节点        websocket = new WebSocket("ws://localhost:8080/ws/"+clientId);    }    else{        alert('Not support websocket')    }    //连接发生错误的回调方法    websocket.onerror = function(){        setMessageInnerHTML("error");    };    //连接成功建立的回调方法    websocket.onopen = function(){        setMessageInnerHTML("连接成功");    }    //接收到消息的回调方法    websocket.onmessage = function(event){        setMessageInnerHTML(event.data);    }    //连接关闭的回调方法    websocket.onclose = function(){        setMessageInnerHTML("close");    }    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。    window.onbeforeunload = function(){        websocket.close();    }    //将消息显示在网页上    function setMessageInnerHTML(innerHTML){        document.getElementById('message').innerHTML += innerHTML + '
  ';    }    //发送消息    function send(){        var message = document.getElementById('text').value;        websocket.send(message);    }//关闭连接    function closeWebSocket() {        websocket.close();    }

  导入maven坐标

                      org.springframework.boot            spring-boot-starter-web            compile        

  导入WebSocketServer代码：

  @Component@ServerEndpoint("/ws/{sid}")public class WebSocketServer {    //存放会话对象    private static Map sessionMap = new HashMap();    /**     * 连接建立成功调用的方法     */    @OnOpen    public void onOpen(Session session, @PathParam("sid") String sid) {        System.out.println("客户端：" + sid + "建立连接");        sessionMap.put(sid, session);    }    /**     * 收到客户端消息后调用的方法     *     * @param message 客户端发送过来的消息     */    @OnMessage    public void onMessage(String message, @PathParam("sid") String sid) {        System.out.println("收到来自客户端：" + sid + "的信息:" + message);    }    /**     * 连接关闭调用的方法     *     * @param sid     */    @OnClose    public void onClose(@PathParam("sid") String sid) {        System.out.println("连接断开:" + sid);        sessionMap.remove(sid);    }    /**     * 群发     *     * @param message     */    public void sendToAllClient(String message) {        Collection sessions = sessionMap.values();        for (Session session : sessions) {            try {                //服务器向客户端发送消息                session.getBasicRemote().sendText(message);            } catch (Exception e) {                e.printStackTrace();            }        }    }}

  导入WebSocketConfiguration代码：

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

  导入TASK代码：

  @Componentpublic class WebSocketTask {    @Autowired    private WebSocketServer webSocketServer;    /**     * 通过WebSocket每隔5秒向客户端发送消息     */    @Scheduled(cron = "0/5 * * * * ?")    public void sendMessageToClient() {        webSocketServer.sendToAllClient("这是来自服务端的消息：" + DateTimeFormatter.ofPattern("HH:mm:ss").format(LocalDateTime.now()));    }}

  测试：