vue项目实战WebSocket

  sbnumber(){
  for (let i = 0; i < 18; i++) {
    this.sbnumlist.push(Math.round(Math.random()*10))
  }
    let aa= this.sbnumlist.toString()
    this.sbnumlist=aa.replace(/,/g, "")  //生成一个随机数根据后端要求来定
    var _this = this
    var tt;
        var wsurl =this.websock+this.sbnumlist  //声明一个websocket的连接 拼接随机数(此处为websocket的地址)
      var lockReconnect = false;//避免重复连接
        if ('WebSocket' in window) {
          _this.ws = new WebSocket(wsurl) // 创建websocket连接
          init();  // 执行方法
        } else {
          alert('您的浏览器不支持 WebSocket!')
        }
    function createWebSocket() {
      try {
      _this.ws = new WebSocket(wsurl);
      init();
      } catch(e) {
      console.log('catch');
      reconnect(wsurl);
      }
      }
      function init() {
      _this.ws.onopen = function() {
      Heartbeat.start();
      _this.ws.send('发送数据')
      }
      _this.ws.onmessage = function(evt) {
      console.log(evt)  // 收到后端返回的数据(主要执行代码的地方)
      Heartbeat.start(); // 执行心跳
      }
      _this.ws.onclose = function() { // 关闭 websocket
       reconnect(wsurl);
      }
    _this.ws.onerror = function() { // websocket执行错误
      reconnect(wsurl);
      }
      }
    function reconnect(url) {
      if(lockReconnect) {
        return;
      };
      lockReconnect = true; // 没连接上会一直重连,设置延迟避免请求过多
      tt && clearTimeout(tt);
      tt = setTimeout(function () {
        createWebSocket(wsurl);
        lockReconnect = false;
      }, 3000);
    } 
      var Heartbeat= {
      timeout: 60000,
      timeoutObj: null,
      serverTimeout: null,
      start: function(){
        var self = this;
        this.timeoutObj && clearTimeout(this.timeoutObj);
        this.serverTimeout&& clearTimeout(this.serverTimeout);
        this.timeoutObj = setTimeout(function(){
            //这里发送一个心跳,后端收到后,返回一个心跳消息,
            _this.ws.send("1234");
            self.serverTimeout = setTimeout(function() {
             _this.ws.close();
             }, self.timeout);
        }, this.timeout)
      }
    }
    },

离开页面退出websocket

    destroyed(){  // 调用vue 销毁事件
      let _this=this
      _this.ws.close();
    },

具体需求根据具体要求来定,新手上路多多关照,如有什么需要优化的地方还请各位大神多多关照。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。