websocket功能开发

websocket.js

/** * @module initWebSocket 初始化 * @module websocketonopen 连接成功 * @module websocketonerror 连接失败 * @module websocketclose 断开连接 * @module resetHeart 重置心跳 * @module sendSocketHeart 心跳发送 * @module reconnect 重连 * @module sendMsg 发送数据 * @module websocketonmessage 接收数据 * @module test 测试收到消息传递 * @description socket 通信 * @param {any} url socket地址 * @param {any} websocket websocket 实例 * @param {any} heartTime 心跳定时器实例 * @param {number} socketHeart 心跳次数 * @param {number} HeartTimeOut 心跳超时时间 * @param {number} socketError 错误次数 */ let socketUrl = ""; // socket地址 let websocket = null; // websocket 实例 let heartTime = null; // 心跳定时器实例 let socketHeart = 0; // 心跳次数 const HeartTimeOut = 10000; // 心跳超时时间 10000 = 10s let socketError = 0; // 错误次数 // 初始化socket export const initWebSocket = (url) => { socketUrl = url; // 初始化 websocket websocket = new WebSocket(url); websocketonopen(); websocketonmessage(); websocketonerror(); websocketclose(); sendSocketHeart(); return websocket; }; // socket 连接成功 export const websocketonopen = () => { websocket.onopen = function () { console.log("连接 websocket 成功"); resetHeart(); }; }; // socket 连接失败 export const websocketonerror = () => { websocket.onerror = function (e) { console.log("连接 websocket 失败", e); }; }; // socket 断开链接 export const websocketclose = () => { websocket.onclose = function (e) { console.log("断开连接", e); }; }; // socket 重置心跳 export const resetHeart = () => { socketHeart = 0; socketError = 0; clearInterval(heartTime); sendSocketHeart(); }; // socket心跳发送 export const sendSocketHeart = () => { heartTime = setInterval(() => { // 如果连接正常则发送心跳 if (websocket.readyState == 1) { // if (socketHeart <= 30) { websocket.send("ping"); socketHeart = socketHeart + 1; } else { // 重连 reconnect(); } }, HeartTimeOut); }; // socket重连 export const reconnect = () => { if (socketError <= 2) { clearInterval(heartTime); initWebSocket(socketUrl); socketError = socketError + 1; console.log("socket重连", socketError); } else { console.log("重试次数已用完"); clearInterval(heartTime); } }; // socket 发送数据 export const sendMsg = (data) => { websocket.send(data); }; // socket 接收数据 export const websocketonmessage = () => { websocket.onmessage = function (e) { if (e.data.indexOf("heartbeat") > 0) { resetHeart(); } if (e.data.indexOf("pong") != -1) { return; } let data = JSON.parse(e?.data); dispatchCustomEvent('onmessageWS',data) }; }; // 创建一个用于触发自定义事件的函数 function dispatchCustomEvent(eventName, data) { const event = new CustomEvent(eventName, { detail: data }); window.dispatchEvent(event); }

引入websocket.js

import { initWebSocket, websocketclose } from '@/utils/websocket' created() { this.initPageSocket() // websocket方式 }, mounted() { window.addEventListener('onmessageWS', this.getSocketData) // 监听websocket自定义消息获取 setTimeout(() => { this.initPageSocket() }, 1000) }, methods: { /** 初始化Socket - 获取数据 */ initPageSocket() { let userId = this.$store.state.user.userId let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://' let scoketUrl = `${protocol}${process.env.VUE_APP_WEBSOCKET_URL}/ymws?userId=${userId}` this.socket = initWebSocket(scoketUrl) }, // 获取报警-长连接推送 getSocketData(res) { let result = res.detail this.tableData.unshift(result) // if (this.alarmLists.length >= 5) { // let arr = this.alarmLists.slice(1, 5) // arr.unshift(result) // this.$set(this, 'alarmLists', arr) // } else { // this.alarmLists.unshift(result) // } }, } destroyed() { if (this.socket) websocketclose() window.removeEventListener('onmessageWS', this.getSocketData) }