有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

JavaScript连接webSocket(实现方式)

javascript 炮渣日记 1个月前 (11-08) 38次浏览 已收录 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 事件监听器中使用。服务端发送的关闭码,以下为已分配的状态码。

状态码

名称

描述

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

可以由应用使用。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址