js 连接webSocket使用记录-蒲公英云

环境

后台服务：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 事件监听器中使用。服务端发送的关闭码，以下为已分配的状态码。

状态码	名称	描述
0–999	-	保留段, 未使用。
1000	CLOSE_NORMAL	正常关闭; 无论为何目的而创建, 该链接都已成功完成任务。
1001	CLOSE_GOING_AWAY	终端离开, 可能因为服务端错误, 也可能因为浏览器正从打开连接的页面跳转离开。
1002	CLOSE_PROTOCOL_ERROR	由于协议错误而中断连接。
1003	CLOSE_UNSUPPORTED	由于接收到不允许的数据类型而断开连接 (如仅接收文本数据的终端接收到了二进制数据)。
1004	-	保留。其意义可能会在未来定义。
1005	CLOSE_NO_STATUS	保留。表示没有收到预期的状态码。
1006	CLOSE_ABNORMAL	保留。用于期望收到状态码时连接非正常关闭 (也就是说, 没有发送关闭帧)。
1007	Unsupported Data	由于收到了格式不符的数据而断开连接 (如文本消息中包含了非 UTF-8 数据)。
1008	Policy Violation	由于收到不符合约定的数据而断开连接。这是一个通用状态码, 用于不适合使用 1003 和 1009 状态码的场景。
1009	CLOSE_TOO_LARGE	由于收到过大的数据帧而断开连接。
1010	Missing Extension	客户端期望服务器商定一个或多个拓展, 但服务器没有处理, 因此客户端断开连接。
1011	Internal Error	客户端由于遇到没有预料的情况阻止其完成请求, 因此服务端断开连接。
1012	Service Restart	服务器由于重启而断开连接。 [Ref]
1013	Try Again Later	服务器由于临时原因断开连接, 如服务器过载因此断开一部分客户端连接。 [Ref]
1014	-	由 WebSocket	标准保留以便未来使用。
1015	TLS Handshake	保留。表示连接由于无法完成 TLS 握手而关闭 (例如无法验证服务器证书)。
1016–1999	-	由 WebSocket 标准保留以便未来使用。
2000–2999	-	由 WebSocket 拓展保留使用。
3000–3999	-	可以由库或框架使用。不应由应用使用。可以在 IANA 注册, 先到先得。
4000–4999	-	可以由应用使用。