Spring Boot + WebSocket 实现 IM 即时通讯

IT_陈寒

发布于 2025-06-01 12:51:05

33600

代码可运行

文章被收录于专栏：开发经验开发经验

运行总次数：0

代码可运行

即时通讯（IM）已经成为现代应用中不可或缺的一部分，从社交媒体到企业协作工具，无不依赖于IM技术来实现实时消息传递。本文将介绍如何使用Spring Boot和WebSocket实现一个简单的即时通讯系统。

1. 项目环境准备

首先，我们需要创建一个Spring Boot项目，并添加WebSocket的相关依赖。使用Spring Initializr创建项目时，选择如下依赖：

Spring Web
Spring WebSocket

也可以在pom.xml中手动添加：

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

2. 配置WebSocket

创建一个配置类，来启用WebSocket并设置消息端点：

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("/chat").withSockJS();
    }
}

3. 创建消息处理器

接下来，我们需要创建一个控制器来处理WebSocket消息。创建一个新的控制器类：

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

@Controller
public class ChatController {

    @MessageMapping("/message")
    @SendTo("/topic/messages")
    public ChatMessage sendMessage(ChatMessage message) throws Exception {
        // 模拟处理时间
        Thread.sleep(1000);
        return new ChatMessage(HtmlUtils.htmlEscape(message.getContent()));
    }
}

4. 创建消息类

定义消息类来封装消息内容：

public class ChatMessage {

    private String content;

    public ChatMessage() {
    }

    public ChatMessage(String content) {
        this.content = content;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

5. 创建前端页面

在src/main/resources/static目录下创建一个HTML页面，作为前端聊天界面：

<!DOCTYPE html>
<html>
<head>
    <title>Chat Room</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.4.0/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h2>Chat Room</h2>
    <div id="messages"></div>
    <input type="text" id="message" placeholder="Type your message here..." autofocus/>
    <button onclick="sendMessage()">Send</button>

    <script>
        var stompClient = null;

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

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

        function showMessage(message) {
            $("#messages").append("<div>" + message + "</div>");
        }

        $(document).ready(function () {
            connect();
        });
    </script>
</body>
</html>