websocket封裝

class SocketPlugin {
  constructor (param) {
    this.websocket = null
    this.isConnect = false
    this.timeoutNum = null
    this.isActivelyClose = false
    this.param = param
  }
 

  connect () {
    this.websocket = new WebSocket(this.param.url)
    this.initSocket(this.param)
  }
 

  initSocket (param) {
    this.isActivelyClose = false
 

    this.websocket.onclose = e => {
      console.log('websocket連接關閉~' + this.param.url)
      this.isConnect = false
      // 如果手動關閉則不進行重連
      if (!this.isActivelyClose) {
        this.reconnectSocket(param)
      }
    }
 

    this.websocket.onerror = e => {
      console.log('websocket發生異常~' + this.param.url + e)
      this.reconnectSocket(param)
    }
 

    this.websocket.onopen = () => {
      console.log('websocket已連接~ ' + this.param.url)
      this.isConnect = true
      if (param.hasOwnProperty('msg')) {
        this.send(param.msg || '')
      }
    }
 

    this.websocket.onmessage = e => {
      param.callback(JSON.parse(e.data))
    }
  }
 

  reconnectSocket (param) {
    if (this.isConnect === true) {
      return false
    }
    console.log('websocket 重新連接~ ')
    this.isConnect = true
    this.timeoutNum && clearTimeout(this.timeoutNum)
    this.timeoutNum = setTimeout(() => {
      this.connect(param)
      this.isConnect = false
    }, 1000)
  }
 

  /**
   * // websocket連接狀態下才能進行send
   * @param {*} msg
   * 向服務send的消息
   */
  send (msg) {
    this.websocket.send(JSON.stringify(msg))
  }
 

  close () {
    this.isActivelyClose = true
    if (this.websocket) {
      this.websocket.close()
    }
  }
}
 

export default SocketPlugin

使用：

let  socketConfig: {
        url: '/ints/websocket/test',
        callback: this.getSocketMsg,
        msg: {
          fanId: '01'
        }
     }
 
let  testSocket = new SocketPlugin(socketConfig)
// 初始化
testSocket .connect()
// 發送消息
testSocket .send(socketConfig.msg)
// 關閉
testSocket .close()