Vue项目全局创建WebSocket连接

首先创建WebSocket.js文件，我把它放在了src/js/websocket.js路径下

WebSocket.js：

1. 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毗连

1.         

复制代码

由于所有页面都是在App.vue下面切换的，相当于App.vue是所有路由的父组件， 所以只需在App.vue中创建WebSocket即可实现全局创建
这样就全局创建乐成了，让我们随便进入一个页面检察效果

来源：https://blog.csdn.net/weixin_42817587/article/details/111994691
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！