Springboot WebSocket极简聊天室

最新推荐文章于 2024-09-05 10:39:00 发布

losheep

最新推荐文章于 2024-09-05 10:39:00 发布

阅读量351

点赞数 5

文章标签： java 开发语言 websocket

本文链接：https://blog.csdn.net/2301_77828825/article/details/137188247

版权

本文介绍了如何在SpringBoot应用中使用WebSocket进行实时通信，包括添加依赖、配置WebSocket处理器和前端HTML页面的交互示例。适合初学者研究和扩展WebSocket功能。

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

首先是要在pom.xml添加WebSocket的依赖，然后就可以编写下面代码

创建启动类 ChatRoomDemoApplication ：

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import org.springframework.web.socket.WebSocketSession;

import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

@SpringBootApplication
@EnableWebSocket
public class ChatRoomDemoApplication implements WebSocketConfigurer {

    private final Map<String, WebSocketSession> sessions = new ConcurrentHashMap<>();

    public static void main(String[] args) {
        SpringApplication.run(ChatRoomDemoApplication.class, args);
    }

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(chatWebSocketHandler(), "/chat").setAllowedOrigins("*");
    }

    @Bean
    public WebSocketHandler chatWebSocketHandler() {
        return new TextWebSocketHandler() {
            @Override
            public void afterConnectionEstablished(WebSocketSession session) throws Exception {
                sessions.put(session.getId(), session);
            }

            @Override
            public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
                sessions.remove(session.getId());
            }

            @Override
            protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
                for (WebSocketSession webSocketSession : sessions.values()) {
                    webSocketSession.sendMessage(message);
                }
            }
        };
    }
}

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Room Demo</title>
</head>
<body>
    <div id="chat-box"></div>
    <input type="text" id="message" placeholder="Type your message here...">
    <button onclick="sendMessage()">Send</button>

    <script>
        const socket = new WebSocket("ws://localhost:8080/chat");
        
        socket.onmessage = function(event) {
            const message = event.data;
            document.getElementById("chat-box").innerHTML += "<p>" + message + "</p>";
        };
        
        function sendMessage() {
            const message = document.getElementById("message").value;
            socket.send(message);
            document.getElementById("message").value = "";
        }
    </script>
</body>
</html>

然后就可以启动试试了，这个项目适合对于WebSocket一头雾水的同志研究学习，后面可以自行拆分拓展代码