Spring Boot3 竟能如此轻松整合 WebSocket 技术，你还不知道?

liuian 2025-07-17 20:39 96 浏览

在当今互联网大厂的软件开发领域，实时通信的需求愈发迫切。无论是在线聊天应用、实时数据更新，还是协同办公系统，都离不开高效的实时通信技术支持。而 WebSocket 作为一种能够实现浏览器与服务器之间持久连接、双向实时传输数据的网络通信协议，正逐渐成为众多开发场景中的首选。

对于我们互联网大厂的技术开发人员而言，如何在 Spring Boot3 中高效整合 WebSocket 技术，无疑是一项关键技能。今天，就带大家深入探究这一技术融合的奥秘。

WebSocket 技术背景

WebSocket 是一种位于 OSI 模型应用层的网络传输协议，它基于 TCP 协议，提供全双工通信通道。与传统的 HTTP 请求 - 响应模式相比，WebSocket 有着显著的优势。早期，许多网站为实现推送技术，采用轮询方式，即浏览器每隔一段时间（如每秒）向服务器发出 HTTP 请求，服务器返回最新数据给客户端。这种模式缺点明显，浏览器频繁请求，HTTP 请求与回复头部较长，真正有效的数据占比小，大量消耗带宽资源。后来出现的 Comet 技术虽能实现双向通信，但仍需反复请求，且 HTTP 长连接会消耗服务器资源。在这样的背景下，HTML5 定义了 WebSocket 协议，它能节省服务器资源和带宽，更实时地进行通讯。

WebSocket 协议具有诸多优点，如控制开销少，在连接建立后，服务器和客户端交换数据时，协议控制数据包头部相对较小；实时性强，可实现服务器主动向客户端推送数据；保持连接状态，建立连接后成为有状态协议，后续通信可省略部分状态信息；对二进制支持好，定义了二进制帧便于处理二进制内容；支持扩展，用户可扩展协议、实现自定义子协议；压缩效果好，在适当扩展支持下，传递类似数据时能显著提高压缩率。

在 Spring Boot3 中整合 WebSocket 的具体步骤

添加依赖

在 Spring Boot 项目的 pom.xml 文件中，添加 Spring Web 依赖，示例如下：

<dependencies>
    <!-- springboot starter web包含websocket支持 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
</dependencies>

若有与 Spring Security 整合等额外需求，还需添加相应依赖。

创建 WebSocket 配置类

创建一个类，实现 WebSocketConfigurer 接口，用于配置 WebSocket。在该类中，需注册 WebSocket 端点、设置消息代理以及配置拦截器。以下是一个简单示例：

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.setApplicationDestinationPrefixes("/app");
        config.setUserDestinationPrefix("/user");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket-endpoint").withSockJS();
    }
}

上述代码中，通过@
EnableWebSocketMessageBroker注解启用了 WebSocket 消息代理。在configureMessageBroker方法中，设置了应用程序的目的地前缀为/app，用户目的地前缀为/user 。在registerStompEndpoints方法中，注册了一个名为/websocket-endpoint的 STOMP 端点，并启用了 SockJS 回退选项，以支持不支持 WebSocket 的浏览器。

自定义 WebSocket 处理器

创建自定义的 WebSocket 处理器，用于处理消息的收发。示例代码如下：

import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

public class CustomWebSocketHandler extends TextWebSocketHandler {

    private static final Logger log = LoggerFactory.getLogger(CustomWebSocketHandler.class);
    private final Map<String, WebSocketSession> sessions = new HashMap<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        String sessionId = session.getId();
        sessions.put(sessionId, session);
        log.info("WebSocket连接建立：{}", sessionId);
    }

    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String sessionId = session.getId();
        String payload = message.getPayload();
        log.info("收到来自 {} 的消息：{}", sessionId, payload);
        // 这里可根据业务逻辑处理消息，比如广播给其他客户端
        broadcastMessage(payload);
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        String sessionId = session.getId();
        sessions.remove(sessionId);
        log.info("WebSocket连接关闭：{}", sessionId);
    }

    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        log.error("WebSocket传输错误", exception);
    }

    // 广播消息给所有连接的客户端
    public void broadcastMessage(String message) {
        sessions.values().forEach(session -> {
            try {
                session.sendMessage(new TextMessage(message));
            } catch (IOException e) {
                log.error("广播消息失败", e);
            }
        });
    }
}

在上述代码中，CustomWebSocketHandler继承自TextWebSocketHandler，重写了多个方法。
afterConnectionEstablished方法在连接建立时被调用，将新建立连接的会话信息存入sessions map 中。handleTextMessage方法处理接收到的文本消息，记录消息来源和内容，并调用broadcastMessage方法广播消息。afterConnectionClosed方法在连接关闭时被调用，从sessions map 中移除对应的会话信息。handleTransportError方法处理传输过程中的错误。broadcastMessage方法遍历所有会话，将消息发送给每个连接的客户端。

创建控制器

创建一个 REST 控制器，用于测试消息广播。示例如下：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api/websocket")
public class WebSocketController {

    private final CustomWebSocketHandler webSocketHandler;

    @Autowired
    public WebSocketController(CustomWebSocketHandler webSocketHandler) {
        this.webSocketHandler = webSocketHandler;
    }

    @PostMapping("/broadcast")
    public ResponseEntity<String> broadcastMessage(@RequestBody String message) {
        webSocketHandler.broadcastMessage(message);
        return ResponseEntity.ok("消息广播成功");
    }
}

在该控制器中，通过依赖注入获取CustomWebSocketHandler实例。broadcastMessage方法接收一个字符串消息，调用CustomWebSocketHandler的broadcastMessage方法进行消息广播，并返回成功响应。

前端实现

创建一个简单的 HTML 页面，用于与后端的 WebSocket 进行交互，实现消息的发送和接收。示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <title>WebSocket测试</title>
</head>
<body>
<div>
    <h2>WebSocket测试页面</h2>
    <div>
        <input type="text" id="messageInput" placeholder="输入消息">
        <button onclick="sendMessage()">发送</button>
    </div>
    <div id="messages" style="margin-top: 20px;"></div>
</div>

<script>
    let ws = null;

    function connect() {
        ws = new WebSocket('ws://localhost:8080/websocket-endpoint');

        ws.onopen = function () {
            console.log('WebSocket连接已建立');
            appendMessage('系统消息：连接已建立');
        };

        ws.onmessage = function (event) {
            appendMessage('收到消息：' + event.data);
        };

        ws.onclose = function () {
            console.log('WebSocket连接已关闭');
            appendMessage('系统消息：连接已关闭');
        };

        ws.onerror = function (error) {
            console.error('WebSocket错误：', error);
            appendMessage('系统消息：连接发生错误');
        };
    }

    function sendMessage() {
        const messageInput = document.getElementById('messageInput');
        const message = messageInput.value;

        if (ws && message) {
            ws.send(message);
            appendMessage('发送消息：' + message);
            messageInput.value = '';
        }
    }

    function appendMessage(message) {
        const messagesDiv = document.getElementById('messages');
        const messageElement = document.createElement('div');
        messageElement.textContent = message;
        messagesDiv.appendChild(messageElement);
    }

    // 页面加载完成后连接WebSocket
    window.onload = connect;
</script>
</body>
</html>

在上述 HTML 页面中，通过 JavaScript 代码创建了一个 WebSocket 连接，连接地址为
ws://localhost:8080/websocket-endpoint ，与后端注册的 STOMP 端点相对应。connect函数在页面加载完成后被调用，负责建立 WebSocket 连接，并定义了连接建立、收到消息、连接关闭和发生错误时的回调函数。sendMessage函数在用户点击 “发送” 按钮时被调用，获取用户输入的消息并通过 WebSocket 发送。appendMessage函数用于将消息显示在页面上。