在现代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的依赖：

2. 配置WebSocket

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

3. 实现WebSocket处理器

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

4. 控制器处理消息推送

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

三、前端实现

1. 安装Vue Native WebSocket

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

2. 引入并使用WebSocket

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

3. 组件中使用WebSocket

在Vue组件中，使用WebSocket来接收消息：

注意：

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

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