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

消息处理逻辑:

区分心跳响应和业务消息

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

相关推荐
在钱塘江2 分钟前
《你不知道的JavaScript-上卷》-笔记-5-作用域闭包
前端
搬砖码3 分钟前
Vue病历写回功能:实现多输入框内容插入与焦点管理🚀
前端
不简说7 分钟前
史诗级更新!sv-print虽然不是很强,但却是很能打的设计器组件
前端·产品
用户95251151401558 分钟前
最常用的JS加解密场景MD5
前端
Hilaku9 分钟前
“虚拟DOM”到底是什么?我们用300行代码来实现一个
前端·javascript·vue.js
打好高远球15 分钟前
mo契官网建设与SEO实践
前端
神仙别闹21 分钟前
基于Java+MySQL实现(Web)可扩展的程序在线评测系统
java·前端·mysql
Muisti34 分钟前
NAT技术(网络地址转换)
网络·计算机网络·智能路由器
心.c35 分钟前
react当中的this指向
前端·javascript·react.js
Java水解42 分钟前
Web API基础
前端