一个WebSocket的前端封装类

最新推荐文章于 2025-05-23 21:00:00 发布
最新推荐文章于 2025-05-23 21:00:00 发布
阅读量869 收藏 7
点赞数 5
CC 4.0 BY-SA版权
分类专栏： 通用 文章标签： websocket 前端 工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eqmaster/article/details/142332495

一、概述

实现一个MyWebSocket的自定义 WebSocket 类，用于建立与服务器的 WebSocket 连接，并提供了一系列方法来处理连接状态、发送和接收消息、自动重连等功能。该类可以方便地在前端项目中实现与服务器的实时通信。

二、实现思路

  1. 类的构造函数接收 URL 和可选的配置参数，初始化 WebSocket 连接所需的属性，如连接 URL、重连间隔、最大重连次数、日志级别和各种回调函数等。
  2. 通过_initWebsocket方法初始化 WebSocket 连接，设置连接的打开、关闭、错误和消息接收等事件的处理函数。
  3. 提供了getStatus方法用于获取 WebSocket 的连接状态。
  4. then方法用于设置接收消息时的回调函数。
  5. sendMessage方法用于向服务器发送 JSON 格式的消息，并在发送前自动添加用户信息（如果消息中没有operatingUserId，则从localStorage中获取userId添加到消息中）。
  6. 当连接出现错误或关闭时，启动自动重连机制，尝试在一定时间间隔后重新建立连接。

三、方法解析

  1. constructor：初始化类的属性，合并默认配置和传入的配置选项，调用_initWebsocket方法开始建立连接。
  2. getStatus：返回 WebSocket 的当前连接状态，通过readyState属性判断连接的状态。
  3. then：设置接收消息时的回调函数，该回调函数在_websocketmessage方法中被调用。
  4. sendMessage：在发送消息前，先检查消息是否为有效的 JSON 对象，如果不是则抛出错误。然后调用_wrapUserInfo方法添加用户信息，最后将消息转换为 JSON 字符串并通过 WebSocket 发送。
  5. _wrapUserInfo：检查消息中是否存在operatingUserId，如果不存在则从localStorage中获取userId并添加到消息中。
  6. _isJSON：判断一个对象是否为有效的 JSON 对象，通过检查对象的类型和键的数量来判断。
  7. _initWebsocket：尝试建立 WebSocket 连接，设置连接的各种事件处理函数。如果建立连接过程中出现错误，则启动重连机制。
  8. _websocketopen、_websocketerror、_websocketclose、_websocketmessage：分别处理 WebSocket 的打开、错误、关闭和消息接收事件，调用相应的回调函数和日志方法。
  9. _startReconnect：启动重连机制，设置定时器，在一定时间间隔后尝试重新建立连接，直到达到最大重连次数。
  10. _logInfo、_logWarn、_logError：根据日志级别打印不同类型的日志信息。

四、注意事项

  1. 确保在使用该类时，提供正确的 WebSocket 服务器 URL 和有效的配置选项。
  2. 注意处理可能出现的错误，如消息不是有效的 JSON 对象、获取token或userId失败等情况。
  3. 在使用自动重连功能时，要考虑到重连次数和时间间隔的合理性，避免过度频繁的重连对服务器造成压力。
  4. 确保在合适的时机调用then方法设置接收消息的回调函数，以便正确处理接收到的消息。
  5. 注意在发送消息前，确保消息是有效的 JSON 对象，否则会抛出错误。

五、使用示例

this.MyWebSocket = new MyWebSocket("http://ip:port/websocket");
// 接收消息
this.MyWebSocket.then((e) => {
  console.log(e);
});
// 发送消息
this.websocket.sendMessage(JSON.stringify({"info": "我正在操作页面..." }));

六、附源码

const _OPERATING_USER_ID = "userId";
/**
 * WebSocket Custom Class
 */
class MyWebSocket {
  _url = "";
  _ws = null;
  _then = null;
  _options = null;
  _reconnectInterval = 2000;
  _reconnectTimeoutId = null;
  _reconnectAttempts = 0;
  _maxReconnectAttempts = 100;
  _logLevel = process.env.NODE_ENV === "development" ? "info" : "warning";
  _connectedCallback = null;
  _disconnectedCallback = null;
  _errorCallback = null;
  _messageReceivedCallback = null;

  /**
   * Constructor for MyWebSocket class. Initializes a new WebSocket connection with the provided URL and options.
   *
   * @param {string} url - The WebSocket server URL.
   * @param {Object} [options={}] - Optional configuration options for the WebSocket connection.
   * @param {number} [options.reconnectInterval=2000] - The time interval (in milliseconds) between reconnection attempts.
   * @param {number} [options.maxReconnectAttempts=100] - The maximum number of reconnection attempts before giving up.
   * @param {string} [options.logLevel="info"] - The log level for WebSocket events. Can be "off", "error", "warn", "info", or "debug".
   * @param {function} [options.connectedCallback] - A callback function to be executed when the WebSocket connection is established.
   * @param {function} [options.disconnectedCallback] - A callback function to be executed when the WebSocket connection is closed.
   * @param {function} [options.errorCallback] - A callback function to be executed when an error occurs during the WebSocket connection.
   * @param {function} [options.messageReceivedCallback] - A callback function to be executed when a message is received from the WebSocket server.
   */
  constructor(url, options = {}) {
    this._url = url;
    this._options = {
      reconnectInterval: this._reconnectInterval,
      maxReconnectAttempts: this._maxReconnectAttempts,
      logLevel: "info",
      ...options,
    };
    this._reconnectInterval = this._options.reconnectInterval;
    this._maxReconnectAttempts = this._options.maxReconnectAttempts;
    this._logLevel = this._options.logLevel;
    this._connectedCallback = this._options.connectedCallback;
    this._disconnectedCallback = this._options.disconnectedCallback;
    this._errorCallback = this._options.errorCallback;
    this._messageReceivedCallback = this._options.messageReceivedCallback;
    this._initWebsocket();
  }
  /**
   * Retrieves the readyState of the WebSocket connection.
   *
   * @returns {number} The readyState of the WebSocket connection.
   * The readyState attribute represents the state of the connection:
   * - 0: CONNECTING: The connection is not yet open.
   * - 1: OPEN: The connection is open and ready to communicate.
   * - 2: CLOSING: The connection is in the process of closing.
   * - 3: CLOSED: The connection is closed or couldn't be opened.
   */
  getStatus() {
    return this._ws.readyState;
  }
  /**
   * Sets a callback function to be executed when a message is received from the WebSocket server.
   *
   * @param {function} callback - The callback function to be executed when a message is received.
   * The callback function will receive two parameters:
   * - {Object} msg - The parsed JSON message received from the server.
   * - {MessageEvent} event - The original MessageEvent object received from the WebSocket.
   *
   * @returns {void}
   */
  then(callback) {
    this._then = callback;
  }

  /**
   * Sends a JSON message to the WebSocket server.
   *
   * @param {Object} message - The JSON message to be sent.
   * @throws {Error} Throws an error if the message is not a valid JSON object.
   * @returns {void}
   */
  sendMessage(message) {
    if (!this._isJSON(message)) {
      throw new Error(" could not send non JSON message");
    }
    this._wrapUserInfo(message);
    this._ws.send(JSON.stringify(message));
  }

  /**
   * Wraps the user information in the given message object.
   * If the message does not contain the operatingUserId, it retrieves the userId from localStorage and adds it to the message.
   *
   * @param {Object} message - The message object to be sent to the WebSocket server.
   * @returns {void} The function modifies the message object in-place.
   *
   * @example
   * const message = {
   *   type: 'chat',
   *   content: 'Hello, WebSocket!'
   * };
   * _wrapUserInfo(message);
   * // After execution, message will be:
   * // {
   * //   type: 'chat',
   * //   content: 'Hello, WebSocket!',
   * //   operatingUserId: '12345'
   * // }
   */
  _wrapUserInfo(message) {
    if (!(_OPERATING_USER_ID in message)) {
      message.operatingUserId = localStorage.getItem("userId");
    }
  }

  _isJSON(obj) {
    if (typeof obj !== "object") {
      return false;
    }
    try {
      return Object.keys(obj).length > 0 && typeof obj === "object";
    } catch (e) {
      return false;
    }
  }

  /**
   * Initializes a new WebSocket connection with the provided URL.
   *
   * @private
   * @memberof MyWebSocket
   * @returns {void}
   *
   * @throws {Error} Throws an error if there is an issue initializing the WebSocket connection.
   */
  _initWebsocket() {
    // config.headers["Authorization"] = localStorage.getItem("token");
    try {
      const token = localStorage.getItem("token");
      if (!token) {
        this._logError("get token failed.");
      }
      const url = `${this._url}?Authorization=${token}`;
      this._ws = new WebSocket(url);
      const that = this;
      this._ws.onopen = (e) => {
        return this._websocketopen(that, e);
      };
      this._ws.onclose = (e) => {
        return this._websocketclose(that, e);
      };
      this._ws.onmessage = (e) => {
        return this._websocketmessage(that, e);
      };
      this._ws.onerror = (e) => {
        return this._websocketerror(that, e);
      };
    } catch (error) {
      this._logError("Error initializing WebSocket: " + error.message);
      this._startReconnect();
    }
  }

  _websocketopen(that) {
    that._logInfo("websocket open");
    if (typeof that._connectedCallback === "function") {
      that._connectedCallback();
    }
    if (that._reconnectTimeoutId) {
      clearInterval(that._reconnectTimeoutId);
      that._reconnectTimeoutId = null;
      that._reconnectAttempts = 0;
    }
  }

  _websocketerror(that, event) {
    that._logError("websocket error: " + event.message);
    if (typeof that._errorCallback === "function") {
      that._errorCallback(event);
    }
    that._startReconnect();
  }

  _websocketclose(that, event) {
    that._logWarn("websocket closed: " + event.reason);
    if (typeof that._disconnectedCallback === "function") {
      that._disconnectedCallback(event);
    }
    that._startReconnect();
  }

  /**
   * Handles incoming messages from the WebSocket server.
   * Parses the received data as JSON and triggers the appropriate callback functions.
   *
   * @param {MessageEvent} event - The original MessageEvent object received from the WebSocket.
   * @private
   * @memberof MyWebSocket
   * @returns {void}
   */
  _websocketmessage(that, event) {
    let msg = {};

    try {
      msg = JSON.parse(event.data);
    } catch (e) {
      that._logError("websocket message parse error: " + e.message);
    }
    if (that._then && typeof that._then === "function") {
      that._then(msg, event);
    }
    if (typeof this._messageReceivedCallback === "function") {
      that._messageReceivedCallback(msg, event);
    }
  }

  /**
   * Initiates the reconnection process to the WebSocket server.
   * This function is called when the WebSocket connection is closed or encounters an error.
   * It checks if the maximum reconnection attempts have been reached, logs an error message if necessary,
   * and starts a timer to attempt reconnection after the specified interval.
   *
   * @private
   * @memberof MyWebSocket
   * @returns {void}
   */
  _startReconnect() {
    if (this._reconnectTimeoutId) {
      return;
    }
    this._reconnectTimeoutId = setInterval(() => {
      this._logInfo("Attempting to reconnect... Attempt " + (this._reconnectAttempts + 1));
      this._initWebsocket();
      this._reconnectAttempts++;

      if (this._reconnectAttempts >= this._maxReconnectAttempts) {
        this._logError("Max reconnect attempts reached. Giving up.");
        clearInterval(this._reconnectTimeoutId);
        return;
      }
    }, this._reconnectInterval);
  }

  /**
   * Logs an informational message to the console based on the log level.
   *
   * @param {string} message - The informational message to be logged.
   * @returns {void}
   *
   * @private
   * @memberof MyWebSocket
   */
  _logInfo(message) {
    if (this._logLevel === "info" || this._logLevel === "debug") {
      console.log(message);
    }
  }

  /**
   * Logs a warning message to the console based on the log level.
   *
   * @param {string} message - The warning message to be logged.
   * @returns {void}
   *
   * @private
   * @memberof MyWebSocket
   */
  _logWarn(message) {
    if (this._logLevel === "warn" || this._logLevel === "info" || this._logLevel === "debug") {
      console.warn(message);
    }
  }

  /**
   * Logs an error message to the console based on the log level.
   *
   * @param {string} message - The error message to be logged.
   * @returns {void}
   *
   * @private
   * @memberof MyWebSocket
   */
  _logError(message) {
    if (this._logLevel !== "off") {
      console.error(message);
    }
  }
}
websocket前端封装代码,心跳机制断线重连
weixin_44383533的博客
03-10 2569
前端websoket封装 具体代码/使用方法 原理讲解
前端WebSocket 封装
weixin_45782529的博客
02-18 3043
我封装的这是需要启动项目就立即连接，所以我在封装的js中自调用了连接函数，在main.js中引入该js文件，看你们需求再自己稍微变动一下吧提示：以下是本篇文章正文内容，下面案例可供参考以上就是webSocket封装过程，不对的地方不用多多指教，哈哈哈哈。
前端WebSocket通信 介绍以及用法
最新发布
夜空孤狼啸的博客
05-23 1037
WebSocket是一种用于在Web应用程序和服务器之间建立实时、双向通信的协议，通过单一TCP连接实现持久化数据传输。其优势包括实时性、双向通信和减少网络负载，但劣势在于需要浏览器和服务器支持、额外开销以及潜在的安全问题。WebSocket协议基于TCP，支持二进制和文本数据，通过握手协议建立连接，并保持开放状态以实时传递数据。WebSocket的生命周期包括连接建立、开放、关闭和关闭完成四个阶段，需处理连接关闭事件以确保应用稳定性。心跳机制用于检测客户端与服务器的连接状态，通过定时发送ping数据包确认
前端封装WebSocket
taomouren的博客
01-21 3942
关于前端封装websocket以及使用
vue实现websoket即时通讯
weixin_45852743的博客
08-23 3366
vue使用websoket即时通讯
webSocket前端+webSocket封装
Web_Notes的博客
07-11 1914
webSocket
前端WebSocket封装
张钦的博客
05-11 390
WebSocket简易封装，用于简化WebSocket的使用过程，包括自动处理连接、消息收发、心跳检测、断线重连以及事件监听等功能，用于简化业务调用。此处以Vue3调用为例
websocket封装
码农键盘上的梦
05-31 969
websocket在前端开发中，是一个必须掌握的技术！你可以不用，但必须掌握！前几天，就遇到这样一个需求，要求界面的数据通过websocket实时推送，并且必须支持断网重连、自动心跳！自动心跳是定期向服务端发送小型数据包，如果一段时间内服务端没有收到心跳响应，系统可能会断开连接。websokect的API非常简单// 创建ws连接console.log('WebSocket 连接已经建立。');');console.log('收到服务器消息：', event.data);
vue3中 webSocket方法封装成一个hooks
红烧咸咸鱼
07-26 663
vue3中 webSocket方法封装成一个hooks
前端开发即时通信WebSocket：10分钟学会WebSocket
单口相声Jay
04-22 2992
WebSocket是一种在客户端和服务器之间实现双向通信的网络协议。它通过在单个TCP连接上提供全双工通信功能，使得服务器可以主动向客户端推送数据，而不需要客户端发起请求。WebSocket 协议是一种基于 TCP 的应用层协议，它提供了在客户端和服务器之间进行双向通信的能力。相比传统的 HTTP 协议，它具有更低的延迟和更高的实时性。WebSocket 协议通过建立一条持久化的连接来实现双向通信，从而避免了 HTTP 协议中频繁建立和断开连接的过程，减少了网络开销和服务器的负担。
基于HTML5 WebSocket服务端的封装
09-22
基于HTML5 WebSocket服务端的封装，绝对能用，让你不用费神捣鼓websocket方面的东西了，
websocket前端封装
08-25
websocket前端封装
websocket封装包
12-30
android开发中，使用okhttp和websocket，建立稳定可靠的长连接，亲测，没有任何问题，欢迎下载
封装一套前端几乎通用的WebSocket代码
多吉
10-10 5460
前言 对接过几次WebSocket连接，无论是在纯JavaScript、Vue亦或Uniapp等框架语言中使用，Socket代码流程基本上差不多。无非就是： 发起连接 发送数据（发送心跳等） 接收数据 关闭连接 断线重连 异常处理… 每次都需要重写比较麻烦，故封装一套大致流程的WebSocket代码，哪怕从纯JavaScript项目搬到Vue、Uniapp等框架中，也只需要做小部分修改即可。 具体实现 创建socket.js，代码如下： // 在Vue中使用，不需要可以去除以下引用 import Vue
前端封装websocket，好用的话留个赞哦！
AlmostLkl的博客
10-18 466
/ 如果接收到的消息不是心跳消息，则立刻重置心跳时间，并再次发起一次心跳。// 这里把接收到的消息传入到回调函数中，在组件内可获取接收的消息。// 如果接收到的消息是心跳消息，则会继续发送心跳，保持连接畅通。console.log('连接失败');console.log('断开连接');// 避免了传统的轮询心跳带来的不必要的损耗。/**打开WS之后发送心跳 *//**接收的消息回调*//**建立连接 *//**失败重连 *//**断开连接 *//**接收消息 *//**发送心跳 */
Vue 18 ，WebSocket 1 ，WebSocket使用详细，WebSocket函数封装（WebSocket相关属性和请求体传参，在Vue中使用WebSocket）
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.csdn.net）
12-11 4911
⭐我们都知道WebSocket是一种在单个TCP连接上进行全双工通信的协议。相较于传统的HTTP协议，WebSocket提供了更高效、实时的通信方式，特别适用于需要低延迟、持续数据交换的场景，如在线聊天、多人协作编辑、实时股票报价、在线游戏、IoT设备控制等。这里来分享记录，WebSocket的基本使用和函数封装。
SpringBoot 整合 websocket （五）——前端封装补充
半路凉亭
09-05 952
在上一篇文章里介绍了如果再前端进行websocket封装时，进行断网重连、心跳监测等，在最近梳理的时候发现在断网重连这块少考虑了一块，例如默认情况下，断网后前端会每隔3秒重新与服务器握手一次，共握手5次后就彻底断开，这在实际项目里就存在问题，例如实际需求中需要一旦超过握手总次数就执行新的功能，例如提示操作者或者将异常入库等。
前端基于WebSocket封装
盼盼盼的博客
09-16 1307
1.无心跳，短开连接之后重新连。 class webSocketClass { constructor(name) { this.lockReconnect = false; this.localUrl = "ws://XXXXXX"; this.wsUrl = ""; this.globalCallback = null; this.userClose = false; this.createWebSocket(name); } createW
前端websocket封装
01-15
### 前端 WebSocket 封装方法及示例 为了实现更稳定可靠的 WebSocket 连接管理，通常会将 WebSocket 功能封装到一个独立的类或模块中。这不仅有助于简化代码逻辑，还能增强错误处理能力和自动重连机制。 #### 创建可重连的 WebSocket 类 通过定义一个 `WebSocket` 类来封装基本功能，并加入自动重连特性： ```javascript class ReconnectingWebSocket { constructor(url, protocols = [], options = {}) { this.url = url; this.protocols = protocols; this.options = options; this.reconnectInterval = options.reconnectInterval || 1000; // 默认重连间隔时间设为1秒 this.maxReconnectAttempts = options.maxReconnectAttempts || Infinity; // 设置最大尝试次数 this._ws = null; this._reconnectCount = 0; this.connect(); } connect() { try { console.log(`Connecting to ${this.url}`); this._ws = new WebSocket(this.url, this.protocols); this._ws.onopen = () => { console.log('Connected'); this._resetReconnectCounter(); }; this._ws.onerror = (error) => { console.error('Error:', error); }; this._ws.onclose = () => { console.warn('Connection closed. Attempting reconnect...'); setTimeout(() => this.reconnect(), this.reconnectInterval); }; this._ws.onmessage = (event) => { const message = JSON.parse(event.data); this.emit('message', message); }; } catch (e) { console.error(e.message); setTimeout(() => this.reconnect(), this.reconnectInterval); } } _resetReconnectCounter() { this._reconnectCount = 0; } reconnect() { if (++this._reconnectCount >= this.maxReconnectAttempts) { console.error('Max reconnection attempts reached.'); return; } this.connect(); } send(data) { if (!this.isConnected()) throw new Error('Not connected'); this._ws.send(JSON.stringify(data)); } close(code, reason) { if (this._ws && this._ws.readyState === WebSocket.OPEN) { this._ws.close(code, reason); } } isConnected() { return this._ws?.readyState === WebSocket.OPEN; } emit(eventName, data) { window.dispatchEvent(new CustomEvent(eventName, { detail: data })); } } ``` 此段代码实现了带有自动重试机制的 WebSocket 客户端[^3]。每当连接断开时，客户端会在指定的时间间隔后再次尝试建立新的连接直到达到预设的最大重试次数为止。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丷丩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值