WebSocket在Java Spring Boot+Vue框架中实现消息推送功能

在今世Web应用中，实时消息提醒是一项非常重要的功能，可以或许极大地提拔用户体验。WebSocket作为一种在单个TCP毗连上举行全双工通讯的协议，为实现实时消息提醒提供了高效且低延迟的解决方案。本文将详细先容如安在Java Spring Boot后端和Vue前端框架中利用WebSocket实现消息提醒功能。
一、技术栈

• 后端：Java Spring Boot
  
• 前端：Vue.js
  
• WebSocket库：Spring Boot的WebSocket支持，Vue Native WebSocket库
  

二、后端实现

1. 添加依赖

起首，在Spring Boot项目标pom.xml中添加WebSocket的依赖：

1. <dependency>  
2.     <groupId>org.springframework.boot</groupId>  
3.     <artifactId>spring-boot-starter-websocket</artifactId>  
4. </dependency>

复制代码

2. 配置WebSocket

创建一个配置类来启用WebSocket并注册WebSocket处理器：

1. @Configuration  
2. @EnableWebSocket  
3. public class WebSocketConfig implements WebSocketConfigurer {  
4.   
5.     @Override  
6.     public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {  
7.         registry.addHandler(new MyWebSocketHandler(), "/ws").setAllowedOrigins("*");  
8.     }  
9. }

复制代码

3. 实现WebSocket处理器

创建一个WebSocket处理器来处理毗连、消息、错误和关闭事件：

1. @Component  
2. public class MyWebSocketHandler extends TextWebSocketHandler {  
3.   
4.     private static final ConcurrentHashMap<String, WebSocketSession> sessions = new ConcurrentHashMap<>();  
5.   
6.     @Override  
7.     public void afterConnectionEstablished(WebSocketSession session) throws Exception {  
8.         sessions.put(session.getId(), session);  
9.         System.out.println("WebSocket session established: " + session.getId());  
10.     }  
11.   
12.     @Override  
13.     protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {  
14.         // 处理接收到的消息  
15.         System.out.println("Received message: " + message.getPayload());  
16.     }  
17.   
18.     @Override  
19.     public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {  
20.         sessions.remove(session.getId());  
21.         System.out.println("WebSocket session closed: " + session.getId());  
22.     }  
23.   
24.     // 发送消息到指定客户端  
25.     public void sendMessageToUser(String sessionId, String message) throws IOException {  
26.         WebSocketSession session = sessions.get(sessionId);  
27.         if (session != null && session.isOpen()) {  
28.             session.sendMessage(new TextMessage(message));  
29.         }  
30.     }  
31. }

复制代码

4. 控制器处理消息推送

创建一个控制器来触发消息推送：

1. @RestController  
2. @RequestMapping("/api/message")  
3. public class MessageController {  
4.   
5.     @Autowired  
6.     private MyWebSocketHandler webSocketHandler;  
7.   
8.     @PostMapping("/push")  
9.     public ResponseEntity<?> pushMessage(@RequestParam String sessionId, @RequestParam String message) {  
10.         try {  
11.             webSocketHandler.sendMessageToUser(sessionId, message);  
12.             return ResponseEntity.ok("Message sent successfully");  
13.         } catch (IOException e) {  
14.             return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to send message");  
15.         }  
16.     }  
17. }

复制代码

三、前端实现

1. 安装Vue Native WebSocket

在Vue项目中安装Vue Native WebSocket库：

1. npm install vue-native-websocket

复制代码

2. 引入并利用WebSocket

在Vue项目标入口文件（如main.js）中引入并配置WebSocket：

1. import VueNativeSock from 'vue-native-websocket'  
2.   
3. Vue.use(VueNativeSock, 'ws://localhost:8080/ws', {  
4.     reconnection: true,  
5.     format: 'json',  
6.     connectManually: true  
7. });  
8.   
9. new Vue({  
10.     // Vue实例配置  
11. });

复制代码

3. 组件中利用WebSocket

在Vue组件中，利用WebSocket来吸取消息：

1. <template>  
2.   <div>  
3.     <h1>Messages</h1>  
4.     <ul>  
5.       <li v-for="(message, index) in messages" :key="index">{{ message }}</li>  
6.     </ul>  
7.   </div>  
8. </template>  
9.   
10. <script>  
11. export default {  
12.   data() {  
13.     return {  
14.       messages: [] // 用于存储接收到的消息  
15.     };  
16.   },  
17.   mounted() {  
18.     // 如果需要手动连接WebSocket，可以在这里调用  
19.     // this.$connect();  
20.   
21.     // 监听WebSocket的message事件  
22.     this.$options.sockets.onmessage = (event) => {  
23.       // 假设服务器发送的是纯文本消息  
24.       const message = event.data;  
25.       // 将新消息添加到messages数组中  
26.       this.messages.push(message);  
27.   
28.       // 如果需要滚动到最新的消息，可以添加如下代码  
29.       // 注意：这取决于你的页面布局和CSS  
30.       // this.$nextTick(() => {  
31.       //   const messagesList = this.$el.querySelector('ul');  
32.       //   if (messagesList) {  
33.       //     messagesList.scrollTop = messagesList.scrollHeight;  
34.       //   }  
35.       // });  
36.     };  
37.   
38.     // 如果WebSocket是自动连接的，上面的$connect()调用可能是不必要的。  
39.     // 但是，如果你需要在组件挂载时做一些额外的设置或检查，你可以在这里进行。  
40.   },  
41.   beforeDestroy() {  
42.     // 组件销毁前断开WebSocket连接（如果之前手动连接了的话）  
43.     // 注意：如果WebSocket是自动管理的（如vue-native-websocket插件），  
44.     // 这可能不是必需的，因为插件通常会在Vue实例销毁时自动处理。  
45.     // 但为了完整性，这里还是展示一下如何手动断开连接  
46.     // this.$disconnect();  
47.   
48.     // 移除事件监听器（可选，取决于你是否需要在组件销毁时清理）  
49.     // this.$options.sockets.offmessage = null;  
50.     // 注意：vue-native-websocket插件并没有直接提供offmessage这样的方法，  
51.     // 这里只是为了说明如果需要手动清理事件监听器的概念。  
52.     // 实际上，你可以通过保存对监听器函数的引用并在需要时调用removeEventListener来实现。  
53.   }  
54. };  
55. </script>  
56.   
57. <style scoped>  
58. /* 你的样式 */  
59. </style>

复制代码

注意：

• 在这个例子中，我们假设服务器发送的是纯文本消息，所以直接将event.data添加到messages数组中。假如你的服务器发送的是JSON对象，你需要先解析它（比方，利用JSON.parse(event.data)）。
  
• this.$options.sockets.onmessage是一个简化的表现，用于说明如何监听WebSocket消息。然而，vue-native-websocket插件现实上提供了差别的方式来监听消息，通常是通过Vue的sockets选项或在Vue实例上直接监听$socket事件（取决于插件的版本和配置）。因此，请根据你现实利用的插件版本和配置来调整代码。
  
• 在beforeDestroy生命周期钩子中，我们注释掉了断开WebSocket毗连的代码，由于vue-native-websocket插件通常会在Vue实例销毁时自动处理WebSocket毗连的关闭。但是，假如你需要手动控制毗连的开启和关闭，你可以取消注释相干代码。
  
• 同样地，我们也注释掉了移除事件监听器的代码，由于vue-native-websocket插件会管理这些监听器，并在Vue实例销毁时自动清算它们。但是，假如你以非尺度方式添加了事件监听器，你大概需要手动清算它们以避免内存泄漏。
  

推荐好文：数据系统可视化大屏与数字看板：赋能聪明未来的多面手_实时数字看板-CSDN博客

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