若依集成WebSocket实现消息通知功能
实现效果[*]A用户和B用户同时在线时，A用户提交申请后，B用户可以收到消息通知
[*]A用户在线，B用户不在线时，A用户可以提交申请，B用户上线后可以收到消息通知
[*]WebSocket刷新不会断开连接
先看效果，使用admin用户向test用户发送通知进行测试：
官方文档
我使用的是前后端分离版本的若依，前端使用的是vue3,官方文档中提供了集成WebSocket的方法：https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html#集成websocket实现实时通信 ，详细内容如下：
1、ruoyi-framework/pom.xml文件添加websocket依赖。
<dependency>
<groupId>org.springframework.boot</groupId>
spring-boot-starter-websocket</artifactId>
</dependency>2、配置匿名访问（可选）
// 如果需要不登录也可以访问，需要在`SecurityConfig.java`中设置匿名访问
("/websocket/**").permitAll()3、下载插件相关包和代码实现覆盖到工程中
提示
插件相关包和代码实现ruoyi-vue/集成websocket实现实时通信.zip
链接: https://pan.baidu.com/s/1y1g8NkelRT_pS0fIbmyP8g 提取码: mjs74、测试验证
如果要测试验证可以把websocket.vue内容复制到login.vue，点击连接发送消息测试返回结果。
代码实现
官方文档中提供了SemaphoreUtils,WebSocketConfig,WebSocketServer和WebSocketUsers四个后端java文件用于集成WebSocket，我的代码仅在WebSocketServer中做修改，其余文件没有修改，修改后的代码如下。
此处为WebSocket实现消息通知的简易版思路，仅为玩具，不考虑性能，应该会存在bug，整体思路如下：
1、用户登陆成功后，向后端发送当前用户名，并在本地localstorage中存储值（用户刷新时使用）
2、后端接收到前端发送的用户名后，判断该用户是否在后端维护的用户列表中，如果不在，则新建用户，如果在，则说明该用户在前端进行了刷新，那么就不新建用户，而是更新现有用户列表中的信息
3、A用户向B用户发送消息，如果B用户在线，则通过后端直接发送消息给B用户，如果B用户不在线，则在后端维护一个缓存消息列表，保存B用户的用户名和需要发送的消息
4、当后端接收到前端新建WebSocket连接的请求后，判断该用户是否在后端维护的用户列表中，如果在，接着查找是否有发送给该用户的消息，如果有则发送消息通知，如果没有则更新之前用户列表中维护的信息，如果该用户不在已有用户列表中，则新建用户
修改后的WebSocketServer内容如下：
package com.ruoyi.framework.websocket;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArrayList;
import java.util.concurrent.Semaphore;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
/**
* WebSocketServer 消息处理类，用于实现 WebSocket 服务端功能
*
* @author ruoyi
*/
@Component
@ServerEndpoint("/websocket/message")
public class WebSocketServer {
/**
* WebSocketServer 日志控制器，用于记录日志信息
*/
private static final Logger LOGGER = LoggerFactory.getLogger(WebSocketServer.class);
/**
* 默认最多允许同时在线人数 100
*/
public static int socketMaxOnlineCount = 100;
/**
* 信号量，用于控制同时在线人数
*/
private static Semaphore socketSemaphore = new Semaphore(socketMaxOnlineCount);
// 内部静态类 User，用于存储用户信息
private static class User {
private String id; // 用户 ID
private String name; // 用户名
private Session session; // 用户会话
public User(String id, String name, Session session) {
this.id = id;
this.name = name;
this.session = session;
}
// Getter 和 Setter 方法
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Session getSession() {
return session;
}
public void setSession(Session session) {
this.session = session;
}
}
/**
* 存储用户信息的 ConcurrentHashMap，键为用户 ID，值为 User 对象
*/
private static ConcurrentHashMap<String, User> users = new ConcurrentHashMap<>();
/**
* 消息缓存的 ConcurrentHashMap，键为用户名，值为缓存消息列表
*/
private static ConcurrentHashMap<String, CopyOnWriteArrayList<String>> messageCache = new ConcurrentHashMap<>();
/**
* 连接建立成功时调用的方法
*
* @param session 用户会话
* @throws Exception 可能抛出的异常
*/
@OnOpen
public void onOpen(Session session) throws Exception {
boolean semaphoreFlag = false;
// 尝试获取信号量
semaphoreFlag = SemaphoreUtils.tryAcquire(socketSemaphore);
if (!semaphoreFlag) {
// 未获取到信号量，说明在线人数已达上限
LOGGER.error("\n 当前在线人数超过限制数- {}", socketMaxOnlineCount);
WebSocketUsers.sendMessageToUserByText(session, "当前在线人数超过限制数：" + socketMaxOnlineCount);
session.close();
} else {
// 将用户会话存储到 WebSocketUsers 中
WebSocketUsers.put(session.getId(), session);
LOGGER.info("\n 建立连接 - {}", session);
LOGGER.info("\n 当前人数 - {}", WebSocketUsers.getUsers().size());
WebSocketUsers.sendMessageToUserByText(session, "连接成功");
}
}
/**
* 连接关闭时调用的方法
*
* @param session 用户会话
*/
@OnClose
public void onClose(Session session) {
LOGGER.info("\n 关闭连接 - {}", session);
// 移除用户信息，移除用户时，将该用户的session值置为null
// 用于判断该用户是否离线
for (User user : users.values()) {
if (user.getId().equals(session.getId())) {
user.setSession(null);
break;
}
}
boolean removeFlag = WebSocketUsers.remove(session.getId());
if (!removeFlag) {
// 如果移除失败，则释放信号量
SemaphoreUtils.release(socketSemaphore);
}
}
/**
* 抛出异常时调用的方法
*
* @param session 用户会话
* @param exception 异常信息
* @throws Exception可能抛出的异常
*/
@OnError
public void onError(Session session, Throwable exception) throws Exception {
if (session.isOpen()) {
// 如果会话仍然开启，则关闭会话
session.close();
}
String sessionId = session.getId();
LOGGER.info("\n 连接异常 - {}", sessionId);
LOGGER.info("\n 异常信息 - {}", exception);
// 移除用户信息并释放信号量
WebSocketUsers.remove(sessionId);
SemaphoreUtils.release(socketSemaphore);
}
/**
* 服务器接收到客户端消息时调用的方法
*
* @param message 消息内容
* @param session 用户会话
*/
@OnMessage
public void onMessage(String message, Session session) {
try {
// 使用 Jackson 解析 JSON 消息
ObjectMapper objectMapper = new ObjectMapper();
JsonNode jsonNode = objectMapper.readTree(message);
if (jsonNode.has("username") && !jsonNode.get("username").asText().isEmpty()) {
String username = jsonNode.get("username").asText();
// 检查用户是否已存在
boolean userExists = false;
for (User user : users.values()) {
if (user.getName().equals(username)) {
userExists = true;
// 更新用户的 ID 和会话
user.setId(session.getId());
user.setSession(session);
// 检查该用户是否有缓存消息
searchCache(username, user);
LOGGER.info("\n用户 {} 已更新", username);
LOGGER.info("\n当前用户列表 {}", users);
break;
}
}
if (!userExists) {
// 新建用户并存储到 users 中
User user = new User(session.getId(), username, session);
users.put(session.getId(), user);
LOGGER.info("\n用户 {} 已连接", username);
LOGGER.info("\n当前用户列表 {}", users);
// 检查是否有缓存消息
searchCache(username, user);
}
} else if (jsonNode.has("targetusername") && jsonNode.has("sendmessage")) {
String targetusername = jsonNode.get("targetusername").asText();
String sendmessage = jsonNode.get("sendmessage").asText();
boolean userExists = false;
// 查找目标用户，如果用户的session为空，则表示用户离线
// 将通知存放到缓存消息列表中，如果不为空则表示用户在线，直接发送通知
for (User user : users.values()) {
if (user.getName().equals(targetusername)) {
if (user.getSession() != null) {
userExists = true;
WebSocketUsers.sendMessageToUserByText(user.getSession(), sendmessage);
}
break;
}
}
LOGGER.info("\n目标用户 {}", targetusername);
LOGGER.info("\n发送消息 {}", sendmessage);
LOGGER.info("\n当前用户列表 {}", users);
if (!userExists) {
// 如果目标用户不在线，则缓存通知
messageCache.computeIfAbsent(targetusername, k -> new CopyOnWriteArrayList<String>()).add(sendmessage);
LOGGER.info("\n消息已缓存，等待用户 {} 上线", targetusername);
}
}
} catch (Exception e) {
// 如果解析失败，则按普通消息处理
String msg = message.replace("你", "我").replace("吗", "");
WebSocketUsers.sendMessageToUserByText(session, msg);
}
}
/**
* 检查一个用户的缓存通知并发送
*
* @param username 用户名
* @param user 用户对象
*/
public void searchCache(String username, User user) {
if (messageCache.containsKey(username)) {
CopyOnWriteArrayList<String> cachedMessages = messageCache.get(username);
for (String cachedMessage : cachedMessages) {
WebSocketUsers.sendMessageToUserByText(user.getSession(), cachedMessage);
LOGGER.info("\n向用户 {} 发送缓存消息 - {}", username, cachedMessage);
}
// 清理缓存通知
messageCache.remove(username);
LOGGER.info("\n已清理用户 {} 的缓存消息", username);
}
}
}为了维护WebSocket的状态，在pinia store中新建了websocket.js文件（路径为RuoYi-Vue3-master\src\store\modules\websocket.js）。
websocket.js内容如下：
import { ref } from 'vue';
import { ElNotification } from 'element-plus'; // 引入 Element UI 的通知功能
import 'element-plus/dist/index.css'; // 引入 Element UI 的通知功能样式
export const useWebSocketStore = defineStore('websocket', () => {
const ws = ref(null);
const connected = ref(false);
function initWebSocket(username) {
const wsuri = "ws://127.0.0.1:8080/websocket/message"; // WebSocket 服务器地址
ws.value = new WebSocket(wsuri);
ws.value.onopen = () => {
console.log('WebSocket 已连接');
connected.value = true;
ws.value.send(JSON.stringify({ username: username }));
};
ws.value.onmessage = (event) => {
console.log('收到消息:', event.data);
// 在这里处理收到的消息
if (event.data != "连接成功") { // 用于测试，所以消息字符都是写死的
ElNotification({
title: '消息通知',
message: '您收到一条消息',
type: 'success',
position: 'bottom-right',
});
}
};
ws.value.onclose = () => {
console.log('WebSocket 已断开');
connected.value = false;
};
ws.value.onerror = (event) => {
console.error('WebSocket 错误:', event);
connected.value = false;
};
}
// 发送消息
function sendmessage(username, message) {
console.log(ws.value);
console.log(message);
if (message == "请求审批") { // 用于测试，所以消息字符都是写死的
ws.value.send(JSON.stringify({ targetusername: username, sendmessage: message }));
} else {
ws.value.send(JSON.stringify({ logoutname: username, logoutmessage: message }));
}
}
function closeWebSocket() { // 此处仅为测试，写了close，但是没有使用，
if (ws.value) {
ws.value.close();
ws.value = null;
connected.value = false;
}
}
return { ws, initWebSocket, closeWebSocket, sendmessage };
});我判断用户是否登陆的思路是，如果加载了（RuoYi-Vue3-master\src\layout）页面，那么用户肯定是登陆状态，所以就在localstorage中写入websocket:1,然后新建一个WebSocket连接，实现代码如下,如果用户刷新了，那么WebSocket连接会断开，但是用户刷新时，该组件会被重新加载，因此在onMounted中判断localstorage中是否存在标志，如果存在说明该用户在后端的用户列表中，那么直接将username发送给后端，后端在判断时会更新用户列表中的内容，从而实现用户刷新但是WebSocket没有断开。
修改后的layout代码如下：
...省略...
...省略...我在测试文件中添加了以一个申请按钮，并绑定了一个事件，实现代码如下：
<template>
...省略...
// 按钮代码
<el-col :span="1.5">
<el-button
type="info"
plain
icon="DocumentAdd"
@click="handleApply"
>申请</el-button>
</el-col>
...省略...
</template>至此，就实现了一个简易版本的用户消息通知功能，如果要实现不同用户之间的审批功能（玩具），只需要在前端根据用户角色的不同展示不同的页面就可以了，大致效果如下。
1.前端通过import { checkRole } from "@/utils/permission";并在标签页中使用v-if来判断用户的角色以显示不同的页面。
2.通过自定义监听事件实现收到消息后表格刷新。
（1）前端页面<script>中添加：
// 定义一个方法来刷新数据
function refreshData() {
getList();
}
// 在组件挂载时监听自定义事件
onMounted(() => {
window.addEventListener('refreshData', refreshData);
});
// 在组件卸载时移除事件监听器
onUnmounted(() => {
window.removeEventListener('refreshData', refreshData);
});
（2）websocket.js中在ElNotification后添加：
ws.value.onmessage = (event) => {
console.log('收到消息:', event.data);
// 在这里处理收到的消息
if (event.data != "连接成功") {
ElNotification({
title: '消息通知',
message: '您收到一条消息',
type: 'success',
position: 'bottom-right',
});
// 收到消息后0.5秒刷新页面
setTimeout(() => {
// 收到消息后触发自定义事件来刷新数据
const event = new Event('refreshData');
window.dispatchEvent(event);
}, 500);
}
};
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]