websocket心跳检测和重连机制(复制即用)

- 日理万妓 2023-01-21 05:20 89阅读 0赞

data() { 
      return { 
        wsurl: 'ws://127.0.0.1:8080',
        websock: null,
        lockReconnect: false,
        timerReconnect: null,
        heartTimeout: null,
        serverTimeout: null
      };
    },

created() { 
      this.createWebSocket();
    },
    beforeDestroy() { 
      if (this.websock) this.websock.close();
    },

// 创建websocket
    createWebSocket() { 
      try { 
        this.websock = new WebSocket(this.wsurl);
        this.initWebSocket();
      } catch (e) { 
        console.log('catch', e);
        this.reconnect();
      }
    },
    initWebSocket() { 
      this.websock.onmessage = (e) => { 
        console.log('数据接收', e);
        // 拿到pong说明当前连接是正常的
        if (e.data === 'pong') { 
          this.heartCheck();
        }
      };
      this.websock.onopen = () => { 
        console.log('连接成功', this.websock);
        this.heartCheck();
      };
      this.websock.onerror = () => { 
        console.log('连接失败');
        this.reconnect();
      };
      this.websock.onclose = (e) => { 
        console.log('断开连接', e);
        this.reconnect();
      };
    },
    // 重连
    reconnect() { 
      if (this.lockReconnect) { 
        return;
      }
      console.log('发起重连');
      this.lockReconnect = true;
      // 没连接上会一直重连，设置延迟
      this.timerReconnect && clearTimeout(this.timerReconnect);
      this.timerReconnect = setTimeout(() => { 
        this.createWebSocket();
        this.lockReconnect = false;
      }, 3 * 1000);
    },
    // 心跳检测
    heartCheck() { 
      this.heartTimeout && clearTimeout(this.heartTimeout);
      this.serverTimeout && clearTimeout(this.serverTimeout);
      this.heartTimeout = setTimeout(() => { 
        // 发送一个心跳包
        console.log('发送ping');
        this.websock.send('ping');
        // 计算答复的超时时间
        this.serverTimeout = setTimeout(() => { 
          this.websock.close();
          console.log('答复超时');
        }, 5 * 1000);
      }, 4 * 1000);
    }