首先创建WebSocket.js文件,我把它放在了src/js/websocket.js路径下
WebSocket.js:
- import store from '@/store'import { Message } from 'element-ui'var url = 'ws://127.0.0.1:9090/websocket/'var ws;var tt;var lockReconnect = false;//制止重复毗连var clientId = localStorage.getItem("clientId")//缓存中取出客户端idvar websocket = { Init: function(clientId) { if ("WebSocket" in window) { ws = new WebSocket(url + clientId); } else if ("MozWebSocket" in window) { ws = new MozWebSocket(url + clientId); } else { console.log("您的欣赏器不支持 WebSocket!"); return; } ws.onmessage = function(e) { console.log("吸收消息:" + e.data) heartCheck.start() if(e.data=='ok'){//心跳消息不做处置惩罚 return } //messageHandle(e.data) } ws.onclose = function() { console.log("毗连已关闭") Message({ message: '毗连已关闭', type: 'error', }); reconnect(clientId); } ws.onopen = function() { console.log("毗连乐成") Message({ message: '毗连乐成', type: 'success', }); heartCheck.start(); } ws.onerror = function(e) { console.log("数据传输发生错误"); Message({ message: '数据传输发生错误', type: 'error', }); reconnect(clientId) } }, Send:function(sender,reception,body,flag){ let data = { sender:sender, reception:reception, body:body, flag:flag } let msg= JSON.stringify(data) console.log("发送消息:"+msg) ws.send(msg) }, getWebSocket(){ return ws; }, getStatus() { if (ws.readyState == 0) { return "未毗连"; } else if (ws.readyState == 1) { return "已毗连"; } else if (ws.readyState == 2) { return "毗连正在关闭"; } else if (ws.readyState == 3) { return "毗连已关闭"; } }}export default websocket;//根据消息标识做不同的处置惩罚function messageHandle(message) { let msg = JSON.parse(message) switch (msg.flag) { case 'command': console.log("指令消息范例") break; case 'inform': console.log("通知") break; default: console.log("未知消息范例") }}function reconnect(sname) { if(lockReconnect) { return; }; lockReconnect = true; //没毗连上会一直重连,设置延迟制止请求过多 tt && clearTimeout(tt); tt = setTimeout(function () { console.log("执行断线重连...") websocket.Init(sname); lockReconnect = false; }, 4000);}//心跳检测var heartCheck = { timeout: 1000 * 60 * 3, timeoutObj: null, serverTimeoutObj: null, start: function(){ console.log('开始心跳检测'); var self = this; this.timeoutObj && clearTimeout(this.timeoutObj); this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj); this.timeoutObj = setTimeout(function(){ //这里发送一个心跳,后端收到后,返回一个心跳消息, //onmessage拿到返回的心跳就说明毗连正常 console.log('心跳检测...'); ws.send("HeartBeat:"+ clientId ); self.serverTimeoutObj = setTimeout(function() { if(ws.readyState!=1){ ws.close(); } // createWebSocket(); }, self.timeout); }, this.timeout) }}
复制代码 在App.vue文件中引入我们创建的WebSockt.js,在created方法中调用Init方法初始化WebSocket毗连
由于所有页面都是在App.vue下面切换的,相当于App.vue是所有路由的父组件, 所以只需在App.vue中创建WebSocket即可实现全局创建
这样就全局创建乐成了,让我们随便进入一个页面检察效果
来源:https://blog.csdn.net/weixin_42817587/article/details/111994691
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |