js 连接webSocket使用记录

阳光穿透心脏的1/2处 2023-06-20 12:57 78阅读 0赞

## 环境 ##

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

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