Websocket解析及用法（封装一个通用订阅发布主题的webSocket类）

1、什么是WebSocket?

websocket的目标是通过一个长连接实现与服务器全双工，双向的通信。是一种在单个TCP连接上进行全双工通信的协议，使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 js中创建websocket时，一个http请求会发送到服务器初始化连接，服务器响应后，连接使用http的upgrade头部从http协议切换到websocket协议，这意味着websocket不能通过标准的http服务器完成，而必须使用支持websocket协议的专有服务器。因为websocket使用了自定义协议，所以url方案稍有变化，不能再使用http://或https://，而要使用我是：ws://和wss://。前者是不安全的连接，后者是安全的。

优点	缺点
基于TCP协议： WebSocket建立在TCP之上，这使得服务器端的实现相对容易。	安全性：WebSocket 使用的是持久性连接，连接建立后会长时间保持打开状态。会增加服务器资源的消耗，WebSocket 协议的双向通信机制，它可能会面临安全隐患，例如 XSS 和 CSRF 攻击等。
与HTTP兼容性良好： WebSocket与HTTP协议兼容，使用HTTP协议进行握手阶段，因此默认端口与HTTP相同（80和443），且不易被屏蔽。这意味着它可以通过各种HTTP代理服务器，增加了通信的灵活性。	浏览器兼容性：旧版浏览器中可能会出现兼容性问题。
轻量级数据格式和高效通信：在连接创建后，持久保存连接状态，并且交换数据时，用于协议控制的数据包头部相对较小	数据包大小的限制： WebSocket 协议发送的数据包不能超过 2GB。
支持文本和二进制数据：WebSocket不仅可以发送文本数据，还可以发送二进制数据，相对 HTTP，可以更轻松地处理二进制内容。	服务器需求： WebSocket 协议需要服务器支持，这意味着需要更高效的服务器硬件和软件。
无同源限制：与传统的AJAX请求不同，WebSocket没有同源限制，客户端可以与任意服务器通信，不需要处理跨域

2、怎么理解WebSocket，可以用在什么场景?

首先，我们思考一个问题，当前端需要展示实时数据，或实现实时聊天功能，我们怎么设计数据请求方案？
按照传统的解决方法就是利用轮询和长轮询的方案，现在我们来对比一下这三种方案的异同：

	轮询	长轮询	websocket
方案思路	客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接	客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求	客户端向服务器发起websocket请求建立全双工通信连接，一旦服务器有数据更新，服务器可以主动给客户端发送数据，无需客户端询问
优缺点对比	后端程序编写比较容易，但是请求中有大半是无用，浪费带宽和服务器资源	在无消息的情况下不会频繁的请求，但是服务器hold连接会消耗资源	轻量级数据格式和高效通信，支持文本和二进制数据，无同源限制，但是旧版浏览器中可能会出现兼容性问题， WebSocket 协议发送的数据包不能超过 2GB

3、WebSocket对象详解

3-1、websocket()
构造函器会返回一个 WebSocket 对象。
var aWebSocket = new WebSocket(url [, protocols]);

参数名称	是否必填	释义
url	是	要连接的 URL；这应该是 WebSocket 服务器将响应的 URL。
protocol	否	一个人类可读的字符串，它解释了连接关闭的原因。这个 UTF-8 编码的字符串不能超过 123 个字节。

3-2、api
WebSocket.close() 关闭 WebSocket 连接或连接尝试（如果有的话）。如果连接已经关闭，则此方法不执行任何操作;

参数名称	是否必填	释义
code	否	一个数字状态码，它解释了连接关闭的原因。如果没有传这个参数，默认使用 1005。
reason	否	一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个 WebSocket 子协议（例如，你可能希望一台服务器能够根据指定的协议（protocol）处理不同类型的交互）。如果不指定协议字符串，则假定为空字符串。

WebSocket.send() 将需要通过 WebSocket 链接传输至服务器的数据排入队列，并根据所需要传输的 data bytes 的大小来增加 bufferedAmount的值。若数据无法传输（例如数据需要缓存而缓冲区已满）时，套接字会自行关闭。

参数名称	是否必填	释义
data	是	用于传输至服务器的数据。

3-3、属性
WebSocket.binaryType：返回 websocket 连接所传输二进制数据的类型。

WebSocket.bufferedAmount：一个只读属性，用于返回已经被send()方法放入队列中但还没有被发送到网络中的数据的字节数。一旦队列中的所有数据被发送至网络，则该属性值将被重置为 0。但是，若在发送过程中连接被关闭，则属性值不会重置为 0。如果你不断地调用send()，则该属性值会持续增长。

WebSocket.extensions：是只读属性，返回服务器已选择的扩展值。目前，链接可以协定的扩展值只有空字符串或者一个扩展列表。

WebSocket.protocol 是个只读属性，用于返回服务器端选中的子协议的名字；这是一个在创建 WebSocket 对象时，在参数 protocols 中指定的字符串，当没有已建立的链接时为空串。

WebSocket.readyState返回当前 WebSocket 的链接状态，只读。

值	释义
0	正在链接中
1	已经链接并且可以通讯
2	连接正在关闭
3	连接已关闭或者没有链接成功

WebSocket.url是一个只读属性，返回值为当构造函数创建WebSocket实例对象时 URL 的绝对路径。

3-4、事件

WebSocket.onclose：属性返回一个事件监听器，这个事件监听器将在 WebSocket 连接的readyState 变为 3时被调用，它接收一个名字为“close”的 CloseEvent 事件。

WebSocket.onerror：当websocket的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时，一个error事件将被引发。

WebSocket.onmessage：message 事件会在 WebSocket 接收到新消息时被触发。

WebSocket.onopen：属性定义一个事件处理程序，当WebSocket 的连接状态readyState 变为1时调用;这意味着当前连接已经准备好发送和接受数据。

4、怎么保持WebSocket长时间连接，不断线？

首先我们来探讨一下为什么websocket断线的原因有哪些，由于websocket连接是基于一个tcp连接上的长时间全双工双向通信，所以断线的原因有下几种可能（个人猜测）：
1、网络连接：网络连接不稳定或出现故障，可能会导致WebSocket断线；
2、服务器：WebSocket服务器出现故障或过载，可能会导致WebSocket断线；
3、防火墙问题：防火墙可能会阻止WebSocketClient与服务器之间的通信，导致断线。
4、超时问题：WebSocket在一段时间内没有收到服务器发送的数据，则可能会断开连接。
5、客户端异常中断。

如何解决断线问题？
1、心跳检测机制：通过定期发送心跳消息，可以确保客户端和服务器之间的连接处于活跃状态。如果一段时间内未收到来自客户端的心跳消息，服务器可以认为客户端已经断线，并采取相应的措施，例如关闭连接或重新建立连接。
2、连接状态管理：在客户端代码中维护连接的状态信息，以便及时检测连接的断开和重新连接的状态变化。这样可以使应用程序更容易地处理连接断开和重新连接时的逻辑。
3、异常处理 ：及时捕获和处理在连接过程中可能出现的异常情况，例如网络超时、连接被拒绝等，以提高系统的稳定性和可靠性。

心跳检测机制：
之所以称之为心跳检测是因为：它像心跳一样每隔固定时间发一次，以此来告诉服务器，这个客户端还活着。实际上，这种机制是为了维持长连接而设计的。通常情况下，心跳包的内容并没有特别的规定，通常是一个很小的数据包，甚至可能只包含包头的空包。

心跳检测步骤：
1、客户端会定期发送一个探测包（心跳包）给服务器，以确保连接的活跃性。
2、在发送探测包的同时，客户端会启动一个超时定时器，以便在规定的时间内等待服务器的响应。
3、当服务器接收到客户端发送的探测包时，会立即回应一个确认包，以表明服务器正常接收到了探测包。
4、如果客户端收到服务器的应答包，则说明服务器正常：客户端在收到服务器的确认包后，会立即删除之前启动的超时定时器，表明服务器正常运行。
5、如果客户端的超时定时器超时，仍未收到应答包，则说明服务器挂了：如果客户端的超时定时器到期时仍未收到服务器的确认包，则客户端会认为服务器已经挂了，进而采取相应的措施，例如重新连接或者进行错误处理。

5、封装一个通用的推送、订阅主题的webSocket的类

// 先定义一个基础webSocket类
class WebsocketClient {
  // 连接的URL
  _host = "";
  // websocket对象
  ws = null;
  // 传入的websocket的方法函数，事件回调函数
  _insOwner = null;
  constructor(host: string, ins) {
    this._host = host;
    this._insOwner = ins;
    this.initWebsocket();
  }
  // 初始化创建websocket对象
  initWebsocket() {
    if (this.ws != null) {
      this.ws.close();
    }
    try {
      this.ws = new WebSocket(this._host);
    } catch (error) {
      console.error("create websocket error: ", error.toString());
      if (this._insOwner && typeof this._insOwner.onDisconnect == "function") {
        // websocket连接失败处理函数
        this._insOwner.onDisconnect();
      }
      return;
    }

    this.ws.onopen = () => {
      //开始连接
      if (this._insOwner && typeof this._insOwner.onConnect == "function") {
        this._insOwner.onConnect();
      }
    };
    this.ws.onerror = (error) => {
      console.error("websocket error: ", error);
    };
    this.ws.onclose = (e) => {
      console.error("websocket onclose: ", e);
      if (this._insOwner && typeof this._insOwner.onDisconnect == "function") {
        this._insOwner.onDisconnect(e);
      }
    };
    this.ws.onmessage = (message) => {
      if (this._insOwner && typeof this._insOwner.onMessage == "function") {
        this._insOwner.onMessage(message.data);
      }
    };
  }
  // 发送消息
  sendMessage(message) {
    console.log(this.ws, this.ws.readyState, message);
    //  WebSocket 是否处于打开状态 readyState === 1
    //CONNECTING：值为0，表示正在连接。
    //OPEN：值为1，表示连接成功，可以通信了。
    //CLOSING：值为2，表示连接正在关闭。
    //CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
    if (this.ws && this.ws.readyState == 1) {
      this.ws.send(message);
      return true;
    }
    return false;
  }
  // 关闭连接
  dispose() {
    this._host = "";
    this._insOwner = null;
    if (this.ws != null) {
      this.ws.close();
      this.ws = null;
    }
  }
}

在此基础类之上定义一个可发布，订阅消息主题的类
什么叫消息主题？在真实开发中，我们接收websocket信息时，后端会在一个ws连接里推送不同页面的信息，这个时候我们就要判断当前推送的信息是不是当前页面要用的信息，如果是就调用接收信息的回调，不是就忽略。示例如下：
在这里插入图片描述

可发布，订阅消息主题的类代码如下

interface UpcWebsocketEvent {
  type: UpcWebsocketEventType;
  data: UpcWebsocketEventInfo;
}

interface UpcWebsocketEventInfo {
  isReconnect: boolean; // 是否是重连
  reconnectable: boolean; // 是否自动重连
  reconnectDivide: number; // 重连间隔 S
  reconnectMaxTimes?: number; // 最大重连次数
  reconnectTimes?: number; // 当前重连次数
}

export enum UpcWebsocketEventType {
  Connected,
  Disconnect,
  Reconnect,
}

export class UpcWebsocketClient {
  _client: any = null; // 存储WebSocket客户端实例
  _url = "";
  _urlGenerator = null; // url 生成器

  isConnect = false; //连接状态
  reConnectNum = 0; //重连次数
  reConnectMaxNum = 3; // 最大重连次数

  // 登录相关
  _logined = false;
  _loginTimer = null;
  _loginResolve = null;

  // 心跳相关
  _heartTimer = null;
  _heartBeatResolve = null;
  _heartBeatResolveTimer = null;

  // 重连句柄
  _autoReloginTimer = null;
  _autoReloginDivide = 10; // 每隔 10 S 发起一次重连

  // 实例事件, 需全局订阅
  _instanceEventCallback: ((event: UpcWebsocketEvent) => void) | null = null;
  // 主题订阅
  _subIndex = 0;
  _subMap = new Map<string, Map<number, (data: any) => void>>(); // Map<topic, Map<subIndex, listner>>

  constructor(urlGenerator) {
    if (typeof urlGenerator != "function") {
      throw new Error("urlGenerator is not function");
    }
    this._urlGenerator = urlGenerator;
  }

  onInstanceEvent(fn: (event: UpcWebsocketEvent) => void) {
    if (typeof fn == "function") {
      this._instanceEventCallback = fn;
    }
  }

  emitInstanceEvent(type: UpcWebsocketEventType, data: UpcWebsocketEventInfo) {
    if (typeof this._instanceEventCallback == "function") {
      this._instanceEventCallback({ type, data });
    }
  }
// 根据基础类创建websocket对象
  async createWebsocket() {
    // this._client存储创建出来的websocket对象索引
    if (this._client != null) {
      this._client.dispose();
      this._client = null;
    }
    // 拿到websocket连接url,一般都是要携带token的，所以拿url的方法要抽离出类之外，通过构造函数传入
    const result = await this._urlGenerator();
    if (result.code != 0) {
      return { code: result.code, msg: `获取推送服务认证口令失败` };
    }
    this._url = result.data; //    `${this._host}/ws?token=${this._token}`;

    return new Promise((resolve: (connected: boolean) => void) => {
      this._loginResolve = resolve;
      this._client = new WebsocketClient(this._url, this);
    });
  }
  // 开始连接，如果连接失败，将尝试自动重连，开启连接
  async start() {
    const connected = await this.createWebsocket();
    // 判断ws对象是否创建成功，否就重连创建，是就开启心跳检测机制
    if (!connected) {
      this.autoRelogin();
    } else {
      this.keepHeartBeat(); // 开始心跳
    }
  }
  // 暂停连接，清理相关资源
  pause() {
    // 清理 socket
    this._client && this._client.dispose();
    this._client = null;

    // 如果有心跳，取消心跳
    this._heartTimer && clearTimeout(this._heartTimer);
    this._heartTimer = null;

    // 如果心跳正在进行, 取消回调
    this._heartBeatResolveTimer && clearTimeout(this._heartBeatResolveTimer);
    this._heartBeatResolveTimer = null;
    this._heartBeatResolve = null;

    this._loginResolve = null;

    // 如果在重连, 去掉重连
    this._autoReloginTimer && clearTimeout(this._autoReloginTimer);
    this._autoReloginTimer = null;

    // 清理主题订阅
    this._subIndex = 0;
    this._subMap.clear();

    this.isConnect = false; //连接状态
    this.reConnectNum = 0;

    return;
  }
  // 重连,每隔一定时间尝试重新连接
  async autoRelogin() {
    this._autoReloginTimer = setTimeout(async () => {
      this._autoReloginTimer = null;
      const ret = await this.createWebsocket();
      if (!ret) {
        return this.autoRelogin();
      } else {
        this.keepHeartBeat(); // 开始心跳
      }
      this.isConnect = true;
      // 重连成功
      this.emitInstanceEvent(UpcWebsocketEventType.Reconnect, {
        msg: "",
        relogin_divide: this._autoReloginDivide,
      });
    }, this._autoReloginDivide * 1000);
  }
  // 建立连接，连接建立成功之后要做的事情，基础类的onopen事件回调函数
  onConnect() {
    console.log(`webSocket已连接`);
    this.isConnect = true;
    this.reConnectNum = 0;
    typeof this._loginResolve == "function" && this._loginResolve(true);
    this._loginResolve = null;
    this.recoverSubscribe(); // 恢复订阅
  }
  // WebSocket连接断开时调用，清理资源，基础类的onclose事件回调函数
  onDisconnect(e?) {
    console.log(`webSocket已经关闭 ${e} `);
    // 清理 socket
    this._client && this._client.dispose();
    this._client = null;

    // 如果有心跳，取消心跳
    this._heartTimer && clearTimeout(this._heartTimer);
    this._heartTimer = null;
    // 如果心跳正在进行, 取消回调
    this._heartBeatResolveTimer && clearTimeout(this._heartBeatResolveTimer);
    this._heartBeatResolveTimer = null;
    this._heartBeatResolve = null;

    // 触发掉线通知掉线
    this.emitInstanceEvent(UpcWebsocketEventType.Disconnect, {
      msg: "",
      relogin_divide: this._autoReloginDivide,
    });

    //被动断开，重新连接
    if (e && e?.code) {
      this.autoRelogin();
      console.log("websocket连接不上，请重新登录或联系开发人员!");
    }
  }
  // 接收到的 WebSocket消息，解析消息并调用相应的处理函数，基础类的onmessage事件回调函数
  onMessage(message: string) {
    const msg = JSON.parse(message);
    // console.log("onMessage", msg);
    if (!msg.channel) {
      console.error("onMessage error ");
      return;
    }
    if (
      !(typeof msg.text == "string" && JSON.parse(msg.text).action_ans == "subscriber successed!")
    ) {
      this.handlePublish(msg);
    }
  }

  // 使用nginx代理webSocket链接，客户端和服务器握手成功后，如果在60s时间内没有数据交互，连接就会自动断开
  // 心跳检测，定期 30s 发送心跳请求并处理心跳响应
  keepHeartBeat() {
    this._heartTimer = setTimeout(async () => {
      this._heartTimer = null;
      const ret = await this.sendHeartBeat();
      // if (ret?.code == 1) {
      //   return this.onDisconnect();
      // }
      return this.keepHeartBeat();
    }, 30 * 1000); // 
  }
  // 发送心跳请求，返回一个Promise，用于处理心跳响应
  sendHeartBeat() {
    return new Promise((resolve) => {
      this._heartBeatResolve = resolve;
      this._heartBeatResolveTimer = setTimeout(() => {
        this._heartBeatResolveTimer = null;
        if (this._heartBeatResolve !== null) {
          this._heartBeatResolve({ code: 100, ret_msg: "sendHeartBeat timeout", data: null });
          this._heartBeatResolve = null;
        }
      }, 10 * 1000);
      const reqData = {
        action: "req",
        channel: "ping",
      };
      this._client && this._client.sendMessage(JSON.stringify(reqData));
    });
  }
  // 
  handlePublish(msg) {
    const topic = msg.channel;
    const handleMap = this._subMap.get(topic);
    if (handleMap != null) {
      handleMap.forEach((fn) => {
        try {
          fn(JSON.parse(msg.text));
        } catch (e) {
          console.log(e);
        }
      });
    }
  }
  // 恢复所有主题的订阅
  recoverSubscribe() {
    this._subMap.forEach((handleMap, topic) => {
      if (handleMap != null && handleMap.size > 0) {
        const reqData = {
          action: "sub",
          channel: topic,
          data: {},
        };
        this._client && this._client.sendMessage(JSON.stringify(reqData));
      }
    });
  }
  /**
   * 订阅指定主题，并注册事件监听器。
   * @param topic 订阅的主题字符串。
   * @param listener 当订阅主题触发时执行的回调函数。
   * @returns 返回一个句柄，用于取消订阅。
   */
  subscribe(topic: string, listener: () => void) {
    if (typeof listener != "function") return;
    let handleMap = this._subMap.get(topic);
    if (handleMap == null) {
      handleMap = new Map();
      this._subMap.set(topic, handleMap);
    }
    const handle = ++this._subIndex;
    handleMap.set(handle, listener);
    if (handleMap.size == 1) {
      // 初始添加订阅, 需要向后台发送消息
      const reqData = {
        action: "sub",
        channel: topic,
        data: {},
      };
      this._client && this._client.sendMessage(JSON.stringify(reqData));
    }
    return handle;
  }
  /**
   * 取消订阅指定主题或删除指定句柄对应的监听器。
   * @param topic 要取消订阅的主题字符串。
   * @param handle 可选，取消特定句柄对应的监听器；若未提供，则取消该主题下的所有监听器。
   */
  unsubscribe(topic, handle?) {
    const handleMap = this._subMap.get(topic); // 获取对应主题的订阅
    if (handleMap == null || handleMap.size == 0) {
      // 未订阅，无需退订
      return;
    }
    if (typeof handle == "undefined") {
      // 全部退订
      handleMap.clear();
    } else {
      handleMap.delete(handle);
    }
    if (handleMap.size == 0) {
      // 向后台取消订阅
      const reqData = {
        action: "unsub",
        channel: topic,
        data: {},
      };
      this._client && this._client.sendMessage(JSON.stringify(reqData));
    }
  }
  /**
   * 清理资源并释放所有内部状态。
   */
  dispose() {
    // 清理 socket
    this._client && this._client.dispose();
    this._client = null;

    // 如果有心跳，取消心跳
    this._heartTimer && clearTimeout(this._heartTimer);
    this._heartTimer = null;

    // 如果心跳正在进行, 取消回调
    this._heartBeatResolveTimer && clearTimeout(this._heartBeatResolveTimer);
    this._heartBeatResolveTimer = null;
    this._heartBeatResolve = null;

    // 如果在重连, 去掉重连
    this._autoReloginTimer && clearTimeout(this._autoReloginTimer);
    this._autoReloginTimer = null;

    // 清理系统订阅
    this._instanceEventCallback = null;
    // 清理主题订阅
    this._subIndex = 0;
    this._subMap.clear();
  }
}