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的类

typescript 复制代码
// 先定义一个基础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连接里推送不同页面的信息,这个时候我们就要判断当前推送的信息是不是当前页面要用的信息,如果是就调用接收信息的回调,不是就忽略。示例如下:

typescript 复制代码
可发布,订阅消息主题的类代码如下
typescript 复制代码
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();
  }
}
相关推荐
速盾cdn2 小时前
速盾:CDN是否支持屏蔽IP?
网络·网络协议·tcp/ip
yaoxin5211232 小时前
第二十七章 TCP 客户端 服务器通信 - 连接管理
服务器·网络·tcp/ip
内核程序员kevin2 小时前
TCP Listen 队列详解与优化指南
linux·网络·tcp/ip
PersistJiao3 小时前
Spark 分布式计算中网络传输和序列化的关系(一)
大数据·网络·spark
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
黑客Ash6 小时前
【D01】网络安全概论
网络·安全·web安全·php
->yjy6 小时前
计算机网络(第一章)
网络·计算机网络·php
摘星星ʕ•̫͡•ʔ7 小时前
计算机网络 第三章:数据链路层(关于争用期的超详细内容)
网络·计算机网络