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

  1. 心跳检测机制
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" 响应时重置计数器

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

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

  1. 自动重连实现
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)
  }
}

重连机制的关键点:

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

使用定时器控制重连间隔

保持重连状态的跟踪

  1. 消息处理
javascript 复制代码
websocket.onmessage = (e: MessageEvent) => {
  const { data } = e

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

  if (receiveMessage) {
    receiveMessage(data)
  }
}

消息处理逻辑:

区分心跳响应和业务消息

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

相关推荐
爱编程的喵几秒前
深入理解JavaScript节流函数:从原理到实战应用
前端·javascript·html
尧木晓晓1 分钟前
开发避坑指南:Whistle 代理失效背后,localhost和 127.0.0.1 的 “爱恨情仇” 与终极解决方案
前端·javascript
abc237358176314 分钟前
静态路由综合实验
网络
风无雨33 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
你喜欢喝可乐吗?37 分钟前
RuoYi-Cloud 验证码处理流程
java·spring cloud·微服务·vue
三体世界1 小时前
TCP传输控制层协议深入理解
linux·服务器·开发语言·网络·c++·网络协议·tcp/ip
LuDvei1 小时前
CH9121T电路及配置详解
服务器·嵌入式硬件·物联网·网络协议·tcp/ip·网络安全·信号处理
aha-凯心1 小时前
前端学习 vben 之 axios interceptors
前端·学习
泷羽Sec-静安1 小时前
OSCP官方靶场-Solstice WP
服务器·网络·数据库
熊出没2 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf