WebSocket与IndexedDB协同实现在线同步与离线可用：WebSocket负责实时通信并管理连接状态，IndexedDB结构化存储消息并兜底收发，页面加载时优先读取本地数据恢复界面。
WebSocket 负责实时收发消息，IndexedDB 负责在用户断网或关闭页面时持久化保存聊天记录——两者配合能实现「在线同步 + 离线可用」的完整体验。关键不在单独用哪个 API，而在消息生命周期中的合理分工与状态协同。
WebSocket 建立连接并监听消息流
WebSocket 提供全双工通信通道，适合持续接收服务端推送的聊天消息。需注意连接状态管理，避免重复连接或静默失败：
- 用 onopen 确认连接就绪后才允许发送消息
- 用 onmessage 接收新消息，并立即写入 IndexedDB（无论是否在线）
- 用 onclose 和 onerror 捕获异常，触发重连逻辑或本地缓存待发消息
IndexedDB 存储结构设计要适配聊天场景
不要把整条消息当黑盒存，应拆解关键字段便于查询和渲染：
- 建一个名为 chat_records 的 objectStore，主键设为自增 id 或组合键（如 timestamp + senderId）
- 每条记录至少包含：senderId、receiverId、content、timestamp、status（如 "sent" / "received" / "pending"）
- 添加 index：按 receiverId + timestamp 建复合索引，方便快速拉取某会话的历史消息
离线消息的双向处理：收与发都要兜底
用户断网时，不能丢消息，也不能卡界面：
- 接收侧：WebSocket 断开期间，服务端可暂存消息；恢复连接后通过「同步接口」拉取未读，再逐条存入 IndexedDB
- 发送侧：用户点击发送但 WebSocket 未就绪时，先将消息（含内容、时间、目标 ID）存入 IndexedDB，标记 status = "pending"；连接恢复后遍历 pending 记录，逐条重发，成功后更新 status 为 "sent"
页面加载时从 IndexedDB 快速恢复聊天界面
用户刷新或重进页面，应无缝展示最近会话，不依赖网络请求：
- 初始化阶段优先打开 IndexedDB，用 IDBIndex.openCursor() 按时间倒序查最新 50 条目标会话消息
- 渲染前检查每条记录的 status：pending 消息显示「发送中」图标，失败则提供重试按钮
- 若 WebSocket 尚未连接，先渲染本地数据，连接成功后再拉取服务器最新消息做去重合并（例如比对 timestamp 和 id）
不复杂但容易忽略：WebSocket 关闭时别直接清空 pending 队列；IndexedDB 写入要加 error 处理，失败时需降级到 localStorage 简单备份；消息时间戳统一用服务端下发，避免客户端时钟偏差导致排序错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
