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);
    }

Recommended Today

Deeply analyze the principle and practice of RSA key

1、 Preface After experiencing many dark moments in life, when you read this article, you will regret and even be angry: why didn’t you write this article earlier?! Your darkest moments include: 1. Your project needs to be connected with the bank, and the other party needs you to provide an encryption certificate. You have […]