美文网首页
websocket类封装集成多事件派发

websocket类封装集成多事件派发

作者: lzy_9fff | 来源:发表于2021-09-28 11:35 被阅读0次

websocket根据事件名派发消息

class WebSocketX extends WebSocket {
  /**
   * 初始化构造
   * @param {*} url
   */
  constructor({ url }) {
    super(url);
    // this.url = url;
    // eventBusObject :{'001':[callback,callback],'002':[callback,callback],}
    this.eventBusObject = {};
    this.watchWebSocketEvent();
  }
  watchWebSocketEvent() {
    this.onopen = e => {
      this.socketOnopen(e);
    };
    this.onerror = e => {
      this.socketOnerror(e);
    };
    this.onclose = e => {
      this.socketOnclose(e);
    };
    this.onmessage = e => {
      this.socketOnmessage(e);
    };
  }
  /**
   * 连接成功
   */
  socketOnopen(e) {
    console.log("%cWBESOCKET::::::socketOnopen", "color:green");
  }
  /**
   * 连接出错
   */
  socketOnerror(e) {
    console.log("%cWBESOCKET::::::socketOnerror", "color:red");
  }
  /**
   * 连接已关闭
   */
  socketOnclose(e) {
    console.log("%cWBESOCKET::::::socketOnclose", "color:red");
    // 连接重连
    setTimeout(() => {
      this.initWebSocket(this.url);
    }, 2000);
  }
  /**
   * 监听socket事件,广播回调注册的事件
   * @param {*} e
   */
  socketOnmessage(e) {
    const resData = JSON.parse(e.data);
    const key = resData.key;
    if (this.eventBusObject[key]) {
      // 广播回调事件
      this.eventBusObject[key].forEach(callback => {
        callback(resData);
      });
    }
  }
  /**
   * 主动发送数据给服务器
   * @param {*} data
   */
  sendData(data) {
    this.socket.send(JSON.stringify(data));
  }
  /**
   * 添加监听的事件
   * @param {*} key
   * @param {*} callback
   */
  addEventListener(key, callback) {
    if (this.eventBusObject[key]) {
      this.eventBusObject[key].push(callback);
    } else {
      this.eventBusObject[key] = [callback];
    }
  }
  /**
   * 移除监听的事件
   * @param {*} key
   * @param {*} callback
   */
  removeEventListener(key, callback) {
    if (this.eventBusObject[key]) {
      const index = this.eventBusObject[key].findIndex(callback);
      index !== -1 && this.eventBusObject[key].splice(index, 1);
    }
  }
}
export default WebSocketX;

感谢,老铁的阅读,如果喜欢的,帮忙点个👍,你的支持我是前进的动力++

相关文章

网友评论

      本文标题:websocket类封装集成多事件派发

      本文链接:https://www.haomeiwen.com/subject/fdilnltx.html