简单封装一个websocket构造函数

news2025/2/23 0:02:21

问题描述

最近维护一个老项目，发现项目中有大量重复代码，特别是websocket的调用这一块，同样的代码复制了十几个页面，于是自己封装了一个websocket调用的构造函数。

export default class CreateWebSocket {
  constructor(url) {
    // ws地址
    this.url = url;
    // 定义ws对象
    this.ws = null;
    // ws定时器
    this.wsTimer = null;
    this.onDataReceived = null;
    this.wsInit();
  }

  // 初始化ws
  wsInit = () => {
    // 销毁ws
    this.wsDestroy();
    // 初始化ws
    this.ws = new WebSocket(this.url);
    // ws连接建立时触发
    this.ws.addEventListener("open", this.wsOpenHanler);
    // ws服务端给客户端推送消息
    this.ws.addEventListener("message", this.wsMessageHanler);
    // ws通信发生错误时触发
    this.ws.addEventListener("error", this.wsErrorHanler);
    // ws关闭时触发
    this.ws.addEventListener("close", this.wsCloseHanler);
  };
  wsOpenHanler = (event) => {
    console.log("ws建立连接成功");
  };
  wsMessageHanler = (e) => {
    console.log("接收数据", e);
    //方法1
    // var event = new CustomEvent("onMessage", { detail: e });
    // this.ws.dispatchEvent(event);

    //方法2
    this.onDataReceived && this.onDataReceived(e);
  };
  getData = (callback) => {
    this.onDataReceived = callback;
  };
  //断开重连
  reconnect = () => {
    this.wsTimer && clearTimeout(this.wsTimer);
    this.wsTimer = setTimeout(() => {
      this.wsInit();
    }, 5000);
  };

  wsErrorHanler = (event) => {
    console.log(event, "通信发生错误");
    this.reconnect();
  };
  wsCloseHanler = (event) => {
    console.log(event, "ws连接关闭");
    this.reconnect();
  };
  wsDestroy = () => {
    if (this.MyWebSocket !== null) {
      this.ws.removeEventListener("open", this.wsOpenHanler);
      this.ws.removeEventListener("message", this.wsMessageHanler);
      this.ws.removeEventListener("error", this.wsErrorHanler);
      this.ws.removeEventListener("close", this.wsCloseHanler);
      this.ws.close();
      this.ws = null;
      this.wsTimer && clearTimeout(this.wsTimer);
    }
  };
}

页面调用

const socket = new Create('ws://190.201.8.203:80');
//方法一
socket.ws.addEventListener('onMessage', (event) => {
    //此处写接收到数据后的处理逻辑            
})
//方法二
socket.getData(data=>{
   //此处写接收到数据后的处理逻辑
})