vue请求封装不支持长连接，需用websocket实现；核心是封装websocket实例，通过心跳检测、错误监听、状态恢复及消息队列保障健壮性。
Vue 请求封装本身不支持长连接，WebSocket 才是实现长连接的正确方式。所谓“Vue 请求封装做心跳和重连”，本质是封装 WebSocket 实例，而非基于 axios/fetch 的 HTTP 封装。核心在于：用原生 WebSocket 建立持久通道，再通过定时心跳 + 错误监听 + 状态恢复机制保障连接健壮性。
WebSocket 连接状态与自动重连控制
连接不能只靠 new WebSocket() 一次调用，必须管理生命周期和失败响应：
- 监听 onclose 和 onerror 事件，触发重连逻辑，而不是依赖页面手动重试
- 设置最大重连次数（如 5 次）和退避间隔（如从 1s → 2s → 4s 递增），避免高频无效请求压垮服务端
- 重连前清空旧 socket 实例并关闭定时器，防止多个 socket 并存或定时器堆积
- 连接成功后重置重连计数器，并标记 isConnected = true，供组件响应式读取
心跳检测机制的设计要点
心跳不是“发 ping 就完事”，关键在双向确认与超时判定：
- 客户端每 30 秒发送一次 ping（可自定义内容，如 { type: 'ping' }），服务端需明确返回 pong 或同结构响应
- 启动独立心跳定时器，且仅在 socket.readyState === 1（OPEN）时发送，避免连接未建立就发包
- 设置心跳超时计时器（如 10 秒），若未收到服务端响应则主动 close()，触发 onclose 流程进入重连
- onmessage 中过滤掉 ping/pong 类消息，不向业务层透出，保持消息处理纯净
消息队列与离线缓存策略
网络波动期间发不出的消息不能丢，得暂存并择机重发：
- send 方法内部判断 isConnected，若未连接则 push 到 messageQueue 数组，不报错也不静默丢弃
- 连接恢复（onopen）后立即 flush 队列：逐条调用 socket.send，避免批量发送导致阻塞或顺序错乱
- 对关键操作（如订单提交、状态变更）可额外加本地 localStorage 缓存 + 唯一 ID 标记，重连后比对服务端是否已处理，防止重复提交
Vue 响应式集成与跨组件共享
让整个应用能统一访问同一个 WebSocket 实例，避免多处重复连接：
- 使用 provide/inject 或 Pinia store 将 WebSocket 实例和状态（isConnected、messageQueue）全局暴露
- 在 setup 中调用 useWebSocket(url) 返回组合式函数，内部用 ref/reactive 管理响应式数据
- 组件卸载时（onUnmounted）自动调用 close() 并清理所有定时器，防止内存泄漏
- 提供统一的 onMessage 注册机制，支持多组件监听不同消息类型，类似 event bus 但基于真实连接
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
