websocket 重连封装

/**

 * websocket 类

 *

 * 回调方法和原生websocket保持一致

 * @param {String} url 连接地址

 * @param {Boolean} isReconnect 是否包含重连机制

 *    定时向后端发送 'ping' 后端收到后返回对应值，以此检测连接是否在线

 *    如不在线则定时发起重连

 * @param {Object} options 配置参数

 * **/

class Ws {

  constructor(url, isReconnect = true, options = {}) {

    if (url) {

      if (typeof options === 'object') {

        this.opt = {

          url: url, // 连接地址

          // 心跳检测

          isReconnect: isReconnect, // 是否开启重连

          timeout: 4000, // 超时时间，超过后则发起重连

          pingString: 'ping', // 检测标识

          intervalStep: 3000, // 定时ping服务时间

          reconnectStep: 3000 // 设置重连间隔，防止重复连接

        }

        this.opt = {

          ...this.opt,

          ...options

        }

        this.lockReconnect = false // 重连锁，避免频繁重连

        this.isClose = false

        this.onopen = () => {} // 创建打开连接回调

        this.onmessage = () => {} // 收到消息通知的回调

        this.onclose = () => {} // 关闭连接的回调

        this.onerror = () => {} // 连接错误回调

        this.timeoutObj = null // 心跳检测计时器

        this.intervalObj = null // 定时发送计时器

        this.reconnectTimer = null // 避免重连锁

        this.createWs()

      } else {

        console.error('options need object')

      }

    } else {

      console.error('ur is required')

    }

  }

  // 创建ws

  createWs() {

    if (this.ws) {

      this.close()

    }

    this.ws = new WebSocket(this.opt.url)

    this.isClose = false

    this.setWsData()

    this.ws.onopen = () => {

      if (this.opt.isReconnect) {

        this.ping()

        this.reset().start()

      }

      this.onopen()

    }

    this.ws.onmessage = (data) => {

      if (this.opt.isReconnect && data.data === this.opt.pingString) {

        this.reset().start()

      } else {

        this.onmessage(data)

      }

    }

    this.ws.onclose = () => {

      if (this.opt.isReconnect) this.reconnect()

      this.onclose()

    }

    this.ws.onerror = () => {

      if (this.opt.isReconnect) this.reconnect()

      this.onerror()

    }

  }

  // 设置ws参数

  setWsData() {

    if (this.ws) {

      this.binaryType = this.ws.binaryType

      this.bufferedAmount = this.ws.bufferedAmount

      this.protocol = this.ws.protocol

      this.readyState = this.ws.protocol

    } else {

      this.binaryType = ''

      this.bufferedAmount = null

      this.protocol = ''

      this.readyState = null

    }

  }

  // 发送消息

  send(data) {

    this.ws.send(data)

    return this

  }

  // 关闭连接

  close() {

    this.isClose = true

    this.ws.close()

    return this

  }

  // 清除定时器

  clearTimer() {

    if (this.reconnectTimer) {

      clearTimeout(this.reconnectTimer)

    }

    if (this.timeoutObj) {

      clearTimeout(this.timeoutObj)

    }

    if (this.intervalObj) {

      clearTimeout(this.intervalObj)

    }

  }

  // 开启心跳

  start() {

    this.timeoutObj = setTimeout(() => {

      this.reconnect()

    }, this.opt.timeout)

    return this

  }

  // 重置心跳

  reset() {

    clearTimeout(this.timeoutObj)

    return this

  }

  // 重连

  reconnect() {

    if (this.isClose) {

      this.clearTimer()

      return

    }

    if (this.lockReconnect) return

    this.lockReconnect = true

    if (this.reconnectTimer) clearTimeout(this.reconnectTimer)

    this.reconnectTimer = setTimeout(() => {

      this.createWs()

      this.lockReconnect = false

    }, this.opt.reconnectStep)

    return this

  }

  // ping

  ping() {

    if (this.opt.isReconnect) {

      if (this.intervalObj) clearTimeout(this.intervalObj)

      this.intervalObj = setTimeout(() => {

        if (this.isClose) {

          this.clearTimer()

        } else {

          try {

            if (this.ws) {

              this.ws.send(this.opt.pingString)

              this.ping()

            }

          } catch (e) {

            console.info('ws ping error:', e)

          }

        }

      }, this.opt.intervalStep)

    }

  }

}