WebSocket实现全双工实时通信，联系人分组同步依赖服务端统一维护状态并精准广播变更事件，客户端局部更新UI、用版本号兜底离线与冲突，并通过tabId协调多标签页连接。
WebSocket 可以实现客户端与服务端的全双工实时通信，联系人分组的实时同步关键在于：服务端统一维护分组状态，所有客户端通过 WebSocket 接收变更广播，本地高效更新 UI，避免轮询和状态不一致。
服务端统一管理分组状态并广播变更
服务端需维护一个中心化的分组数据结构（如 Map<userId, List<groupId>>），每次用户执行“加入/退出/移动分组”操作时，服务端完成数据库持久化后，向该用户的全部在线连接（可能多端登录）及所属分组内其他成员广播标准化事件。例如发送 JSON：
{
"type": "GROUP_MEMBER_UPDATE",
"userId": "u1001",
"groupId": "g205",
"action": "ADDED", // 或 "REMOVED", "MOVED"
"timestamp": 1717023456789
}
注意：广播范围要精准——不是全量推送所有分组，而是只推影响当前操作的单个分组及其成员，降低带宽压力。
客户端监听事件并局部更新 DOM
前端建立 WebSocket 连接后，注册 onmessage 回调，对 GROUP_MEMBER_UPDATE 类型消息做轻量解析，仅更新对应分组下的联系人列表节点，不重绘整个侧边栏。可结合 dataset 或 key 属性快速定位元素：
立即学习“前端免费学习笔记（深入）”；
- 为每个联系人 <li> 标签添加 data-user-id 和 data-group-id 属性
- 收到 ADDED 消息时，查找目标分组容器，动态插入新 <li> 元素
- 收到 REMOVED 消息时，用 querySelector 移除对应 data-user-id 的元素
- 使用 requestIdleCallback 或防抖确保高频变更下 UI 更新不卡顿
处理离线与冲突：用版本号+本地缓存兜底
纯 WebSocket 无法保证消息必达，需增强鲁棒性：
- 服务端在每次分组变更时递增全局 version 字段，并随事件下发
- 客户端存储本地分组快照及最新 version；收到消息先比对 version，跳过旧消息
- 页面初始化时先发 HTTP 请求拉取当前分组快照（含 version），再开启 WebSocket，避免启动时状态缺失
- 若连续丢失 3 条以上事件，主动触发一次全量同步请求，防止累积偏差
多标签页场景下的连接协调
同一用户在多个浏览器标签打开聊天页时，需避免重复响应或状态混乱：
- WebSocket 连接建立后，客户端立即发送 AUTH 消息，携带 userId 和唯一 tabId（如 crypto.randomUUID()）
- 服务端记录每个 userId 对应的活跃 tabId 列表，GROUP_MEMBER_UPDATE 广播时排除已失效 tabId
- 前端监听页面 visibilitychange，tab 失焦时暂停非关键消息处理，聚焦时校验本地状态是否滞后
- 使用 localStorage + storage 事件在同域多标签间共享轻量状态（如最后同步时间戳），减少冗余请求
