websocket的封裝1（做vue中的通信經常也是大概率用到的）

export default class WebSocketClass {



  constructor(url, msgCallback, time) {
    const
      IS_HTTPS = document.location.protocol.includes('https')  //容錯 http https
    const
      wsProtocol = IS_HTTPS ? 'wss://' : 'ws://'
    this.wsUrl = `${wsProtocol}${url}`
    this.msgCallback = msgCallback;
    this.time = time;     //心跳時間
    this.initTime = 5000   //重連時間
    this.init()
  }

  init(data) {

    let WSINWIN = 'WebSocket' in window
    if (!WSINWIN) {
      return console.log('Websocket not supported')
    }
    this.ws = new WebSocket(this.wsUrl);
   // console.log('new 成功');
    this.ws.onopen = () => {
      this.status = 'open';
      this.heartCheck();
      if(data){this.ws.send(data)}
    };

    this.ws.onmessage = e => {
      if (e.data === 'pong'){
        this.pingPong = 'pong'
      }else {
        this.msgCallback(e.data);
      }
    };

    this.ws.onclose = (e) => {
      clearInterval(this.pingInterval);
      clearInterval(this.pongInterval)
      if (this.status === 'close') {
        //console.log('手動關閉成功',new Date())
      }else{
        //console.log('非手動關閉,重新連接 relink',new Date());
        this.relink();  //非人為關閉進行重連
      }

    }

    this.ws.onerror = e => {
        console.log(e);
      this.relink()
    }
    return false
  }

  heartCheck() {          // 心跳
    this.pingPong = 'ping';
    let timer= this.time +1000
    this.pingInterval = setInterval(() => {
      if (this.ws.readyState === 1){
        //console.log('ping',new Date());
        this.ws.send('ping')
      }
    }, this.time);
    this.pongInterval = setInterval(() => {
      if (this.pingPong === 'ping'){
        //console.log('pong未返回,准備關閉',new Date());
        clearInterval(this.pingInterval);
        clearInterval(this.pongInterval)

        this.ws.close()
      }else{
        //console.log('pong',new Date());
        this.pingPong = 'ping'
      }
    }, timer)
  }

  sendHandle(data) {
    return this.ws.send(data);
  }

  relink() {
   // console.log('開始重新連接');
    if (this.status == 'open' && this.readyState == 1) {  //連接正常
      //console.log('狀態正常,無需重新連接',new Date());
      return
    }
    if (this.initTimeOut) { //定時器已經啟動
      //console.log('正在重連,定時器已啟動,退出',new Date());
      return;
    }
    this.initTimeOut = setTimeout(() => {
      //console.log('重新連接 初始化',new Date());
      clearInterval(this.pingInterval);
      clearInterval(this.pongInterval);
      this.initTimeOut = null;
      this.init();
    }, this.initTime)
  }

// 手動關閉WebSocket
  closeMyself() {
    console.log('執行手動關閉',new Date());
    this.status = 'close';
    this.ws.close();
  }
}