lilishop-uniapp/utils/socket_service.js

import store from '@/store/index'
import config from '@/config/config.js'
import storage from './storage';
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;

  //  定义连接服务器的方法
  connect () {
    // 连接服务器
    if (!window.WebSocket) {
      return console.log("您的浏览器不支持WebSocket");
    }
    this.ws = new WebSocket(config.baseWsUrl + '/' + storage.getAccessToken());
    // 连接成功的事件
    this.ws.onopen = () => {
      console.log("连接服务端成功");
      this.connected = true;
      // 重置重新连接的次数
      this.connectRetryCount = 0;
    };
    //  1.连接服务端失败
    //   2.当连接成功之后, 服务器关闭的情况(连接失败重连)
    this.ws.onclose = () => {
      console.log("连接服务端失败");
      this.connected = false;
      this.connectRetryCount++;
      setTimeout(() => {
        this.connect();
      }, 500 * this.connectRetryCount);
    };
    // 得到服务端发送过来的数据
    this.ws.onmessage = (msg) => {
      // console.log(msg.data)
      this.registerCallBack(msg.data);
    };
  }
  // 回调函数的注册
  registerCallBack (callBack) {
    // console.log("回调函数的注册", callBack);
    this.callBackMapping = callBack;
  }

  // 取消某一个回调函数
  unRegisterCallBack (callBack) {
    console.log("取消某一个回调函数", callBack);
    this.callBackMapping = null;
  }

  // 发送数据的方法
  send (data) {
    // 判断此时此刻有没有连接成功
    if (this.connected) {
      this.sendRetryCount = 0;
      this.ws.send(data);
    } else {
      this.sendRetryCount++;
      setTimeout(() => {
        this.send(data);
      }, this.sendRetryCount * 500);
    }
  }
}