使用Spring WebSocket构建实时聊天室

missterzy

已于 2024-05-31 10:33:42 修改

阅读量173

点赞数

分类专栏： JAVA基础文章标签： spring websocket java

于 2023-11-09 13:15:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53391173/article/details/134302831

版权

JAVA基础专栏收录该内容

24 篇文章

订阅专栏

在当今数字化世界中，实时通信变得愈发重要。无论是在线客服、协同工作、还是多人游戏，WebSocket技术提供了一种强大的方式来实现实时通信。Spring框架为WebSocket提供了便捷的解决方案，通过@MessageMapping和@SendTo注解，您可以轻松构建实时聊天室和其他实时通信应用。

原理：

WebSocket是一种双向通信协议，它在客户端和服务器之间建立了持久的连接，实现了实时通信。Spring WebSocket模块使用STOMP（Simple Text Oriented Messaging Protocol）协议来实现WebSocket通信。@MessageMapping注解用于处理客户端发送的消息，而@SendTo注解用于将处理结果广播给订阅了特定主题的客户端。

示例代码：

1. 添加Spring WebSocket依赖：

确保在项目的pom.xml文件中添加Spring WebSocket依赖：

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

2. 创建WebSocket配置类：

创建一个配置类，用于配置WebSocket端点和消息代理：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");  // 定义消息代理主题
        config.setApplicationDestinationPrefixes("/app");  // 定义应用前缀
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat").withSockJS();  // 注册WebSocket端点
    }
}

3. 创建消息处理器：

编写消息处理器类，使用@MessageMapping和@SendTo注解处理和广播消息：

@Controller
public class ChatController {

    @MessageMapping("/chat.sendMessage")
    @SendTo("/topic/publicChatRoom")
    public ChatMessage sendMessage(@Payload ChatMessage chatMessage) {
        return chatMessage;
    }
}

4. 创建前端界面：

使用HTML和JavaScript创建前端界面，以便用户能够输入和接收实时消息。以下是一个前端示例：

<!DOCTYPE html>
<html>
<head>
    <title>实时聊天室</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/sockjs/1.4.2/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
    <div>
        <h2>实时聊天室</h2>
        <div id="chat-messages"></div>
        <input type="text" id="message" placeholder="输入消息">
        <button id="send">发送</button>
    </div>

    <script>
        // 创建WebSocket连接
        const socket = new SockJS('/chat');
        const stompClient = Stomp.over(socket);
        stompClient.connect({}, () => {
            stompClient.subscribe('/topic/publicChatRoom', (message) => {
                displayMessage(JSON.parse(message.body));
            });
        });

        // 发送消息
        $('#send').click(() => {
            const messageContent = $('#message').val();
            stompClient.send('/app/chat.sendMessage', {}, JSON.stringify({ content: messageContent }));
            $('#message').val('');
        });

        // 显示接收到的消息
        function displayMessage(message) {
            const messageDiv = document.createElement('div');
            messageDiv.innerHTML = `<strong>${message.sender}</strong>: ${message.content}`;
            $('#chat-messages').append(messageDiv);
        }
    </script>
</body>
</html>

5. 运行应用：

运行Spring Boot应用程序，访问前端界面，并开始实时聊天。

适用场景：

实时聊天应用程序，如在线客服系统。
协同工作应用，支持多用户协作编辑文档。
多人在线游戏，实时更新玩家状态和游戏事件。

优点：

实现实时通信，避免了轮询服务器的开销。
Spring WebSocket提供了简化开发的注解和配置。
支持将消息广播给所有订阅者，适用于多人聊天和多人协作应用。

总结：

Spring WebSocket是构建实时应用的有力工具，让开发者能够轻松实现双向通信。通过@MessageMapping和@SendTo注解，您可以创建实时聊天室和其他实时通信应用，提供更出色的用户体验。无论您是构建在线客服系统还是多人在线游戏，Spring WebSocket都是您不可或缺的助手。希望本文能够帮助您更好地理解和应用这一技术。