若依(ruoyi)使用websocket推送数据到前端

原创小尘哥小尘哥2024年09月05日 21:44河南系统基础框架使用了若依的微服务版，接到一个需求，一个大数据量的审核任务的审核进度要在页面上实时展示出来。基于此需求迅速想到最简单粗暴的解决方式：前端定时轮询。但是仅靠前端轮询肯定是不靠谱的，因为每次请求都是一次Http，会大量消耗资源,，因此综合分析后决定使用websocket建立长连接进行数据推送的方式。以下为简单的消息推送示例，使用时需要根

竹林幽深

641人浏览 · 2024-09-13 08:58:34

竹林幽深 · 2024-09-13 08:58:34 发布

原创小尘哥小尘哥 2024年09月05日 21:44 河南

系统基础框架使用了若依的微服务版，接到一个需求，一个大数据量的审核任务的审核进度要在页面上实时展示出来。基于此需求迅速想到最简单粗暴的解决方式：前端定时轮询。但是仅靠前端轮询肯定是不靠谱的，因为每次请求都是一次Http，会大量消耗资源,，因此综合分析后决定使用websocket建立长连接进行数据推送的方式。

以下为简单的消息推送示例，使用时需要根据自身业务集成具体业务实现。

一、后端改造

1、pom增加websocket依赖

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2、配置websocketconfig

@Configuration
@EnableWebSocket
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}

3、编写WebSocket服务类

@Component
@ServerEndpoint(value = "/system/websocket")
public class WebSocket {
private static Map<String , Session> clientMap = new ConcurrentHashMap<>();
/**
* 客户端与服务端连接成功
* @param session
*/
@OnOpen
public void onOpen(Session session){
clientMap.put(session.getId(),session);
}
/**
* 客户端与服务端连接关闭
* @param session
*/
@OnClose
public void onClose(Session session){
clientMap.remove(session.getId());
}
/**
* 客户端与服务端连接异常
* @param error
* @param session
*/
@OnError
public void onError(Throwable error,Session session) {
error.printStackTrace();
}
/**
* 客户端向服务端发送消息
* @param message
* @throws IOException
*/
@OnMessage
public void onMsg(Session session,String message) throws IOException {
//以下为模拟发送消息
sendMessage();
}
@Scheduled(cron = "0/10 * * * * ?")
private void sendMessage(){
//获得Map的Key的集合
Set<String> sessionIdSet = clientMap.keySet();
// 此处相当于一个广播操作//迭代Key集合
for (String sessionId : sessionIdSet) {
//根据Key得到value
Session session = clientMap.get(sessionId);
//发送消息给客户端，每10s给前端推送一个UUI
session.getAsyncRemote().sendText(IdUtils.simpleUUID());
}
}
}

二、前端改造

websocket连接工具类

/**
* 参数说明：
* webSocketURL：String webSocket服务地址 eg: ws://127.0.0.1:8080/websocket (后端接口若为restful风格可以带参数)
* callback：为带一个参数的回调函数
* message：String 要传递的参数值（不是一个必要的参数）
*/
export default {
// 初始化webSocket
webSocketInit (webSocketURL) { // ws://127.0.0.1:8080/websocket
this.webSocket = new WebSocket(webSocketURL)
this.webSocket.onopen = this.onOpenwellback
this.webSocket.onmessage = this.onMessageCallback
this.webSocket.onerror = this.onErrorCallback
this.webSocket.onclose = this.onCloseCallback
},
// 自定义回调函数
setOpenCallback (callback) { // 与服务端连接打开回调函数
this.webSocket.onopen = callback
},
setMessageCallback (callback) { // 与服务端发送消息回调函数
this.webSocket.onmessage = callback
},
setErrorCallback (callback) { // 与服务端连接异常回调函数
this.webSocket.onerror = callback
},
setCloseCallback (callback) { // 与服务端连接关闭回调函数
this.webSocket.onclose = callback
},
close () { // 关闭连接
this.webSocket.close()
},
sendMessage (message) { // 发送消息函数
this.webSocket.send(message)
}
}