【JAVA高级篇教学】第六篇：Springboot实现WebSocket

news2025/1/3 14:40:00

在 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 等）。