使用Spring Boot实现WebSocket实时数据传输

m0_74404191

1034人浏览 · 2025-04-15 10:37:16

m0_74404191 · 2025-04-15 10:37:16 发布

WebSocket是一种在单个TCP连接上进行全双工通信的协议，非常适合需要实时数据推送的场景（如聊天室、实时监控等）。本文将通过Spring Boot演示如何建立WebSocket服务并实现前后端实时通信。

一、环境准备

使用[Spring Initializr]创建项目，添加以下依赖：

<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>

二、服务端实现

1. 配置WebSocket

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    // 注册STOMP端点
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws")
                .setAllowedOriginPatterns("*")
                .withSockJS();
    }

    // 配置消息代理
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic"); // 客户端订阅地址前缀
        registry.setApplicationDestinationPrefixes("/app"); // 服务端接收地址前缀
    }
}

2. 创建消息控制器

@Controller
public class MessageController {

    @Autowired
    private SimpMessagingTemplate messagingTemplate;

    // 处理客户端发来的消息
    @MessageMapping("/send/message")
    public void handleMessage(String message) {
        // 广播消息给所有订阅/topic/messages的客户端
        messagingTemplate.convertAndSend("/topic/messages", 
            "Server响应: " + message + " [" + LocalDateTime.now() + "]");
    }
}

三、前端实现

<!DOCTYPE html>
<html>
<body>
    <input type="text" id="messageInput">
    <button onclick="sendMessage()">发送</button>
    <div id="messages"></div>

    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.0/dist/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <script>
        const socket = new SockJS('http://localhost:8080/ws');
        const stompClient = Stomp.over(socket);

        stompClient.connect({}, (frame) => {
            // 订阅消息通道
            stompClient.subscribe('/topic/messages', (response) => {
                const msgDiv = document.createElement('div');
                msgDiv.textContent = response.body;
                document.getElementById('messages').appendChild(msgDiv);
            });
        });

        function sendMessage() {
            const message = document.getElementById('messageInput').value;
            stompClient.send("/app/send/message", {}, message);
        }
    </script>
</body>
</html>