封装WebSocket - 技术栈

一个基于原生 WebSocket 的封装库，实现了自动重连、心跳检测等功能，用于在前端应用中稳定地与后端 WebSocket 服务通信。下面从设计思路、关键功能等方面进行详细分析：

设计思路

这个封装库采用单例模式设计，全局维护一个 WebSocket 实例，通过状态管理和事件监听实现高可用的通信连接。主要特点包括：

集成了心跳机制检测连接状态

实现了自动重连逻辑

提供了简洁的 API 接口

支持自定义配置参数（如重连次数、心跳间隔等）

关键功能分析

初始化与连接管理

javascript 复制代码

init: (receiveMessage: Function | null) => {
  // 检查浏览器支持
  if (!('WebSocket' in window)) {
    console.error('浏览器不支持WebSocket')
    return null
  }

  // 构建连接URL，携带用户认证信息
  socket.connectURL = `ws://${location.host}/api/websocket/connect?Authorization=${
    useUserStore().token
  }`

  // 创建WebSocket实例并绑定事件
  socket.websocket = socket.websocket || new WebSocket(socket.connectURL)
  
  // 绑定事件处理函数...
}

这部分代码完成了：

浏览器兼容性检查

连接 URL 构建，从用户状态中获取认证 token

WebSocket 实例的创建和事件绑定

心跳检测机制

javascript 复制代码

heartbeat: () => {
  if (socket.heartbeatTimer) {
    clearInterval(socket.heartbeatTimer)
  }
  socket.heartbeatTimer = setInterval(() => {
    if (socket.heartbeatCurrent > socket.heartbeatCount) {
      clearInterval(socket.heartbeatTimer)
      socket.reconnect()
    } else {
      socket.send('ping')
      socket.heartbeatCurrent++
    }
  }, socket.heartbeatInterval)
}

心跳机制的工作流程：

定期发送 "ping" 消息

接收到 "pong" 响应时重置计数器

连续多次未收到响应时触发重连

使用指数退避算法避免频繁重连

自动重连实现

javascript 复制代码

reconnect: () => {
  if (socket.isReconnect) {
    socket.reconnectTimer = setTimeout(() => {
      if (socket.reconnectCurrent >= socket.reconnectCount) {
        socket.isReconnect = false
        return
      }
      
      socket.reconnectCurrent++
      console.log('websocket正在重新连接')
      socket.init(null)
    }, socket.reconnectInterval)
  }
}

重连机制的关键点：

限制最大重连次数，避免无限重试

使用定时器控制重连间隔

保持重连状态的跟踪

消息处理

javascript 复制代码

websocket.onmessage = (e: MessageEvent) => {
  const { data } = e

  // 心跳检测
  if (data === 'pong') {
    socket.heartbeatCurrent = 0
    return
  }

  if (receiveMessage) {
    receiveMessage(data)
  }
}

消息处理逻辑：

区分心跳响应和业务消息

通过回调函数将消息传递给上层应用