Basic Vue connects websocket and does heartbeat detection

Time:2020-7-26

These parameters are required in data

data() {
    return {
      Websock: null, // connection established
      Lockconnect: false, // is the connection really established
      Timeout: 28 * 1000, // 30 seconds
      Timeoutobj: null, // outer heartbeat countdown
      Servertimeoutobj: null, // inner heartbeat detection
      Timeoutnum: null // countdown of disconnection and reconnection
    };
  },

In methods:

initWebSocket() {
      //Initializing the winsocket
      Const wsuri = "WS: //" + "xxxxx" + ": port number;
      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() {
      //Reconnection
      var that = this;
      if (that.lockReconnect) {
        //Is the connection really established
        return;
      }
      that.lockReconnect = true;
      //No connection will always be reconnected, set delay to avoid too many requests
      that.timeoutnum && clearTimeout(that.timeoutnum);
      //If the countdown of disconnection and reconnection is still valuable here, clear it
      that.timeoutnum = setTimeout(function() {
        //Then a new connection is made
        that.initWebSocket();
        that.lockReconnect = false;
      }, 5000);
    },
reset() {
      //Reset heartbeat
      var that = this;
      //Clearing time (clearing both internal and external heartbeat clocks)
      clearTimeout(that.timeoutObj);
      clearTimeout(that.serverTimeoutObj);
      //Restart heartbeat
      that.start();
    },
start() {
      //Turn on the heartbeat
      var self = this;
      self.timeoutObj && clearTimeout(self.timeoutObj);
      //If the outer heartbeat countdown exists, clear it
      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
      //If the inner heartbeat detection countdown exists, clear it
      self.timeoutObj = setTimeout(function() {
        //Reassign and resend for heartbeat detection
        //A heartbeat is sent here. When the back-end receives it, it returns a heartbeat message,
        if (self.websock.readyState == 1) {
          //If the connection is OK
          // self.websock.send("heartCheck");
        } else {
          //Otherwise, it will be reconnected
          self.reconnect();
        }
        self.serverTimeoutObj = setTimeout(function() {
          //In a three second heartbeat test, if a value doesn't respond for three seconds, close the connection
          //Timeout shutdown
          self.websock.close();
        }, self.timeout);
      }, self.timeout);
      //Every 3 seconds
    },

Connection state judgment:

websocketonopen(e) {
      //After the connection is established, send method is executed to send data
      console.log (the "success");
      let actions = { test: "12345" };
      // this.websocketsend(JSON.stringify(actions));
    },
    websocketonerror() {
      //Connection establishment failure reconnection
      console.log (the "failure");
      this.initWebSocket();
    },
    websocketonmessage(e) {
      //Data reception
      const redata = JSON.parse(e.data);
      console.log(redata);
      this.aa = [...this.aa, redata.type];
      this.reset();
    },
    websocketsend(Data) {
      //Data transmission
      this.websock.send(Data);
    },
    websocketclose(e) {
      //Close
      console.log (disconnection, e);
    }

Complete code:

initWebSocket() {
      //Initializing the winsocket
      Const wsuri = "WS: //" + "xxxxx" + ": port number;
      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() {
      //Reconnection
      var that = this;
      if (that.lockReconnect) {
        //Is the connection really established
        return;
      }
      that.lockReconnect = true;
      //No connection will always be reconnected, set delay to avoid too many requests
      that.timeoutnum && clearTimeout(that.timeoutnum);
      //If the countdown of disconnection and reconnection is still valuable here, clear it
      that.timeoutnum = setTimeout(function() {
        //Then a new connection is made
        that.initWebSocket();
        that.lockReconnect = false;
      }, 5000);
    },
    reset() {
      //Reset heartbeat
      var that = this;
      //Clearing time (clearing both internal and external heartbeat clocks)
      clearTimeout(that.timeoutObj);
      clearTimeout(that.serverTimeoutObj);
      //Restart heartbeat
      that.start();
    },
    start() {
      //Turn on the heartbeat
      var self = this;
      self.timeoutObj && clearTimeout(self.timeoutObj);
      //If the outer heartbeat countdown exists, clear it
      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
      //If the inner heartbeat detection countdown exists, clear it
      self.timeoutObj = setTimeout(function() {
        //Reassign and resend for heartbeat detection
        //A heartbeat is sent here. When the back-end receives it, it returns a heartbeat message,
        if (self.websock.readyState == 1) {
          //If the connection is OK
          // self.websock.send("heartCheck");
        } else {
          //Otherwise, it will be reconnected
          self.reconnect();
        }
        self.serverTimeoutObj = setTimeout(function() {
          //In a three second heartbeat test, if a value doesn't respond for three seconds, close the connection
          //Timeout shutdown
          self.websock.close();
        }, self.timeout);
      }, self.timeout);
      //Every 3 seconds
    },

    websocketonopen(e) {
      //After the connection is established, send method is executed to send data
      console.log (the "success");
      let actions = { test: "12345" };
      // this.websocketsend(JSON.stringify(actions));
    },
    websocketonerror() {
      //Connection establishment failure reconnection
      console.log (the "failure");
      this.initWebSocket();
    },
    websocketonmessage(e) {
      //Data reception
      const redata = JSON.parse(e.data);
      console.log(redata);
      this.aa = [...this.aa, redata.type];
      this.reset();
    },
    websocketsend(Data) {
      //Data transmission
      this.websock.send(Data);
    },
    websocketclose(e) {
      //Close
      console.log (disconnection, e);
    }