系統(tǒng)基礎(chǔ)框架使用了若依的微服務(wù)版旗唁，接到一個(gè)需求枫吧，一個(gè)大數(shù)據(jù)量的審核任務(wù)的審核進(jìn)度要在頁(yè)面上實(shí)時(shí)展示出來(lái)豆拨≈狈埽基于此需求迅速想到最簡(jiǎn)單粗暴的解決方式：前端定時(shí)輪詢(xún)。但是僅靠前端輪詢(xún)肯定是不靠譜的施禾，因?yàn)槊看握?qǐng)求都是一次Http脚线，會(huì)大量消耗資源,，因此綜合分析后決定使用websocket建立長(zhǎng)連接進(jìn)行數(shù)據(jù)推送的方式弥搞。
以下為簡(jiǎn)單的消息推送示例邮绿，使用時(shí)需要根據(jù)自身業(yè)務(wù)集成具體業(yè)務(wù)實(shí)現(xiàn)。
一攀例、后端改造
1船逮、pom增加websocket依賴(lài)
<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肛度、 編寫(xiě)WebSocket服務(wù)類(lèi)
@Component
@ServerEndpoint(value = "/system/websocket")
public class WebSocket {
private static Map<String , Session> clientMap = new ConcurrentHashMap<>();
/**
* 客戶(hù)端與服務(wù)端連接成功
* @param session
*/
@OnOpen
public void onOpen(Session session){
clientMap.put(session.getId(),session);
}
/**
* 客戶(hù)端與服務(wù)端連接關(guān)閉
* @param session
*/
@OnClose
public void onClose(Session session){
clientMap.remove(session.getId());
}
/**
* 客戶(hù)端與服務(wù)端連接異常
* @param error
* @param session
*/
@OnError
public void onError(Throwable error,Session session) {
error.printStackTrace();
}
/**
* 客戶(hù)端向服務(wù)端發(fā)送消息
* @param message
* @throws IOException
*/
@OnMessage
public void onMsg(Session session,String message) throws IOException {
//以下為模擬發(fā)送消息
sendMessage();
}
@Scheduled(cron = "0/10 * * * * ?")
private void sendMessage(){
//獲得Map的Key的集合
Set<String> sessionIdSet = clientMap.keySet();
// 此處相當(dāng)于一個(gè)廣播操作//迭代Key集合
for (String sessionId : sessionIdSet) {
//根據(jù)Key得到value
Session session = clientMap.get(sessionId);
//發(fā)送消息給客戶(hù)端傻唾，每10s給前端推送一個(gè)UUI
session.getAsyncRemote().sendText(IdUtils.simpleUUID());
}
}
}
二、前端改造
websocket連接工具類(lèi)
/**
* 參數(shù)說(shuō)明：
* webSocketURL：String webSocket服務(wù)地址 eg: ws://127.0.0.1:8080/websocket (后端接口若為restful風(fēng)格可以帶參數(shù))
* callback：為帶一個(gè)參數(shù)的回調(diào)函數(shù)
* message：String 要傳遞的參數(shù)值（不是一個(gè)必要的參數(shù)）
*/
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
},
// 自定義回調(diào)函數(shù)
setOpenCallback (callback) { // 與服務(wù)端連接打開(kāi)回調(diào)函數(shù)
this.webSocket.onopen = callback
},
setMessageCallback (callback) { // 與服務(wù)端發(fā)送消息回調(diào)函數(shù)
this.webSocket.onmessage = callback
},
setErrorCallback (callback) { // 與服務(wù)端連接異吵泄ⅲ回調(diào)函數(shù)
this.webSocket.onerror = callback
},
setCloseCallback (callback) { // 與服務(wù)端連接關(guān)閉回調(diào)函數(shù)
this.webSocket.onclose = callback
},
close () { // 關(guān)閉連接
this.webSocket.close()
},
sendMessage (message) { // 發(fā)送消息函數(shù)
this.webSocket.send(message)
}
}
2、示例頁(yè)面
<template>
<div>
<el-button type="primary" @click="sendMessage">發(fā)送消息</el-button>
<el-button type="primary" @click="closeMessage">關(guān)閉消息</el-button>
<p v-for="(content, index) in text">{{index}}.{{ content }}</p>
</div>
</template>
<script>
import websocket from '@/api/websocket'
import request from '@/utils/request'
export default {
name: "WebSocketDemo",
data () {
return {
text: [],
webSocketObject: null
}
},
created() {
websocket.webSocketInit('ws://localhost:9250/system/websocket')
websocket.setOpenCallback(res => {
console.log('建立連接成功',res);
})
websocket.setMessageCallback(res => {
this.text.push(res.data) ;
console.log('發(fā)送消息成功',res);
})
websocket.setErrorCallback(res => {
console.log('接收失敗消息',res);
})
websocket.setCloseCallback(res => {
console.log('連接關(guān)閉',res);
})
websocket.setCloseCallback(res => {
console.log('連接關(guān)閉',res);
})
},
methods: {
sendMessage () {
// 使用websocket交互
// websocket.sendMessage("123");
// 常規(guī)接口伪煤，通過(guò)http交互
request({
url : '/system/websocket/send?msg=123',
method : 'post'
}).then((res) => {
this.text.push(res.data) ;
console.log(this.text)
})
},
//關(guān)閉websocket連接（若后臺(tái)依然有定時(shí)任務(wù)加袋，建議使用http的方式刪除后臺(tái)的定時(shí)任務(wù)執(zhí)行）
closeMessage(){
websocket.close()
}
}
}
</script>
三、示例效果
定時(shí)推送uuid并在頁(yè)面展示抱既，可根據(jù)實(shí)際業(yè)務(wù)职烧，修改為返回需要的審核狀態(tài)即可。
image.png
其他大佬推薦可以使用MQTT、comet（長(zhǎng)輪詢(xún)）蚀之、SSE（長(zhǎng)連接）等方式實(shí)現(xiàn)以上需求蝗敢，待有時(shí)間再做一篇各種方式的對(duì)比。
