WebSocket不支持网络切换自动迁移，需前端检测网络变化并实现带指数退避的重连机制，同时同步服务端状态与维护未确认消息队列。
WebSocket 本身不支持网络切换时的自动迁移。当设备从 WiFi 切换到 4G（或反之），底层 TCP 连接会中断，WebSocket 连接随之关闭，浏览器不会自动重连或迁移连接。真正的“自动迁移”需由前端主动检测、断开并重建连接。
检测网络变化并触发重连
利用 window.navigator.onLine 和 online/offline 事件可感知网络状态切换：
- 监听
window.addEventListener('online', ...)和'offline'事件，但注意：该 API 仅反映浏览器是否认为联网，并不保证 WebSocket 可用（例如 WiFi 已连但无外网） - 更可靠的做法是结合心跳失败 + 网络事件：当心跳超时或
onclose触发时，检查navigator.onLine；若为true则立即尝试重连，否则等待online事件后再重连
实现带退避策略的健壮重连
避免频繁无效重试，应采用指数退避（exponential backoff）：
- 首次失败后延迟 1s 重连，第二次 2s，第三次 4s……上限建议设为 30s
- 每次重连前清除上一个定时器，防止多个重连任务并发
- 记录重连次数，达到阈值（如 10 次）后暂停自动重连，提示用户手动操作
连接重建时保持业务上下文
单纯重连 WebSocket 不等于恢复通信能力，还需同步服务端状态：
- 在
onopen后发送认证 token 或 session ID，确保服务端识别同一逻辑连接 - 客户端维护已发送但未确认的消息队列（如使用消息 ID + ACK 机制），重连后重新投递未确认消息
- 若业务依赖序列号或游标（如消息同步点），应在重连握手阶段向服务端提交最后接收的
last_seq或cursor，请求增量补发
补充体验优化建议
提升用户对网络切换的感知与容错性：
- 连接断开时显示轻量提示（如顶部横幅“网络不稳定，正在重连…”），成功后自动隐藏
- 禁用依赖实时连接的功能按钮（如发送消息），直到
readyState === WebSocket.OPEN - 在开发阶段用 Chrome DevTools 的 “Throttling → Offline / 4G” 模拟切换场景，验证重连逻辑是否稳定
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
