基于vue的前端socket处理模板

 整体思路如下：

1、初始化注册webSocket事件：

//初始化方法，先注册websoct事件 
initWebsocket() {
      const wsuri = “wss://xxxxx.xxxxxx.cn/ws”;
      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;        //定义连接关闭方法
 }

2、建立连接 （this.websock.onopen）

// 连接建立之后执行send方法发送数据
websocketonopen() {
   //成功建立连接之后 ，开启心跳机制发送数据
   this.heartCheck();
},

3、 连接建立失败，执行重连机制

 //连接建立失败，执行重连机制
 websocketonerror() {
   this.initWebSocket();
 },

4、 关闭webSocket

// 关闭websocket
websocketclose(e) {
   this.websock.close();
},

 5、接收数据

 // 数据接收
    websocketonmessage(e) {
       //以下为具体业务逻辑处理，仅供参考
      let newMd5 = md5(e.data);
      if (newMd5 === this.nopitData) {
      } else {
        this.nopitData = newMd5;
        const recData = JSON.parse(e.data);
        const reData = recData.data;
        if (recData.routeId === "response") {
          if (this.initializationState) {
            let actions = {
              routeId: "subscribe",
              data: ["alarm", "doorRecord",'parkRecord'],
              userId: sessionStorage.getItem("userCode"),
              regionId: this.areaCode
            };
            this.websocketsend(JSON.stringify(actions));
            this.initializationState = false;
          }
        }else{
           this.onCarMessage(recData,recData.routeId)
        }
      }
    },

6、心跳机制

 

heartCheck() {
      let that = this;
      let data = {
        routeId: "connect",
        userId: sessionStorage.getItem("userCode"),
        regionId: this.areaCode
      };
      if (this.websock && this.websock.readyState === 1) {
        this.websock.send(JSON.stringify(data));
      }
      if (heartbeat) clearTimeout(heartbeat);
      heartbeat = setTimeout(() => {
        this.initializationState=true;
        that.heartCheck();
      }, 30000);
    },

Socket.readyState的状态如下：

• 0 - 表示连接尚未建立。

• 1 - 表示连接已建立，可以进行通信。

• 2 - 表示连接正在进行关闭。

• 3 - 表示连接已经关闭或者连接不能打开

webSocket的心跳以及重连机制

    在使用websocket的过程中，有时候会遇到网络断开的情况，但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有：服务器会继续向客户端发送多余的链接，并且这些数据还会丢失。所以就需要一种机制来检测客户端和服务端是否处于正常的链接状态。因此就有了websocket的心跳了。还有心跳，说明还活着，没有心跳说明已经挂掉了。 

1. 为什么叫心跳包呢？
它就像心跳一样每隔固定的时间发一次，来告诉服务器，我还活着。

2. 心跳机制是？
心跳机制是每隔一段时间会向服务器发送一个数据包，告诉服务器自己还活着，同时客户端会确认服务器端是否还活着，如果还活着的话，就会回传一个数据包给客户端来确定服务器端也还活着，否则的话，有可能是网络断开连接了。需要重连~