websocket实现自动链接、心跳

参数说明

/**
 * @module initWebSocket 初始化
 * @module websocketonopen 连接成功
 * @module websocketonerror 连接失败
 * @module websocketclose 断开连接
 * @module resetHeart 重置心跳
 * @module sendSocketHeart 心跳发送
 * @module reconnect 重连
 * @module sendMsg 发送数据
 * @module websocketonmessage 接收数据
 * @module test 测试收到消息传递
 * @description socket 通信
 * @param {string} url socket地址
 * @param {WebSocket} websocket websocket 实例
 * @param {NodeJS.Timer} heartTime 心跳定时器实例
 * @param {number} socketHeart 心跳次数
 * @param {number} HeartTimeOut 心跳超时时间
 * @param {number} socketError 错误次数
 */

配置全局参数

下面展示一些 设局参数配置。

let socketUrl = '' // socket地址
let websocket: WebSocket // websocket 实例
let heartTime: NodeJS.Timer // 心跳定时器实例
let socketHeart = 0 // 心跳次数
const HeartTimeOut = 10000 // 心跳超时时间 10000 = 10s
let socketError = 0 // 错误次数

初始化webSocket

function initWebSocket(url: string) {
  socketUrl = url
  // 初始化 websocket
  websocket = new WebSocket(`${url}?Authorization=token&clientid=clientid`)
  websocketonopen()
  websocketonmessage()
  websocketonerror()
  websocketclose()
  sendSocketHeart()
  return websocket
}

对应方法

// socket 连接成功
export function websocketonopen() {
  websocket.onopen = function () {
    console.log('连接 websocket 成功')
    resetHeart()
  }
}

// socket 连接失败
export function websocketonerror() {
  websocket.onerror = function (e: Event) {
    console.error('连接 websocket 失败', e)
  }
}

// socket 断开链接
export function websocketclose() {
  websocket.onclose = function (e: Event) {
    console.log('断开连接', e)
  }
}

// socket 重置心跳
export function resetHeart() {
  socketHeart = 0
  socketError = 0
  clearInterval(heartTime)
  sendSocketHeart()
}

// socket心跳发送
export function sendSocketHeart() {
  heartTime = setInterval(() => {
    // 如果连接正常则发送心跳
    if (websocket.readyState === 1) {
      // if (socketHeart <= 30) {
      websocket.send(
        JSON.stringify({
          type: 'ping',
        }),
      )
      socketHeart = socketHeart + 1
    }
    else {
      // 重连
      reconnect()
    }
  }, HeartTimeOut)
}

// socket重连
export function reconnect() {
  if (socketError <= 2) {
    clearInterval(heartTime)
    initWebSocket(socketUrl)
    socketError = socketError + 1
    console.log('socket重连', socketError)
  }
  else {
    console.log('重试次数已用完')
    clearInterval(heartTime)
  }
}

// socket 发送数据
export function sendMsg(data: string) {
  websocket.send(data)
}

// socket 接收数据
export function websocketonmessage(callback?: (e: MessageEvent) => void) {
  websocket.onmessage = function (e: MessageEvent) {
    const data = e.data
    if (data.includes('heartbeat')) {
      resetHeart()
      return
    }
    if (data.includes('ping')) {
      return
    }
    callback?.(e)
    const msg = data ? JSON.parse(data).msgContent : ''
    ElNotification({
      title: '消息',
      message: msg,
      type: 'success',
      dangerouslyUseHTMLString: true,
      duration: 3000,
    })

    return msg
  }
}