Spring Boot WebSocket 实现多客户端实时同步的完整教程-java教程-PHP中文网

本文详细讲解如何基于 spring boot 的 websocket + stomp 协议实现多个客户端连接到同一服务器后的数据自动同步，涵盖服务端配置、消息广播机制及关键的客户端订阅逻辑。

本文详细讲解如何基于 spring boot 的 websocket + stomp 协议实现多个客户端连接到同一服务器后的数据自动同步，涵盖服务端配置、消息广播机制及关键的客户端订阅逻辑。

在 Spring Boot 中使用 WebSocket 实现多客户端自动同步，核心在于构建一个发布-订阅（Pub/Sub）模型：当任一客户端发起变更（如创建 Collection），服务端处理后主动将更新广播至所有已订阅的客户端，而非依赖轮询或手动刷新。你当前的服务端配置整体方向正确，但存在几个关键遗漏点，导致“发送了却无响应”——问题不在服务端逻辑失效，而在于缺少客户端的主动订阅与消息消费机制。

✅ 正确的服务端配置要点

你的 WebSocketConfig 基本符合规范，但有两处建议优化：

端点路径需明确区分：/chat 是 STOMP 连接端点，不应与业务路径混淆；推荐统一为 /ws 或 /stomp，并确保前端连接 URL 与之严格匹配；
启用跨域支持（开发阶段必需）：若前端运行在 http://localhost:3000 等非同源地址，需添加 setAllowedOrigins("*")：

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/ws")
            .setAllowedOrigins("http://localhost:3000", "http://localhost:8080") // 生产环境请精确配置
            .withSockJS();
}

⚠️ 注意：SockJS 是兼容性降级方案（用于不支持原生 WebSocket 的旧浏览器），现代应用可直接使用原生 WebSocket，只需移除 .withSockJS() 即可。

✅ 消息广播逻辑：不只是 @SendTo

你的 MessageController 使用 @SendTo("/topic/messages") 是正确的广播方式，但需确保：

客户端已订阅 /topic/messages（这是关键！服务端不会“推送给未订阅者”）；
消息体必须是可序列化对象（如 Collection），且客户端需配置对应反序列化器（如 MappingJackson2MessageConverter）。

无需修改控制器逻辑，但建议增强健壮性：

WebSocket 8.18.2

WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。

下载

@MessageMapping("/collection/update")
@SendTo("/topic/collections")
public Collection updateCollection(@Payload Collection collection) {
    // 业务逻辑：保存到数据库、触发事件等
    collectionService.save(collection);
    System.out.println("Broadcasting updated collection: " + collection.getId());
    return collection; // 广播给所有 /topic/collections 订阅者
}

✅ 客户端：必须显式订阅才能接收广播

这才是你“什么都没发生”的根本原因。Spring WebSocket 的 @SendTo 仅向已建立订阅关系的客户端发送消息。客户端必须通过 STOMP 协议执行两个动作：

建立 WebSocket 连接并握手（STOMP over WebSocket）；
调用 subscribe() 方法监听指定目标（如 /topic/collections）。

以下为 Java 客户端（如测试工具或桌面应用）的标准接入代码：

// 1. 建立连接
private StompSession connect() {
    WebSocketClient client = new StandardWebSocketClient();
    WebSocketStompClient stompClient = new WebSocketStompClient(client);
    stompClient.setMessageConverter(new MappingJackson2MessageConverter()); // 支持 JSON ↔ 对象转换

    try {
        return stompClient.connect("ws://localhost:8080/ws", new StompSessionHandlerAdapter() {}).get();
    } catch (Exception e) {
        throw new RuntimeException("Failed to connect to WebSocket", e);
    }
}

// 2. 订阅主题（关键！）
public void subscribeToCollections(Consumer<collection> handler) {
    session.subscribe("/topic/collections", new StompFrameHandler() {
        @Override
        public Type getPayloadType(StompHeaders headers) {
            return Collection.class;
        }

        @Override
        public void handleFrame(StompHeaders headers, Object payload) {
            handler.accept((Collection) payload); // 接收到更新，触发 UI 刷新等
        }
    });
}

// 3. 发送更新（触发广播）
public void sendCollectionUpdate(Collection collection) {
    session.send("/app/collection/update", collection);
}</collection>

? 前端 Web 客户端（JavaScript）同理：需使用 @stomp/stompjs 库，调用 client.subscribe('/topic/collections', callback) —— 没有这行代码，永远收不到服务端推送。

? 总结：三步走通自动同步

步骤	关键操作	验证方式
1. 服务端就绪	配置 @EnableWebSocketMessageBroker、/topic/* 广播、/app/* 接收端点	启动后访问 ws://localhost:8080/ws 能成功握手（浏览器控制台无 404）
2. 客户端连接+订阅	使用 STOMP 客户端连接 /ws，并 subscribe("/topic/collections")	客户端日志出现 "Subscribed to /topic/collections"
3. 触发广播	任一客户端 send("/app/collection/update", data)	其他已订阅客户端的 handleFrame() 回调被触发，控制台打印接收日志