构建即时通讯应用：Spring boot高效集成WebSocket、Stomp协议完成前后端持 ...

1. 引入依靠

在你的Spring Boot项目的pom.xml中添加以下依靠：

1. <dependencies>
3.         <!-- Spring Boot Starter Thymeleaf -->
4.         <dependency>
5.             <groupId>org.springframework.boot</groupId>
6.             <artifactId>spring-boot-starter-thymeleaf</artifactId>
7.         </dependency>
9.         <!-- Spring Boot Starter WebSocket -->
10.         <dependency>
11.             <groupId>org.springframework.boot</groupId>
12.             <artifactId>spring-boot-starter-websocket</artifactId>
13.         </dependency>
15.         <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
16.         <dependency>
17.             <groupId>com.fasterxml.jackson.core</groupId>
18.             <artifactId>jackson-databind</artifactId>
19.         </dependency>
21.         <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
22.         <dependency>
23.             <groupId>com.fasterxml.jackson.core</groupId>
24.             <artifactId>jackson-core</artifactId>
25.         </dependency>
27.         <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations -->
28.         <dependency>
29.             <groupId>com.fasterxml.jackson.core</groupId>
30.             <artifactId>jackson-annotations</artifactId>
31.         </dependency>
32.     </dependencies>

复制代码

2. 设置WebSocket

创建一个设置类来设置WebSocket毗连端点、STOMP协议和消息传输路径：

1. @Configuration
2. @EnableWebSocketMessageBroker
3. public class WebsocketMessageBrokerConfig implements WebSocketMessageBrokerConfigurer {
5.     @Override
6.     public void registerStompEndpoints(StompEndpointRegistry registry) {
7.         registry.addEndpoint("/ws") // WebSocket握手端口
8.                 .setAllowedOriginPatterns("*") // 设置跨域
9.                 .withSockJS(); // 开启SockJS回退机制
10.     }
12.     @Override
13.     public void configureMessageBroker(MessageBrokerRegistry registry) {
14.         registry.setApplicationDestinationPrefixes("/app") // 发送到服务端目的地前缀
15.                 .enableSimpleBroker("/topic");// 开启简单消息代理，指定消息订阅前缀
16.     }
18. }

复制代码

3. 创建消息处理惩罚器

创建一个控制器来处理惩罚客户端发送的消息，并将消息广播给订阅了相关主题的客户端：

1. /**
2. * 功能描述：
3. *
4. * @author Songxianyang
5. * @date 2024-08-05 17:24
6. */
7. @Controller
8. @Slf4j
9. @RequiredArgsConstructor
10. public class StompController {
12.     private final SimpMessagingTemplate messagingTemplate;
14.     @GetMapping("stomp")
15.     public ModelAndView stomp() {
16.         return new ModelAndView("stomp");
17.     }
20.     /**
21.      * 数据通过前端发送到后端，处理完数据后在响应给前端的订阅者“/topic/public”
22.      * @param chatMessage
23.      * @return
24.      */
26.     // 这个注解的作用是映射客户端发送到服务器的消息路径
27.     @MessageMapping("/chat.sendMessage")
28.     @SendTo("/topic/public")
29.     public ChatMessage sendMessage(ChatMessage chatMessage) {
30.         return chatMessage;
31.     }
33.     @MessageMapping("/chat.addUser")
34.     @SendTo("/topic/public")
35.     public ChatMessage addUser(ChatMessage chatMessage, SimpMessageHeaderAccessor headerAccessor) {
36.         // 将用户名存储在WebSocket会话中
37.         headerAccessor.getSessionAttributes().put("username", chatMessage.getSender());
38.         return chatMessage;
39.     }
41.     /**
42.      * 服务端主动给客户端发送消息
43.      * @return
44.      */
45.     @GetMapping("s-to-c")
46.     @SendTo("/topic/public")
47.     @ResponseBody
48.     public ChatMessage sToC() {
49.         ChatMessage chatMessage = new ChatMessage();
50.         chatMessage.setContent("西瓜视频");
51.         chatMessage.setSender("Server");
52.         chatMessage.setType(ChatMessage.MessageType.CHAT);
53.         // 发送消息
54.         messagingTemplate.convertAndSend("/topic/public", chatMessage);
55.         return chatMessage;
56.     }
61.     @GetMapping("/html/greeting")
62.     public ModelAndView turnToGreetingPage() {
63.         return new ModelAndView("greeting");
64.     }
66.     @MessageMapping("/greeting")
67.     public String sayGreeting(String name) {
68.         log.info("Message received: {}", name);
69.         return "Hello, " + name;
70.     }
73. }

复制代码

4. 创建消息模型

创建一个简单的Java类来表示聊天消息：

1. /**
2. * 聊天消息对象
3. */
4. @Data
5. public class ChatMessage {
6.     /**
7.      * 消息的类型
8.      */
9.     private MessageType type;
10.     /**
11.      * 消息的内容
12.      */
13.     private String content;
14.     /**
15.      * 发送者
16.      */
17.     private String sender;
19.     public enum MessageType {
20.         //普通聊天消息
21.         CHAT,
22.         // 加入聊天
23.         JOIN,
24.         // 离开聊天
25.         LEAVE
26.     }
27. }

复制代码

5. 创建前端代码(stomp.html)

在前端（例如使用HTML和JavaScript）中集成WebSocket和STOMP。以下是一个简单的示例：

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>WebSocket-Chat-stomp</title>
5.     <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.6.1/sockjs.min.js"></script>
6.     <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
7.     <script>
8.         var stompClient = null;
9.         // 接收消息
10.         function connect() {
11.             var socket = new SockJS('/ws');
12.             stompClient = Stomp.over(socket);
13.             stompClient.connect({}, function (frame) {
14.                 console.log('Connected: ' + frame);
15.                 // 客户端订阅服务端消息
16.                 stompClient.subscribe('/topic/public', function (message) {
17.                     showMessage(JSON.parse(message.body));
18.                 });
19.             });
20.         }
21.         // 发送消息
22.         function sendMessage() {
23.             var messageContent = document.getElementById("message").value;
24.             // 往客户端发送消息
25.             stompClient.send("/app/chat.sendMessage", {}, JSON.stringify({
26.                 sender: "User",
27.                 content: messageContent,
28.                 type: 'CHAT'
29.             }));
30.         }
31.         // 展示消息
32.         function showMessage(message) {
33.             var response = document.getElementById("response");
34.             var p = document.createElement("p");
35.             p.appendChild(document.createTextNode(message.sender + ": " + message.content));
36.             response.appendChild(p);
37.         }
39.         // 用户加入
40.         function addUser() {
41.             var userName = document.getElementById('username').value;
42.             if (userName && stompClient) {
43.                 var chatMessage = {
44.                     sender: userName,
45.                     content: userName + "已加入聊天!请注意财产安全",
46.                     type: 'JOIN'
47.                 };
48.                 stompClient.send("/app/chat.addUser", {}, JSON.stringify(chatMessage));
49.             }
50.         }
52.     </script>
53. </head>
54. <body onload="connect()">
55. <div>
57.     <input type="text" id="username" placeholder="Enter your name" />
58.     <button onclick="addUser()">用户加入</button>
60.     <input type="text" id="message" />
61.     <button onclick="sendMessage()">发送信息</button>
62. </div>
63. <div id="response"></div>
64. </body>
65. </html>

复制代码

7. yml设置

1. server:
2.   port: 9999
3. #  servlet:
4. #    context-path: /demo
5. spring:
6.   freemarker:
7.     request-context-attribute: request
8.     suffix: .html
9.     content-type: text/html
10.     enabled: true
11.     cache: false
12.     charset: UTF-8
13.     allow-request-override: false
14.     expose-request-attributes: true
15.     expose-session-attributes: true
16.     expose-spring-macro-helpers: true

复制代码

8. 运行应用步伐

启动Spring Boot应用步伐，并打开你的HTML页面，你应该能够通过WebSocket毗连发送和接收消息了。
毗连http://localhost:9999/stomphttp://localhost:9999/stomp 1.前端

2.用户加入

3.聊天消息

4.服务端主动给客户端发送消息

总结

通过以上步骤，你可以在Spring Boot项目中集成WebSocket和STOMP协议，实现实时的双向通信功能。这是一个根本的示例，你可以根据须要进行扩展和自定义，例如添加更多的消息处理惩罚逻辑、安全认证等。
源码

持续更新 (集群、优化这个应用）


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。