在现代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的依赖：
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
2. 配置WebSocket
创建一个配置类来启用WebSocket并注册WebSocket处理器：
@Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new MyWebSocketHandler(), "/ws").setAllowedOrigins("*"); } }
3. 实现WebSocket处理器
创建一个WebSocket处理器来处理连接、消息、错误和关闭事件：
@Component public class MyWebSocketHandler extends TextWebSocketHandler { private static final ConcurrentHashMap<String, WebSocketSession> sessions = new ConcurrentHashMap<>(); @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { sessions.put(session.getId(), session); System.out.println("WebSocket session established: " + session.getId()); } @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { // 处理接收到的消息 System.out.println("Received message: " + message.getPayload()); } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { sessions.remove(session.getId()); System.out.println("WebSocket session closed: " + session.getId()); } // 发送消息到指定客户端 public void sendMessageToUser(String sessionId, String message) throws IOException { WebSocketSession session = sessions.get(sessionId); if (session != null && session.isOpen()) { session.sendMessage(new TextMessage(message)); } } }
4. 控制器处理消息推送
创建一个控制器来触发消息推送：
@RestController @RequestMapping("/api/message") public class MessageController { @Autowired private MyWebSocketHandler webSocketHandler; @PostMapping("/push") public ResponseEntity<?> pushMessage(@RequestParam String sessionId, @RequestParam String message) { try { webSocketHandler.sendMessageToUser(sessionId, message); return ResponseEntity.ok("Message sent successfully"); } catch (IOException e) { return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to send message"); } } }
三、前端实现
1. 安装Vue Native WebSocket
在Vue项目中安装Vue Native WebSocket库：
npm install vue-native-websocket
2. 引入并使用WebSocket
在Vue项目的入口文件（如main.js）中引入并配置WebSocket：
import VueNativeSock from 'vue-native-websocket' Vue.use(VueNativeSock, 'ws://localhost:8080/ws', { reconnection: true, format: 'json', connectManually: true }); new Vue({ // Vue实例配置 });
3. 组件中使用WebSocket
在Vue组件中，使用WebSocket来接收消息：
<template> <div> <h1>Messages</h1> <ul> <li v-for="(message, index) in messages" :key="index">{{ message }}</li> </ul> </div> </template> <script> export default { data() { return { messages: [] // 用于存储接收到的消息 }; }, mounted() { // 如果需要手动连接WebSocket，可以在这里调用 // this.$connect(); // 监听WebSocket的message事件 this.$options.sockets.onmessage = (event) => { // 假设服务器发送的是纯文本消息 const message = event.data; // 将新消息添加到messages数组中 this.messages.push(message); // 如果需要滚动到最新的消息，可以添加如下代码 // 注意：这取决于你的页面布局和CSS // this.$nextTick(() => { // const messagesList = this.$el.querySelector('ul'); // if (messagesList) { // messagesList.scrollTop = messagesList.scrollHeight; // } // }); }; // 如果WebSocket是自动连接的，上面的$connect()调用可能是不必要的。 // 但是，如果你需要在组件挂载时做一些额外的设置或检查，你可以在这里进行。 }, beforeDestroy() { // 组件销毁前断开WebSocket连接（如果之前手动连接了的话） // 注意：如果WebSocket是自动管理的（如vue-native-websocket插件）， // 这可能不是必需的，因为插件通常会在Vue实例销毁时自动处理。 // 但为了完整性，这里还是展示一下如何手动断开连接 // this.$disconnect(); // 移除事件监听器（可选，取决于你是否需要在组件销毁时清理） // this.$options.sockets.offmessage = null; // 注意：vue-native-websocket插件并没有直接提供offmessage这样的方法， // 这里只是为了说明如果需要手动清理事件监听器的概念。 // 实际上，你可以通过保存对监听器函数的引用并在需要时调用removeEventListener来实现。 } }; </script> <style scoped> /* 你的样式 */ </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实例销毁时自动清理它们。但是，如果你以非标准方式添加了事件监听器，你可能需要手动清理它们以避免内存泄漏。
