关键词

SpringBoot+STOMP协议实现私聊、群聊

下面是使用SpringBoot和STOMP协议实现私聊和群聊的完整攻略,包含两个示例说明。

简介

STOMP(Simple Text Oriented Messaging Protocol)是一种基于文本的消息传递协议,用于在客户端和服务器之间进行异步通信。在SpringBoot项目中,我们可以使用STOMP协议实现私聊和群聊功能。本文将介绍如何使用SpringBoot和STOMP协议实现私聊和群聊。

方法一:实现私聊

步骤1:添加依赖

在SpringBoot项目中,使用Maven或Gradle添加Spring Websocket和STOMP依赖。在pom.xml文件中添加以下依赖:

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

步骤2:创建WebSocket配置类

在SpringBoot项目中,创建一个WebSocket配置类,并使用@EnableWebSocketMessageBroker注解启用WebSocket消息代理。代码如下:

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

在上面的代码中,我们使用@EnableWebSocketMessageBroker注解启用WebSocket消息代理,并在configureMessageBroker方法中配置了消息代理的地址为/topic,应用程序的前缀为/app。在registerStompEndpoints方法中,我们注册了一个名为/ws的STOMP端点,并使用SockJS协议进行通信。

步骤3:创建Controller类

在SpringBoot项目中,创建一个Controller类,并使用@MessageMapping注解定义请求路径。代码如下:

@Controller
public class ChatController {
    @MessageMapping("/chat/{username}")
    @SendTo("/topic/messages")
    public ChatMessage send(@DestinationVariable String username, ChatMessage message) {
        return new ChatMessage(username, message.getContent());
    }
}

在上面的代码中,我们使用@MessageMapping注解定义了一个名为/chat/{username}的请求路径,并使用@SendTo注解将消息发送到/topic/messages地址。在send方法中,我们使用@DestinationVariable注解获取了用户名,并将消息内容封装成ChatMessage对象返回。

步骤4:创建页面

在SpringBoot项目中,创建一个页面,并使用STOMP.js库连接WebSocket服务器。代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>Chat</title>
    <script src="/webjars/sockjs-client/1.0.2/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/2.3.3/stomp.min.js"></script>
    <script>
        var stompClient = null;

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

        function disconnect() {
            if (stompClient !== null) {
                stompClient.disconnect();
            }
            console.log("Disconnected");
        }

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

        function showMessage(message) {
            var div = document.createElement("div");
            div.innerHTML = message.username + ": " + message.content;
            document.getElementById("messages").appendChild(div);
        }
    </script>
</head>
<body onload="connect()">
    <input type="text" id="username" placeholder="Username">
    <input type="text" id="content" placeholder="Message">
    <button onclick="sendMessage()">Send</button>
    <div id="messages"></div>
</body>
</html>

在上面的代码中,我们使用STOMP.js库连接WebSocket服务器,并在页面中添加了一个输入框和一个按钮,用于发送消息。在sendMessage方法中,我们使用stompClient.send方法发送消息,并将用户名作为路径参数传递。

步骤5:测试

在SpringBoot项目中,启动应用程序,并访问页面。在输入框中输入用户名和消息内容,点击发送按钮,将会发送一条私聊消息。

方法二:实现群聊

步骤1:添加依赖

在SpringBoot项目中,使用Maven或Gradle添加Spring Websocket和STOMP依赖。在pom.xml文件中添加以下依赖:

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

步骤2:创建WebSocket配置类

在SpringBoot项目中,创建一个WebSocket配置类,并使用@EnableWebSocketMessageBroker注解启用WebSocket消息代理。代码如下:

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

在上面的代码中,我们使用@EnableWebSocketMessageBroker注解启用WebSocket消息代理,并在configureMessageBroker方法中配置了消息代理的地址为/topic,应用程序的前缀为/app。在registerStompEndpoints方法中,我们注册了一个名为/ws的STOMP端点,并使用SockJS协议进行通信。

步骤3:创建Controller类

在SpringBoot项目中,创建一个Controller类,并使用@MessageMapping注解定义请求路径。代码如下:

@Controller
public class ChatController {
    @MessageMapping("/chat")
    @SendTo("/topic/messages")
    public ChatMessage send(ChatMessage message) {
        return new ChatMessage(message.getUsername(), message.getContent());
    }
}

在上面的代码中,我们使用@MessageMapping注解定义了一个名为/chat的请求路径,并使用@SendTo注解将消息发送到/topic/messages地址。在send方法中,我们将消息内容封装成ChatMessage对象返回。

步骤4:创建页面

在SpringBoot项目中,创建一个页面,并使用STOMP.js库连接WebSocket服务器。代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>Chat</title>
    <script src="/webjars/sockjs-client/1.0.2/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/2.3.3/stomp.min.js"></script>
    <script>
        var stompClient = null;

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

        function disconnect() {
            if (stompClient !== null) {
                stompClient.disconnect();
            }
            console.log("Disconnected");
        }

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

        function showMessage(message) {
            var div = document.createElement("div");
            div.innerHTML = message.username + ": " + message.content;
            document.getElementById("messages").appendChild(div);
        }
    </script>
</head>
<body onload="connect()">
    <input type="text" id="username" placeholder="Username">
    <input type="text" id="content" placeholder="Message">
    <button onclick="sendMessage()">Send</button>
    <div id="messages"></div>
</body>
</html>

在上面的代码中,我们使用STOMP.js库连接WebSocket服务器,并在页面中添加了一个输入框和一个按钮,用于发送消息。在sendMessage方法中,我们使用stompClient.send方法发送消息。

步骤5:测试

在SpringBoot项目中,启动应用程序,并访问页面。在输入框中输入用户名和消息内容,点击发送按钮,将会发送一条群聊消息。

结束语

本文介绍了使用SpringBoot和STOMP协议实现私聊和群聊的方法,并提供了两个示例说明。使用这些方法,我们可以方便地实现WebSocket通信,并提高开发效率。

本文链接:http://task.lmcjl.com/news/7202.html

展开阅读全文