目录
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。
java
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处理器:
java
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("*");
}
}
前端代码示例:
html
<!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>