您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“怎么使用Spring Boot+Vue實(shí)現(xiàn)Socket通知推送”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么使用Spring Boot+Vue實(shí)現(xiàn)Socket通知推送”吧!
首先我們需要引入WebSocket所需的依賴(lài),以及處理輸出格式的依賴(lài)
<!--格式轉(zhuǎn)換--> <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.73</version> </dependency> <!--WebSocket依賴(lài)--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.server.standard.ServerEndpointExporter; /** * @author: tjp * @create: 2023-04-03 09:58 * @Description: WebSocket配置 */ @Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }
這一步我們通過(guò)userId作為標(biāo)識(shí)符,區(qū)分系統(tǒng)中對(duì)應(yīng)的用戶(hù),后續(xù)也可基于此,進(jìn)行其他的操作步驟。
import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import com.alibaba.excel.util.StringUtils; import lombok.extern.slf4j.Slf4j; import org.springframework.stereotype.Component; import javax.websocket.*; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import java.io.IOException; import java.util.HashMap; import java.util.Iterator; import java.util.concurrent.ConcurrentHashMap; /** * @author: tjp * @create: 2023-04-03 13:55 * @Description: WebSocket服務(wù) */ @ServerEndpoint("/websocket/{userId}") @Slf4j @Component public class WebSocketServer { /** * 靜態(tài)變量,用來(lái)記錄當(dāng)前在線(xiàn)連接數(shù)。應(yīng)該把它設(shè)計(jì)成線(xiàn)程安全的。 */ private static int onlineCount = 0; /** * concurrent包的線(xiàn)程安全Set,用來(lái)存放每個(gè)客戶(hù)端對(duì)應(yīng)的MyWebSocket對(duì)象。 */ private static ConcurrentHashMap<String, WebSocketServer> webSocketMap = new ConcurrentHashMap<>(); /** * 與某個(gè)客戶(hù)端的連接會(huì)話(huà),需要通過(guò)它來(lái)給客戶(hù)端發(fā)送數(shù)據(jù) */ private Session session; /** * 接收userId */ private String userId = ""; /** * 連接建立成功調(diào)用的方法 */ @OnOpen public void onOpen(Session session, @PathParam("userId") String userId) { this.session = session; this.userId = userId; if (webSocketMap.containsKey(userId)) { webSocketMap.remove(userId); //加入set中 } else { webSocketMap.put(userId, this); //加入set中 addOnlineCount(); //在線(xiàn)數(shù)加1 } log.info("用戶(hù)連接:" + userId + ",當(dāng)前在線(xiàn)人數(shù)為:" + getOnlineCount()); try { HashMap<Object, Object> map = new HashMap<>(); map.put("key", "連接成功"); sendMessage(JSON.toJSONString(map)); } catch (IOException e) { log.error("用戶(hù):" + userId + ",網(wǎng)絡(luò)異常!!!!!!"); } } /** * 連接關(guān)閉調(diào)用的方法 */ @OnClose public void onClose() { if (webSocketMap.containsKey(userId)) { webSocketMap.remove(userId); //從set中刪除 subOnlineCount(); } log.info("用戶(hù)退出:" + userId + ",當(dāng)前在線(xiàn)人數(shù)為:" + getOnlineCount()); } /** * 收到客戶(hù)端消息后調(diào)用的方法 * * @param message 客戶(hù)端發(fā)送過(guò)來(lái)的消息 */ @OnMessage public void onMessage(String message, Session session) { log.info("用戶(hù)消息:" + userId + ",報(bào)文:" + message); //可以群發(fā)消息 //消息保存到數(shù)據(jù)庫(kù)、redis if (StringUtils.isNotBlank(message)) { try { //解析發(fā)送的報(bào)文 JSONObject jsonObject = JSONObject.parseObject(message); //追加發(fā)送人(防止串改) jsonObject.put("fromUserId", this.userId); String fromUserId = jsonObject.getString("fromUserId"); //傳送給對(duì)應(yīng)toUserId用戶(hù)的websocket if (StringUtils.isNotBlank(fromUserId) && webSocketMap.containsKey(fromUserId)) { webSocketMap.get(fromUserId).sendMessage(jsonObject.toJSONString()); //自定義-業(yè)務(wù)處理 // DeviceLocalThread.paramData.put(jsonObject.getString("group"),jsonObject.toJSONString()); } else { log.error("請(qǐng)求的userId:" + fromUserId + "不在該服務(wù)器上"); //否則不在這個(gè)服務(wù)器上,發(fā)送到mysql或者redis } } catch (Exception e) { e.printStackTrace(); } } } /** * 發(fā)生錯(cuò)誤時(shí)候 * * @param session * @param error */ @OnError public void onError(Session session, Throwable error) { log.error("用戶(hù)錯(cuò)誤:" + this.userId + ",原因:" + error.getMessage()); error.printStackTrace(); } /** * 實(shí)現(xiàn)服務(wù)器主動(dòng)推送 */ public void sendMessage(String message) throws IOException { //加入線(xiàn)程鎖 synchronized (session) { try { //同步發(fā)送信息 this.session.getBasicRemote().sendText(message); } catch (IOException e) { log.error("服務(wù)器推送失敗:" + e.getMessage()); } } } /** * 發(fā)送自定義消息 * */ /** * 發(fā)送自定義消息 * * @param message 發(fā)送的信息 * @param toUserId 如果為null默認(rèn)發(fā)送所有 * @throws IOException */ public static void sendInfo(String message, String toUserId) throws IOException { //如果userId為空,向所有群體發(fā)送 if (StringUtils.isEmpty(toUserId)) { //向所有用戶(hù)發(fā)送信息 Iterator<String> itera = webSocketMap.keySet().iterator(); while (itera.hasNext()) { String keys = itera.next(); WebSocketServer item = webSocketMap.get(keys); item.sendMessage(message); } } //如果不為空,則發(fā)送指定用戶(hù)信息 else if (webSocketMap.containsKey(toUserId)) { WebSocketServer item = webSocketMap.get(toUserId); item.sendMessage(message); } else { log.error("請(qǐng)求的userId:" + toUserId + "不在該服務(wù)器上"); } } public static synchronized int getOnlineCount() { return onlineCount; } public static synchronized void addOnlineCount() { WebSocketServer.onlineCount++; } public static synchronized void subOnlineCount() { WebSocketServer.onlineCount--; } public static synchronized ConcurrentHashMap<String, WebSocketServer> getWebSocketMap() { return WebSocketServer.webSocketMap; } }
獲取當(dāng)前在線(xiàn)人數(shù)
import com.......WebSocketServer; @ApiOperation(value = "獲取當(dāng)前在線(xiàn)人數(shù)") @GetMapping("/getOnlineCount") public Integer getOnlineCount() { return WebSocketServer.getOnlineCount(); }
通過(guò)接口,向前端用戶(hù)推送消息
import com.......WebSocketServer; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.io.IOException; /** * @author: tjp * @create: 2023-04-03 13:57 * @Description: 測(cè)試 */ @RestController @RequestMapping("/news") public class NewsController { @GetMapping("/send") public String send() { try { WebSocketServer.sendInfo("這是websocket發(fā)送過(guò)來(lái)的消息!", "需要推送的用戶(hù)的編號(hào)"); } catch (IOException e) { throw new RuntimeException(e); } return "發(fā)送消息成功"; } }
創(chuàng)建工具類(lèi)websocket.js,這里的userId就是用來(lái)作為標(biāo)識(shí)符的userId
/** * @author: tjp * @create: 2023-04-03 11:22 * @Description: Socket客戶(hù)端 */ export class WebSocketClient { constructor(userId) { this.userId = userId; this.websocket = null; this.timeout = 10000; // 心跳超時(shí)時(shí)間,單位ms this.timeoutObj = null; // 心跳定時(shí)器 this.serverTimeoutObj = null; // 服務(wù)器超時(shí)定時(shí)器 this.lockReconnect = false; // 避免重復(fù)連接 this.timeoutnum = null; // 重連延遲定時(shí)器 } // 初始化WebSocket連接 initWebSocket() { let wsUrl = `ws://127.0.0.1:8080/websocket/${this.userId}`; this.websocket = new WebSocket(wsUrl); this.websocket.onopen = this.websocketonopen.bind(this); this.websocket.onerror = this.websocketonerror.bind(this); this.websocket.onmessage = this.setOnmessageMessage.bind(this); this.websocket.onclose = this.websocketclose.bind(this); // 監(jiān)聽(tīng)窗口關(guān)閉事件,當(dāng)窗口關(guān)閉時(shí),主動(dòng)去關(guān)閉websocket連接,防止連接還沒(méi)斷開(kāi)就關(guān)閉窗口,server端會(huì)拋異常。 window.onbeforeunload = this.websocketclose.bind(this); } // 啟動(dòng)心跳 start() { console.log('start'); // 清除延時(shí)器 this.timeoutObj && clearTimeout(this.timeoutObj); this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj); /*// 向服務(wù)器發(fā)送心跳消息 let actions = { "test": "12345" }; this.websocket && this.websocket.readyState == 1 && this.websocket.send(JSON.stringify(actions)); // 啟動(dòng)心跳定時(shí)器 this.timeoutObj = setTimeout(() => { this.start(); // 定義一個(gè)延時(shí)器等待服務(wù)器響應(yīng),若超時(shí),則關(guān)閉連接,重新請(qǐng)求server建立socket連接 this.serverTimeoutObj = setTimeout(() => { this.websocket.close(); }, this.timeout) }, this.timeout)*/ } // 重置心跳 reset() { // 清除時(shí)間 clearTimeout(this.timeoutObj); clearTimeout(this.serverTimeoutObj); // 重啟心跳 this.start(); } // 重新連接 reconnect() { if (this.lockReconnect) return; this.lockReconnect = true; // 沒(méi)連接上會(huì)一直重連,設(shè)置延遲避免請(qǐng)求過(guò)多 this.timeoutnum && clearTimeout(this.timeoutnum); this.timeoutnum = setTimeout(() => { this.initWebSocket(); this.lockReconnect = false; }, 5000) } // 處理收到的消息 async setOnmessageMessage(event) { console.log(event.data, '獲得消息'); // 重置心跳 // this.reset(); // 自定義全局監(jiān)聽(tīng)事件 window.dispatchEvent(new CustomEvent('onmessageWS', { detail: { data: event.data } })) // //發(fā)現(xiàn)消息進(jìn)入 開(kāi)始處理前端觸發(fā)邏輯 // if (event.data === 'success' || event.data === 'heartBath') return } // WebSocket連接成功回調(diào) websocketonopen() { // 開(kāi)啟心跳 this.start(); console.log("WebSocket連接成功!!!" + new Date() + "----" + this.websocket.readyState); clearInterval(this.otimer);//停止 } // WebSocket連接錯(cuò)誤回調(diào) websocketonerror(e) { console.log("WebSocket連接發(fā)生錯(cuò)誤" + e); } // WebSocket連接關(guān)閉回調(diào) websocketclose(e) { this.websocket.close(); clearTimeout(this.timeoutObj); clearTimeout(this.serverTimeoutObj); console.log("websocketcloe關(guān)閉連接") } // 關(guān)閉WebSocket連接 closeWebSocket() { this.websocket.close(); console.log("closeWebSocket關(guān)閉連接") } // 監(jiān)聽(tīng)窗口關(guān)閉事件 onbeforeunload() { this.closeWebSocket(); } }
在任意你想建立連接的頁(yè)面中建立Socket連接
比如,在用戶(hù)點(diǎn)擊登錄按鈕之后
在這里可以使用原型,創(chuàng)建連接對(duì)象,并啟動(dòng)連接
<script> import Vue from "vue"; import {WebSocketClient} from "@/utils/websocket"; ...... ...... methods:{ handleLogin() { this.$refs.loginForm.validate(valid => { if (valid) { this.loading = true this.$store.dispatch('user/login', this.loginForm).then(() => { this.$router.push({path: this.redirect || '/'}) this.loading = false /*-----------在此處放入原型中------------*/ Vue.prototype.$WebSocketClientInstance = new WebSocketClient('t'); Vue.prototype.$WebSocketClientInstance.initWebSocket() /*-----------------end------------*/ }).catch(() => { this.loading = false }) } else { this.$message({message: '請(qǐng)?zhí)顚?xiě)正確格式的用戶(hù)名或密碼', type: 'error'}) return false } }) } } ..... ..... </script>
在你想監(jiān)聽(tīng)的頁(yè)面,使用監(jiān)聽(tīng)器進(jìn)行監(jiān)聽(tīng)
<script> .... .... mounted() { // 添加socket通知監(jiān)聽(tīng) window.addEventListener('onmessageWS', this.getSocketData) }, methods: { // 收到消息處理 getSocketData(res) { console.log(res.detail) console.log("llll") }, } .... .... </script>
這個(gè)時(shí)候,你就可以通過(guò)后端的接口進(jìn)行發(fā)送了
搞個(gè)測(cè)試
搞個(gè)按鈕
<template> <div> <button @click="closeConnect">關(guān)閉連接</button> </div> </template> <script> import {WebSocketClient} from "@/utils/websocket"; import Vue from "vue"; export default { methods: { closeConnect() { console.dir(Vue.prototype) Vue.prototype.$WebSocketClientInstance.closeWebSocket(); }, } } </script>
到此,相信大家對(duì)“怎么使用Spring Boot+Vue實(shí)現(xiàn)Socket通知推送”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún),關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。