JS封装Websoecket类

其他模块导入即可

export default class SocketService {
  static instance = null;
  static get Instance() {
    if (!this.instance) {
      this.instance = new SocketService();
    }
    return this.instance;
  }
  // 和服务端连接的socket对象
  ws = null;
  // 存储回调函数
  callBackMapping = {};
  // 标识是否连接成功
  connected = false;
  // 记录重试的次数
  sendRetryCount = 0;
  // 重新连接尝试的次数
  connectRetryCount = 0;
  //  定义连接服务器的方法
  close() {
    if (this.ws !== null) {
      this.ws.close();
    }
  }
  connect() {
    // 连接服务器
    if (!window.WebSocket) {
      return console.log('您的浏览器不支持WebSocket');
    }
    let url = '测试url';
    this.ws = new WebSocket(url);
    // 连接成功的事件
    this.ws.onopen = () => {
      console.log('连接服务端成功了');
      this.connected = true;
      // 重置重新连接的次数
      this.connectRetryCount = 0;
      let classSocket = localStorage.getItem('classSocket');
      setTimeout(() => {
        this.send(classSocket);
      }, 600);
    };
    // 1.连接服务端失败
    // 2.当连接成功之后, 服务器关闭的情况
    this.ws.onclose = () => {
      console.log('连接服务端失败');
      this.connected = false;
      this.connectRetryCount++;
      setTimeout(() => {
        this.connect();
      }, 500 * this.connectRetryCount);
    };
    // 得到服务端发送过来的数据
    this.ws.onmessage = (evt) => {
      const res = evt.data;
      var arrall = [];
      var arr = res.split('{"cmd_code"');
      console.log(arr);
      if (arr.length > 0) {
        arr.forEach(element => {
          if (element) {
            let arr = element
            arrall.push(JSON.parse('{"cmd_code"' + arr));
          }
        });
      }
      arrall.forEach(item1 => {
        const socketType = item1.message_type;
        console.log(socketType);
        console.log(item1);
        if (this.callBackMapping[socketType]) {
          // const realData = msg.data // 得到该图表的数据
          this.callBackMapping[socketType].call(this, item1)
        }
      })
    };
  }
  // 回调函数的注册
  registerCallBack(socketType, callBack) {
    this.callBackMapping[socketType] = callBack;
  }
  // 取消某一个回调函数
  unRegisterCallBack(socketType) {
    this.callBackMapping[socketType] = null;
  }
  // 发送数据的方法
  send(data) {
    // 判断此时此刻有没有连接成功
    if (this.connected) {
      this.sendRetryCount = 0;
      try {
        console.log(data);
        this.ws.send(data);
        console.log(this.ws)
      } catch (e) {
        this.ws.send(data);
        console.log(this.ws)
      }
    } else {
      this.sendRetryCount++;
      setTimeout(() => {
        this.send(data);
      }, this.sendRetryCount * 500);
    }
  }
}