请选择 进入手机版 | 继续访问电脑版

Vue项目全局创建WebSocket连接

[复制链接]
卓小兔 发表于 2021-1-1 18:33:29 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
首先创建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
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )