若依Vue2版实现websocket实时通讯
声明：本博客所有内容仅用于个人记录与知识整理，不构成任何专业建议。如有疏漏或错误，欢迎指正！
1. 前言
在需求中遇到了需要通知用户的场景，需要让管理员给用户去发实时通讯，或者是其他系统的通知过来后通知用户，但不能让用户每次去点刷新按钮，于是选择了通过websocket去实时通知用户。
选择了若依分离项目来作demo开发，地址RuoYi-Vue。
因为开发所参考的文章用的是vue3版本但实际项目是vue2版本，所以在其基础上改写成了vue2版本的代码。
2.简单demo代码实现
2.1后端代码
若依官方文档提供了代码用于完成集成websocket的简单测试，我们基于该代码进行修改。
地址：若依-集成websocket实现实时通信
2.1.1 websocket依赖
修改
代码路径：ruoyi-framework/pom.xml
<!--...-->
<!-- SpringBoot Websocket -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<!--...-->
2.1.2 websocket匿名访问
修改
代码路径：ruoyi-framework/src/main/java/com/ruoyi/framework/config/SecurityConfig.java
//...
//websocket匿名访问
.antMatchers("/websocket/**").permitAll()
//...
2.1.3 信号量相关处理
新增
代码路径：ruoyi-framework/src/main/java/com/ruoyi/framework/websocket/SemaphoreUtils.java
package com.ruoyi.framework.websocket;
import java.util.concurrent.Semaphore;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
/**
* 信号量相关处理
*
* @author ruoyi
*/
public class SemaphoreUtils
{
/**
* SemaphoreUtils 日志控制器
*/
private static final Logger LOGGER = LoggerFactory.getLogger(SemaphoreUtils.class);
/**
* 获取信号量
*
* @param semaphore
* @return
*/
public static boolean tryAcquire(Semaphore semaphore)
{
boolean flag = false;
try
{
flag = semaphore.tryAcquire();
}
catch (Exception e)
{
LOGGER.error("获取信号量异常", e);
}
return flag;
}
/**
* 释放信号量
*
* @param semaphore
*/
public static void release(Semaphore semaphore)
{
try
{
semaphore.release();
}
catch (Exception e)
{
LOGGER.error("释放信号量异常", e);
}
}
}
2.1.4 websocket配置
新增
代码路径：ruoyi-framework/src/main/java/com/ruoyi/framework/websocket/WebSocketConfig.java
package com.ruoyi.framework.websocket;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* websocket 配置
*
* @author ruoyi
*/
@Configuration
public class WebSocketConfig
{
@Bean
public ServerEndpointExporter serverEndpointExporter()
{
return new ServerEndpointExporter();
}
}
2.1.5 websocket消息处理
新增
代码路径：ruoyi-framework/src/main/java/com/ruoyi/framework/websocket/WebSocketServer.java
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;
/**
* 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);
/**
* 连接建立成功调用的方法
*/
@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.put(session.getId(), session);
LOGGER.info("\n 建立连接 - {}", session);
LOGGER.info("\n 当前人数 - {}", WebSocketUsers.getUsers().size());
WebSocketUsers.sendMessageToUserByText(session, "连接成功");
}
}
/**
* 连接关闭时处理
*/
@OnClose
public void onClose(Session session) {
LOGGER.info("\n 关闭连接 - {}", session);
// 移除用户
boolean removeFlag = WebSocketUsers.remove(session.getId());
if (!removeFlag) {
SemaphoreUtils.release(socketSemaphore);
}
User removedUser = users.remove(session.getId());
if (removedUser != null) {
LOGGER.info("\n用户 {} 已离线", removedUser.getName());
LOGGER.info("\n当前在线用户数 - {}", users.size());
}
}
/**
* 抛出异常时处理
*/
@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);
}
// 内部静态类 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<>();
/**
* 服务器接收到客户端消息时调用的方法
*/
@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) {
LOGGER.error("WebSocket 消息处理异常 - {}", e.getMessage(), e);
}
}
/**
* 检查一个用户的缓存通知并发送
*
* @param username 用户名
* @param user 用户对象
*/
public void searchCache(String username, User user) {
if (messageCache.containsKey(username)) {
CopyOnWriteArrayList<String> cachedMessages = messageCache.get(username);
int cacheCount = cachedMessages.size();
for (String cachedMessage : cachedMessages) {
String messageWithPrefix = "【离线消息】" + cachedMessage;
WebSocketUsers.sendMessageToUserByText(user.getSession(), messageWithPrefix);
LOGGER.info("\n向用户 {} 发送缓存消息 - {}", username, cachedMessage);
}
// 清理缓存通知
messageCache.remove(username);
LOGGER.info("\n已向用户 {} 发送 {} 条离线缓存消息", username, cacheCount);
}
}
}
2.1.6 websocket客户端用户集
新增
代码路径：ruoyi-framework/src/main/java/com/ruoyi/framework/websocket/WebSocketUsers.java
package com.ruoyi.framework.websocket;
import java.io.IOException;
import java.util.Collection;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;
import javax.websocket.Session;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
/**
* websocket 客户端用户集
*
* @author ruoyi
*/
public class WebSocketUsers
{
/**
* WebSocketUsers 日志控制器
*/
private static final Logger LOGGER = LoggerFactory.getLogger(WebSocketUsers.class);
/**
* 用户集
*/
private static Map<String, Session> USERS = new ConcurrentHashMap<String, Session>();
/**
* 存储用户
*
* @param key 唯一键
* @param session 用户信息
*/
public static void put(String key, Session session)
{
USERS.put(key, session);
}
/**
* 移除用户
*
* @param session 用户信息
*
* @return 移除结果
*/
public static boolean remove(Session session)
{
String key = null;
boolean flag = USERS.containsValue(session);
if (flag)
{
Set<Map.Entry<String, Session>> entries = USERS.entrySet();
for (Map.Entry<String, Session> entry : entries)
{
Session value = entry.getValue();
if (value.equals(session))
{
key = entry.getKey();
break;
}
}
}
else
{
return true;
}
return remove(key);
}
/**
* 移出用户
*
* @param key 键
*/
public static boolean remove(String key)
{
LOGGER.info("\n 正在移出用户 - {}", key);
Session remove = USERS.remove(key);
if (remove != null)
{
boolean containsValue = USERS.containsValue(remove);
LOGGER.info("\n 移出结果 - {}", containsValue ? "失败" : "成功");
return containsValue;
}
else
{
return true;
}
}
/**
* 获取在线用户列表
*
* @return 返回用户集合
*/
public static Map<String, Session> getUsers()
{
return USERS;
}
/**
* 群发消息文本消息
*
* @param message 消息内容
*/
public static void sendMessageToUsersByText(String message)
{
Collection<Session> values = USERS.values();
for (Session value : values)
{
sendMessageToUserByText(value, message);
}
}
/**
* 发送文本消息
*
* @param userName 自己的用户名
* @param message 消息内容
*/
public static void sendMessageToUserByText(Session session, String message)
{
if (session != null)
{
try
{
session.getBasicRemote().sendText(message);
}
catch (IOException e)
{
LOGGER.error("\n[发送消息异常]", e);
}
}
else
{
LOGGER.info("\n[你已离线]");
}
}
}
2.2前端代码
2.2.1 websocket注册到store
修改
代码路径：ruoyi-ui/src/store/index.js
//...
import websocket from './modules/websocket'
//...
const store = new Vuex.Store({
modules: {
//...
websocket
},
getters
})
//...
2.2.2 websocket组件
新增
代码路径：ruoyi-ui/src/store/modules/websocket.js
import { Notification } from 'element-ui'
const websocket = {
state: {
ws: null,
connected: false
},
mutations: {
SET_WS(state, ws) {
state.ws = ws
},
SET_CONNECTED(state, connected) {
state.connected = connected
}
},
actions: {
InitWebSocket({ commit }, username) {
const wsuri = "ws://127.0.0.1:8080/websocket/message"
const ws = new WebSocket(wsuri)
ws.onopen = () => {
console.log('WebSocket 已连接')
commit('SET_CONNECTED', true)
ws.send(JSON.stringify({ username: username }))
}
ws.onmessage = (event) => {
console.log('收到消息:', event.data)
const data = event.data
if (data === "连接成功") {
return
}
let notificationConfig = {
title: '消息通知',
message: data,
position: 'bottom-right'
}
if (data.includes('【离线消息】')) {
notificationConfig.title = '📬 离线期间收到的消息'
notificationConfig.type = 'warning'
notificationConfig.duration = 8000
} else {
notificationConfig.type = 'success'
notificationConfig.duration = 4500
}
Notification(notificationConfig)
}
ws.onclose = () => {
console.log('WebSocket 已断开')
commit('SET_CONNECTED', false)
}
ws.onerror = (event) => {
console.error('WebSocket 错误:', event)
commit('SET_CONNECTED', false)
}
commit('SET_WS', ws)
},
SendMessage({ state }, { username, message }) {
console.log(state.ws)
console.log(message)
if (message == "测试实时通讯") {
state.ws.send(JSON.stringify({ targetusername: username, sendmessage: message }))
} else {
state.ws.send(JSON.stringify({ logoutname: username, logoutmessage: message }))
}
},
CloseWebSocket({ commit, state }) {
if (state.ws) {
state.ws.close()
commit('SET_WS', null)
commit('SET_CONNECTED', false)
}
}
}
}
export default websocket
2.2.3 websocket登记用户
修改
代码路径：ruoyi-ui/src/layout/index.vue
//...
export default {
//...
computed: {
...mapState({
//...
name: state => state.user.name //定义name
}),
}
mounted() {
// 向 localStorage 中存入 websocket:1
localStorage.setItem('websocket', '1');
if (localStorage.getItem('websocket')) {
// 使用 Vuex dispatch 初始化 WebSocket
this.$store.dispatch('InitWebSocket', this.name);
}
},
}
//...
2.2.3 测试页面
修改
代码路径：ruoyi-ui/src/views/system/notice/index.vue
<template>
<!--...-->
<el-col :span="1.5">
<el-button
type="info"
plain
icon="DocumentAdd"
@click="handleApply"
>实时通讯</el-button>
</el-col>
<!--...-->
</template>
<script>
export default {
//...
methods: {
//...
// 事件代码
handleApply() {
const targetusername = "ry";
const sendmessage = "测试实时通讯";
// 使用 Vuex dispatch 调用 action
this.$store.dispatch('SendMessage', { username: targetusername, message: sendmessage });
}
}
}
</script>
3.效果展示
3.1实时通讯
3.2离线通讯
浙公网安备 33010602011771号