基础版vue连接websocket并做心跳检测

data 中需要这些参数

data() {
    return {
      websock: null, // 建立的连接
      lockReconnect: false, // 是否真正建立连接
      timeout: 28 * 1000, //30 秒一次心跳
      timeoutObj: null, // 外层心跳倒计时
      serverTimeoutObj: null, // 内层心跳检测
      timeoutnum: null // 断开 重连倒计时
    };
  },

methods 中：

initWebSocket() {
      // 初始化 weosocket
      const wsuri = "ws://" + "xxxxx" + ": 端口号";
      this.websock = new WebSocket(wsuri);
      this.websock.onopen = this.websocketonopen;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },

reconnect() {
      // 重新连接
      var that = this;
      if (that.lockReconnect) {
        // 是否真正建立连接
        return;
      }
      that.lockReconnect = true;
      // 没连接上会一直重连，设置延迟避免请求过多
      that.timeoutnum && clearTimeout(that.timeoutnum);
      // 如果到了这里断开重连的倒计时还有值的话就清除掉
      that.timeoutnum = setTimeout(function() {
        // 然后新连接
        that.initWebSocket();
        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.websock.readyState == 1) {
          // 如果连接正常
          // self.websock.send("heartCheck");
        } else {
          // 否则重连
          self.reconnect();}
        self.serverTimeoutObj = setTimeout(function() {
          // 在三秒一次的心跳检测中如果某个值 3 秒没响应就关掉这次连接
          // 超时关闭
          self.websock.close();}, self.timeout);
      }, self.timeout);
      // 3s 一次
    },

连接状态判断：

 websocketonopen(e) {
      // 连接建立之后执行 send 方法发送数据
      console.log("成功");
      let actions = {test: "12345"};
      // this.websocketsend(JSON.stringify(actions));
    },
    websocketonerror() {
      // 连接建立失败重连
      console.log("失败");
      this.initWebSocket();},
    websocketonmessage(e) {
      // 数据接收
      const redata = JSON.parse(e.data);
      console.log(redata);
      this.aa = [...this.aa, redata.type];
      this.reset();},
    websocketsend(Data) {
      // 数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {
      // 关闭
      console.log("断开连接", e);
    }

完整代码：

 initWebSocket() {
      // 初始化 weosocket
      const wsuri = "ws://" + "xxxxx" + ": 端口号";
      this.websock = new WebSocket(wsuri);
      this.websock.onopen = this.websocketonopen;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    reconnect() {
      // 重新连接
      var that = this;
      if (that.lockReconnect) {
        // 是否真正建立连接
        return;
      }
      that.lockReconnect = true;
      // 没连接上会一直重连，设置延迟避免请求过多
      that.timeoutnum && clearTimeout(that.timeoutnum);
      // 如果到了这里断开重连的倒计时还有值的话就清除掉
      that.timeoutnum = setTimeout(function() {
        // 然后新连接
        that.initWebSocket();
        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.websock.readyState == 1) {
          // 如果连接正常
          // self.websock.send("heartCheck");
        } else {
          // 否则重连
          self.reconnect();}
        self.serverTimeoutObj = setTimeout(function() {
          // 在三秒一次的心跳检测中如果某个值 3 秒没响应就关掉这次连接
          // 超时关闭
          self.websock.close();}, self.timeout);
      }, self.timeout);
      // 3s 一次
    },

    websocketonopen(e) {
      // 连接建立之后执行 send 方法发送数据
      console.log("成功");
      let actions = {test: "12345"};
      // this.websocketsend(JSON.stringify(actions));
    },
    websocketonerror() {
      // 连接建立失败重连
      console.log("失败");
      this.initWebSocket();},
    websocketonmessage(e) {
      // 数据接收
      const redata = JSON.parse(e.data);
      console.log(redata);
      this.aa = [...this.aa, redata.type];
      this.reset();},
    websocketsend(Data) {
      // 数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {
      // 关闭
      console.log("断开连接", e);
    }