websocket初稿

import { eventHub } from '@/common/utils'

export class WebSocketClient {
  static STATUS = ['CONNECTING', 'OPEN', 'CLOSING', 'CLOSED']
  static MAX_RECONNECT_TIMES = 3
  static RECONNECT_TIME_INTERVAL = 5000

  constructor () {
    this.wasClean = null // Boolean. 是否正常断开。一般异常断开时，该值为false
    this.reconnectTimes = 0 // 第n次重连的flag
    this.messageHandler = {}
    this.createWebSocket()
    Object.defineProperties(this, {
      readyState: {
        enumerable: true,
        get: function () {
          return this.ws && this.ws.readyState
        }
      },
      status: {
        enumerable: true,
        get: function () {
          return (this.readyState && this.constructor.STATUS[this.readyState]) || 'UNCREATE'
        }
      }
    })
  }

  /** TODO:
   * @param isReconnected 该参数暂未使用
   */
  createWebSocket (isReconnected = false) {
    if ('WebSocket' in window) {
      if (!this.readyState || this.readyState === WebSocket.CLOSED) {
        let protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
        // Already include port
        const host = location.host
        const url = `${protocol}//${host}${process.env.VUE_APP_BASE_API}/api/ws`

        this.ws = new WebSocket(url)
        this.addEventsHandler()
      }
    } else {
      alert('您的浏览器不支持 WebSocket!')
    }
  }

  reconnectWebSocket (times = 0) {
    if (times < WebSocketClient.MAX_RECONNECT_TIMES) {
      console.log(`Try to reconnect the WebSocket after ${WebSocketClient.RECONNECT_TIME_INTERVAL / 1000} seconds.`)
      setTimeout((t) => {
        console.log(`${t + 1}th attempt to reconnect to WebSocket.`)
        this.reconnectTimes++
        this.createWebSocket(true)
      }, 5000, times)
    } else {
      console.error(`Could not create connection to Websocket server. Attempted reconnect ${WebSocketClient.MAX_RECONNECT_TIMES} times. Giving up.`)
    }
  }

  addEventsHandler () {
    this.ws.onopen = (event) => {
      this.wasClean = null
      this.reconnectTimes = 0 // 重连后重置
      console.log('The Websocket has opened.')
      this.send({ message: 'watch_capture', data: { sourceId: null, deployId: null } }) // hard code
    }
    this.ws.onmessage = (e) => {
      const data = JSON.parse(e.data)
      try {
        if (data.message && this.messageHandler[data.message]) {
          this.messageHandler[data.message](data)
        }
      } catch (e) {
        console.warn(e)
      }
      // Trigger a data.message event on the eventHub
      eventHub.$emit(data.message, data)
    }
    this.ws.onclose = (event) => {
      this.wasClean = !!event.wasClean
      if (this.wasClean) {
        console.log('The WebSocket connection has been closed normally.', event)
      } else {
        console.error('closed', event)
      }
    }
    this.ws.onerror = (err) => {
      console.error('The WebSocket connection has been closed due to an error', err)
      // this.ws = null
      this.reconnectWebSocket(this.reconnectTimes)
    }
  }

  registerHandler (msg, handle) {
    const handler = {}
    handler[msg] = handle
    Object.assign(this.messageHandler, handler)
  }

  cancelRegister (msg) {
    if (msg) {
      delete this.messageHandler[msg]
    }
  }

  /**
   * 1. 判断当前websocket的连接状态为OPEN状态时发送消息
   * 2. TODO: 当非OPEN状态时，判断是否为正常断开。当为异常断开时，重新连接，连接后再发送消息
   * @param { object } msg
   */
  send (msg) {
    if (this.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify(msg))
    }
  }

  close () {
    this.ws.close()
  }
}

自己封装的关于websocket的utils方法，仅供参考