springboot整合websocket实现聊天室对话

还得是你大哥

于 2024-01-03 15:39:36 发布

阅读量623

点赞数 7

分类专栏： java服务端文章标签： spring boot websocket 后端

本文链接：https://blog.csdn.net/qq_41243828/article/details/135365475

版权

java服务端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用SpringBoot和WebSocket技术构建一个简单的聊天室应用，包括添加依赖、配置WebSocket、创建消息控制器和前端页面的实现步骤。

摘要由CSDN通过智能技术生成

要实现Spring Boot整合WebSocket实现聊天室对话，你需要遵循以下步骤：

1. 添加依赖

在你的pom.xml文件中添加以下依赖：

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

2. 配置WebSocket

创建一个配置类，继承AbstractWebSocketMessageBrokerConfigurer，并重写相关方法：

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

@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();
    }
}

3. 创建消息控制器

创建一个控制器类，用于处理客户端发送的消息：

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

@Controller
public class ChatController {

    @MessageMapping("/send")
    @SendTo("/topic/messages")
    public String handleMessage(String message) {
        return message;
    }
}

4. 前端页面

创建一个HTML页面，用于显示聊天室和发送消息的表单：

<!DOCTYPE html>
<html>
<head>
    <title>Chat Room</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
    <div id="chatroom">
        <ul id="messages"></ul>
    </div>
    <form id="form">
        <input type="text" id="input" placeholder="Type your message here...">
        <button type="submit">Send</button>
    </form>
    <script>
        var socket = new SockJS('/chat');
        var stompClient = Stomp.over(socket);
        var messagesElement = document.getElementById('messages');
        var formElement = document.getElementById('form');
        var inputElement = document.getElementById('input');

        stompClient.connect({}, function (frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe('/topic/messages', function (message) {
                var li = document.createElement('li');
                li.appendChild(document.createTextNode(message.body));
                messagesElement.appendChild(li);
            });
        });

        formElement.addEventListener('submit', function (event) {
            event.preventDefault();
            stompClient.send("/app/send", {}, inputElement.value);
            inputElement.value = '';
        });
    </script>
</body>
</html>