环境

后台服务：laravel+swoole

前端：vue+element

使用websocket 的封装

连接

    data(){
    return {      
      lockReconnect: false,
      reconnectNum: 0,
      ws: "",
    }
   }
    messageSocket(key, message) {
      let that = this;
      let host = location.host;
      let protocol = "ws";
      if (location.protocol == "https:") {
        protocol = "wss";
      }
      let ws = new WebSocket(`${protocol}://${host}/ws?key=${key}`);
      (this.timeout = 15000), //心跳检查15秒
      ws.onopen = function() {
        console.log("ws已连接");
        // Web Socket 已连接上，使用 send() 方法发送数据
        that.reconnectNum = 0;
        sendMessage.send(message);
        heartCheck.reset().start();
      };
      ws.onmessage = function(evt) {
        heartCheck.reset().start();
      };
      ws.onerror = function() {
        reconnectSocket.connect();
      };
      ws.onclose = function(data) {
        if (data.code !== 1000) {
          reconnectSocket.connect();
        }
        // 关闭 websocket
        console.log("ws连接已关闭...");
      };
      //数据发送
      var sendMessage = {
        send(message = "now") {
          let sendData = JSON.stringify({
            message: message,
            interval: that.timeout
          });
          if (ws.readyState == 1) {
            //0 - 表示连接尚未建立;1 - 表示连接已建立，可以进行通信;2 - 表示连接正在进行关闭;3 - 表示连接已经关闭或者连接不能打开
            ws.send(sendData);
          } else {
            console.log("socket连接未建立");
          }
        }
      };
      //心跳检测
      var heartCheck = {
        timeoutObj: null,
        serverTimeoutObj: null,
        reset: function() {
          clearTimeout(this.timeoutObj);
          clearTimeout(this.serverTimeoutObj);
          return this;
        },
        start: function() {
          this.timeoutObj = setTimeout(function() {
            //这里发送一个心跳，后端收到后，返回一个心跳消息，
            //onmessage拿到返回的心跳就说明连接正常
            sendMessage.send("now");
          }, that.timeout);
          this.serverTimeoutObj = setTimeout(function() {
            //如果超过一定时间还没重置，说明后端主动断开了
            ws.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
          }, that.timeout * 2);
        }
      };
      //断开重连
      var reconnectSocket = {
        connect: function() {
          if (this.lockReconnect) return;
          if (that.reconnectNum >= 4) return;
          that.lockReconnect = true;
          ++that.reconnectNum;
          setTimeout(function() {
            that.messageSocketValidate();
            that.lockReconnect = false;
          }, that.timeout);
        }
      };
    },

正常退出

以上代码封装，在onClose的时候会自动触发重连的，所以我们正常退出需要传入code1000，这样就不会触发重连机制

ws.close(1000)

状态码的使用

socket的状态码我们需要根据下表范围去选择

WebSockets 的CloseEvent 会在连接关闭时发送给使用 WebSockets 的客户端。它在 WebSocket 对象的 onclose 事件监听器中使用。服务端发送的关闭码，以下为已分配的状态码。