详解WebSocket

1.WebSocket是什么？

在传统的BS体系中，请求响应一直是单向的，服务器一直扮演的”被动“的角色，浏览器发起请求去访问服务器，服务器才会返回响应。这种单向的模式让实时通信、消息推送一类的场景，实现起来成本巨大。

HTML5里面提出了WebSocket标准，目的就是让服务器具有”主动“的能力，能由服务器向浏览器主动推送东西。WebSocket 是一种基于 TCP 协议的应用层协议，它允许客户端和服务器之间建立持久连接，实现实时通信和推送功能，其和HTTP属于并列的关系：

2.WebSocket的通信过程

WebSocket的通信分为两个阶段：

握手阶段

数据交换阶段

握手阶段：

客户端通过 HTTP 请求发起握手请求，请求头包含一些特殊的字段，如pgrade: websocket和 Connection: Upgrade，以及其他的 WebSocket 相关字段。

服务器响应握手：服务器收到客户端的 WebSocket 握手请求后，进行协议升级，将 HTTP 连接升级为 WebSocket 连接。服务器返回一个 WebSocket 握手响应，响应头中包含特殊字段，如 Upgrade: websocket 和 Connection: Upgrade，以及其他的 WebSocket 相关字段。

连接建立：一旦客户端收到服务器的 WebSocket 握手响应，WebSocket 连接就建立成功，现在客户端和服务器都可以发送和接收 WebSocket 消息了。

数据交换阶段：

双向数据交换：WebSocket 连接建立后，客户端和服务器可以通过 WebSocket 会话进行双向的数据交换。任何一方都可以随时发送消息给对方，而不需要事先发出请求。这使得客户端和服务器能够实时交流和传输数据。

数据帧：WebSocket 使用数据帧（Frame）来传输数据。数据帧是 WebSocket 数据的最小传输单元。数据帧可以被分割成多个片段来传输更大的数据。数据帧中包含了有效载荷（Payload）和一些控制信息，例如标识消息类型、是否为最后一个片段等。

心跳检测：WebSocket 连接建立后，客户端和服务器可以通过发送心跳数据帧来维持连接。心跳检测可以确保连接的持久性，如果在一段时间内没有收到心跳响应，可以判断连接已断开。

3.WebSocket的报文结构

websocket的报文=结束标志位 + 操作码 + 帧长度 + 掩码

第一位“FIN”：相当于 HTTP/2 里的“END_STREAM”，表示数据发送完毕。一个消息可以拆成多个帧，接收方看到“FIN”后，就可以把前面的帧拼起来，组成完整的消息。

“FIN”后面的三个位是保留位，目前没有任何意义，但必须是 0。

“Opcode”，操作码：其实就是帧类型，比如 1 表示帧内容是纯文本，2 表示帧内容是二进制数据，8 是关闭连接，9 和 10 分别是连接保活的 PING 和 PONG。

掩码标志位“MASK”：表示帧内容是否使用异或操作（xor）做简单的加密。目前的 WebSocket 标准规定，客户端发送数据必须使用掩码，而服务器发送则必须不使用掩码。

“Payload len”：表示帧内容的长度。它是另一种变长编码，最少 7 位，最多是 7+64 位，也就是额外增加 8 个字节，所以一个 WebSocket 帧最大是 2^64。

“Masking-key”：掩码密钥，它是由上面的标志位“MASK”决定的，如果使用掩码就是 4 个字节的随机数，否则就不存在。

4.JAVA中的WebSocket

WebSocket作为一个HTML5标准，也就是前端提出的标准，后端服务器需要支持这种标准，也就是能准确解析WebSocket的数据包，按照约定的标准来办事儿，才能使用WebSocket。

Java 的 Servlet 3.1 规范中包含了对 WebSocket 的支持，也就是说支持Servlet 3.1的Web Server就支持WebSocket。实际开发中常用的tomcat、netty都支持websocket。

这里给出Spring Boot中使用WebSocket的demo。其底层是用的TomCat支持的WebSocket标准。

依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

websocket处理器：

每一个 WebSocket 连接对应一个 WebSocketSession。当客户端通过 WebSocket 建立连接时，服务器会为每个连接创建一个 WebSocketSession 对象，用于表示该连接的会话信息。

处理器用于处理WebSocketSession。

import org.springframework.stereotype.Component;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.WebSocketMessage;
import org.springframework.web.socket.WebSocketSession;
 
@Component
public class MyWebSocketHandler implements WebSocketHandler {
 
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("WebSocket 连接建立：" + session.getId());
    }
 
    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
        String payload = message.getPayload().toString();
        System.out.println("接收到消息：" + payload);
        session.sendMessage(new TextMessage("服务器收到消息：" + payload));
    }
 
    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        System.err.println("WebSocket 传输错误：" + session.getId());
    }
 
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
        System.out.println("WebSocket 连接关闭：" + session.getId());
    }
 
    @Override
    public boolean supportsPartialMessages() {
        return false;
    }
}

配置、注册websocket处理器：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
 
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
 
    @Autowired
    private MyWebSocketHandler webSocketHandler;
 
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(webSocketHandler, "/ws").setAllowedOrigins("*");
    }
}

前端代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Test</title>
</head>
<body>
    <button onclick="sendMessage()">发送消息</button>
    <div id="messageBox"></div>
 
    <script>
        const ws = new WebSocket('ws://localhost:8080/ws');
 
        ws.onopen = function(event) {
            console.log('WebSocket 已连接');
        };
 
        ws.onmessage = function(event) {
            document.getElementById('messageBox').innerHTML += '<p>' + event.data + '</p>';
        };
 
        ws.onclose = function(event) {
            console.log('WebSocket 已关闭');
        };
 
        function sendMessage() {
            const message = prompt('请输入要发送的消息：');
            ws.send(message);
        }
    </script>
</body>
</html>