在 Spring Boot 中对接 WebSocket 是一个常见的场景，通常用于实现实时通信。以下是一个完整的 WebSocket 集成步骤，包括服务端和客户端的实现。本期做个简单的测试用例。
目录
一、WebSocket 简介
1. 什么是 WebSocket？
2. WebSocket 的特点
3. WebSocket 的工作原理
二、添加依赖
三、创建 WebSocket 配置类
四、创建 WebSocket 处理器
五、前端测试调用
六、WebSocket 的优缺点
与 HTTP 的对比
七、WebSocket 的实现
一、WebSocket 简介
1. 什么是 WebSocket？
WebSocket 是一种 全双工通信协议，允许客户端（如浏览器）和服务器之间建立长时间保持的双向通信连接。它于 2011 年作为 RFC 6455 标准发布，是 HTTP 的补充协议，可以在一个 TCP 连接上实现实时数据传输。
2. WebSocket 的特点
- 全双工通信：客户端和服务器都可以随时发送消息，互相独立。
- 长连接：连接建立后无需频繁创建和关闭，减少了通信开销。
- 低延迟：适合实时性要求较高的场景。
- 轻量级协议：相比 HTTP 请求，WebSocket 数据帧更小，传输更高效。
3. WebSocket 的工作原理
- 握手阶段：WebSocket 使用 HTTP 协议的
Upgrade头，将连接从 HTTP 升级为 WebSocket。 - 数据传输阶段：握手成功后，客户端和服务器之间可以通过单个 TCP 连接双向发送数据。
二、添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>三、创建 WebSocket 配置类
使用 @EnableWebSocket 注解开启 WebSocket 支持，并实现 WebSocketConfigurer 接口，定义 WebSocket 的端点和处理逻辑。
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 {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
// 注册 WebSocket 处理器和端点
registry.addHandler(new MyWebSocketHandler(), "/ws") // "/ws" 为 WebSocket 的端点
.setAllowedOrigins("*"); // 允许跨域请求
}
}
四、创建 WebSocket 处理器
自定义一个 WebSocket 处理器，用来处理客户端连接、消息和关闭连接等事件。
import org.springframework.web.socket.*;
import org.springframework.web.socket.handler.TextWebSocketHandler;
public class MyWebSocketHandler extends TextWebSocketHandler {
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
// 处理客户端连接
System.out.println("客户端连接成功：" + session.getId());
}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
// 接收并处理客户端消息
System.out.println("接收到消息：" + message.getPayload());
// 发送消息给客户端
session.sendMessage(new TextMessage("服务器收到消息：" + message.getPayload()));
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
// 处理客户端断开连接
System.out.println("客户端断开连接：" + session.getId());
}
}
五、前端测试调用
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Test</title>
</head>
<body>
<script>
let ws = new WebSocket("ws://localhost:10186/ws");
ws.onopen = function () {
console.log("Connection opened");
ws.send("你好呀，今天是2024-12-31号!");
};
ws.onmessage = function (event) {
console.log("Message from server: " + event.data);
};
ws.onclose = function () {
console.log("Connection closed");
};
ws.onerror = function (error) {
console.error("WebSocket error: " + error);
};
</script>
</body>
</html>
测试结果：
后端接收：
六、WebSocket 的优缺点
- 优点：
- 实现实时通信，如推送消息、聊天室等。
- 减少网络请求开销，提升性能。
- 支持低延迟的双向数据传输。
- 缺点：
- 需要单独的服务器支持 WebSocket 协议。
- 长连接可能会增加服务器的资源占用。
与 HTTP 的对比
| 特点 | HTTP | WebSocket |
|---|---|---|
| 连接方式 | 请求-响应模式 | 双向通信 |
| 连接状态 | 短连接（每次请求需重建） | 长连接 |
| 传输效率 | 较低 | 高效（头部信息少） |
| 实时性 | 不强 | 实时性强 |
七、WebSocket 的实现
客户端：HTML5 提供了内置的 WebSocket API。 示例：
const ws = new WebSocket('ws://localhost:8080/socket');
ws.onopen = () => console.log('连接成功');
ws.onmessage = (msg) => console.log('收到消息：', msg.data);
ws.onclose = () => console.log('连接关闭');
服务器端：不同语言和框架均支持 WebSocket（如 Spring Boot、Node.js、Flask 等）。
点个关注，不会迷路！
