封装WebSocket

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

设计思路

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

  • 集成了心跳机制检测连接状态
  • 实现了自动重连逻辑
  • 提供了简洁的 API 接口
  • 支持自定义配置参数(如重连次数、心跳间隔等)

关键功能分析

1. 初始化与连接管理

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 实例的创建和事件绑定

2. 心跳检测机制

scss 复制代码
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)
}

心跳机制的工作流程:

  1. 定期发送 "ping" 消息
  2. 接收到 "pong" 响应时重置计数器
  3. 连续多次未收到响应时触发重连
  4. 使用指数退避算法避免频繁重连

3. 自动重连实现

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)
  }
}

重连机制的关键点:

  • 限制最大重连次数,避免无限重试
  • 使用定时器控制重连间隔
  • 保持重连状态的跟踪

4. 消息处理

kotlin 复制代码
websocket.onmessage = (e: MessageEvent) => {
  const { data } = e

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

  if (receiveMessage) {
    receiveMessage(data)
  }
}

消息处理逻辑:

  • 区分心跳响应和业务消息
  • 通过回调函数将消息传递给上层应用
相关推荐
雪碧聊技术19 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了21 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00002 小时前
Vue组件通信方式详解
前端·面试
呆呆的心2 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm2 小时前
Dioxus 与数据库协作
前端·rust