vue + websocket心跳重连机制

川长思鸟来 2022-10-15 07:58 292阅读 0赞

## 注意！！！ ##

1.  当页面涉及到主动关闭连接的操作时，则不能在 this.onclose() 内调用 this.reconnect() 重连方法（除非你能够区分 主动断开 和 异常被动断开 ）。
2.  凡是在初始化新连接 this.initWebpack() 后，都要重置 that.lockReconnect = false。
3.  在关闭连接 this.ws.close() 后，必须清空时间延迟器。

data () { 
          return { 
            ws: null,//建立的连接
            lockReconnect: false,//是否真正建立连接
            timeout: 30*1000,//30秒一次心跳
            timeoutObj: null,//心跳心跳倒计时
            serverTimeoutObj: null,//心跳倒计时
            timeoutnum: null,//断开 重连倒计时
          }
        },
        created() { 
          this.initWebpack();
        }, 
        beforeDestroy() { 
          this.ws.close()
          // 清除时间
          clearTimeout(this.timeoutObj)
          clearTimeout(this.serverTimeoutObj)
        },
        methods: { 
          initWebpack(){ 
            this.ws = new WebSocket(process.env.SOCKET_OTC);
            this.ws.onopen = this.onopen;
            this.ws.onmessage = this.onmessage;
            this.ws.onclose = this.onclose;
            this.ws.onerror = this.onerror;
          },
          reconnect() { //重新连接
            var that = this;
            if(that.lockReconnect) { 
              return;
            };
            that.lockReconnect = true;
            //没连接上会一直重连，设置延迟避免请求过多
            that.timeoutnum && clearTimeout(that.timeoutnum);
            that.timeoutnum = setTimeout(function () { 
              that.initWebpack();//新连接
              that.lockReconnect = false;
            },5000);
          },
          reset(){ //重置心跳
            var that = this;
            clearTimeout(that.timeoutObj);//清除时间
            clearTimeout(that.serverTimeoutObj);//清除时间
            that.start(); //重启心跳
          },
          start(){ //开启心跳
            var self = this;
            self.timeoutObj && clearTimeout(self.timeoutObj);
            self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
            self.timeoutObj = setTimeout(function(){ 
              //这里发送一个心跳，后端收到后，返回一个心跳消息，
              if (self.ws.readyState == 1) { //如果连接正常
                self.ws.send(JSON.stringify({ 
                data: { 
                  messageType: 'heartCheck'
                }
              }));
              }else{ //否则重连
                if (self.$route.path == '/home/index') { 
                	self.reconnect()
              	}
              }
              self.serverTimeoutObj = setTimeout(function() { 
                //超时关闭
                self.ws.close();
              }, self.timeout);
     
            }, self.timeout)
          }, 
    　　　　onopen() { 
            console.log("连接成功");
            this.start(); //开启心跳
          },
          onmessage(e) { 
            /**这里写自己的业务逻辑代码**/
            this.reset();//收到服务器信息，心跳重置
          },
          onclose(e) { 
            console.log("连接关闭");
            注意！！当页面逻辑有主动关闭连接的操作时，则不能在此调用下方的重连方法 ↓
            this.reconnect(); //重连
          },
          onerror(e) { 
            console.log("出现错误");
            //重连
            this.reconnect();
          }
    }