详解WebSocket

07-09 1075阅读

1.WebSocket是什么？

2.WebSocket的通信过程

3.WebSocket的报文结构

4.JAVA中的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标准。
      
      依赖：
      
      org.springframework.boot
      spring-boot-starter-web
      org.springframework.boot
      spring-boot-starter-websocket
      
      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("*");
    }
}
```
      前端代码示例：
```
    WebSocket Test


    发送消息
    
    
        const ws = new WebSocket('ws://localhost:8080/ws');
        ws.onopen = function(event) {
            console.log('WebSocket 已连接');
        };
        ws.onmessage = function(event) {
            document.getElementById('messageBox').innerHTML += '' + event.data + '';
        };
        ws.onclose = function(event) {
            console.log('WebSocket 已关闭');
        };
        function sendMessage() {
            const message = prompt('请输入要发送的消息：');
            ws.send(message);
        }
    
```