JAVA：Springboot 集成 WebSocket 和 STOMP 实时消息的技术指南

news2025/1/14 22:07:17

1、简述

随着互联网应用的复杂性和实时性需求的增加，传统的 HTTP 请求响应模式已不能满足某些场景的需求。WebSocket 和 STOMP 协议为构建实时消息传输提供了极大的便利。本文将介绍如何在 Spring Boot 中使用 WebSocket 和 STOMP 创建一个实时消息应用，并通过实例展示其实现过程。

在这里插入图片描述

2、工作原理

2.1 WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。与传统的 HTTP 不同，WebSocket 在客户端与服务器之间建立连接后，可以在不关闭连接的情况下，进行双向数据传输。这使得 WebSocket 成为实现实时应用程序（如聊天应用、实时通知等）的理想选择。

2.2 STOMP

STOMP（Simple/Streaming Text Oriented Messaging Protocol）是一个简单的消息传递协议，通常用于 WebSocket 上层，以实现基于消息的通信。STOMP 协议定义了如何订阅主题、发送消息等操作，非常适合在 WebSocket 环境中使用。

2.3 WebSocket 和 STOMP 的工作原理

客户端建立 WebSocket 连接：客户端通过 WebSocket 连接到服务器，并订阅感兴趣的主题（topics）。
消息发布与订阅：当服务器有新的消息时，会根据消息主题将消息推送给订阅该主题的客户端。
双向通信：WebSocket 允许服务器和客户端之间进行双向通信，客户端也可以通过 WebSocket 发送消息到服务器。

3、集成

3.1 引入依赖

在 Spring Boot 项目中使用 WebSocket 和 STOMP，首先需要在 pom.xml 中添加相关依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

3.2 配置 WebSocket 和 STOMP

接下来，需要创建 WebSocket 配置类，启用 STOMP 消息代理：

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.enableSimpleBroker("/topic");  // 主题路径前缀
        config.setApplicationDestinationPrefixes("/app");  // 应用路径前缀
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS();  // WebSocket 连接路径
    }
}

在这个配置中，/topic 表示消息主题的路径前缀，/app 表示应用消息发送路径前缀，/ws 则是 WebSocket 连接的端点。

3.3 创建消息处理器

接下来，我们需要创建一个消息处理器类，用于接收和处理来自客户端的消息：

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class MessageController {

    @MessageMapping("/sendMessage")  // 接收客户端消息
    @SendTo("/topic/messages")  // 广播到主题
    public Message send(Message message) {
        // 处理消息的逻辑
        return message;  // 返回的消息将广播到所有订阅者
    }
}

这里的 @MessageMapping(“/sendMessage”) 表示接收客户端发送到 /app/sendMessage 的消息，并将处理后的消息广播到 /topic/messages 主题上，所有订阅了该主题的客户端将收到消息。

3.4 创建消息模型

定义一个简单的消息模型类，用于传递消息数据：

import lombok.Data;

@Data
public class Message {
    private String from;
    private String text;

    // Getters and Setters
}

3.5 编写前端代码

在前端（如使用 JavaScript）中，可以使用 SockJS 和 Stomp.js 来连接 WebSocket 并订阅消息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.1/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
</head>
<body>
    <div id="chat">
        <input type="text" id="message" placeholder="Enter your message"/>
        <button onclick="sendMessage()">Send</button>
        <ul id="messages"></ul>
    </div>

    <script type="text/javascript">
        var stompClient = null;

        function connect() {
            var socket = new SockJS('/ws');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/messages', function (message) {
                    showMessage(JSON.parse(message.body));
                });
            });
        }

        function sendMessage() {
            var messageContent = document.getElementById("message").value;
            stompClient.send("/app/sendMessage", {}, JSON.stringify({'text': messageContent, 'from': 'User'}));
        }

        function showMessage(message) {
            var messages = document.getElementById("messages");
            var messageElement = document.createElement('li');
            messageElement.appendChild(document.createTextNode(message.from + ": " + message.text));
            messages.appendChild(messageElement);
        }

        connect();
    </script>
</body>
</html>