本文由 简悦 SimpRead 转码， 原文地址 blog.csdn.net
在现代 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 库：
import VueNativeSock from 'vue-native-websocket'
Vue.use(VueNativeSock, 'ws://localhost:8080/ws', {
reconnection: true,
format: 'json',
connectManually: true
});
new Vue({
// Vue实例配置
});
2. 引入并使用 WebSocket
在 Vue 项目的入口文件（如main.js）中引入并配置 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>
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 实例销毁时自动清理它们。但是，如果你以非标准方式添加了事件监听器，你可能需要手动清理它们以避免内存泄漏。