websocket实现全双工实时通信，联系人分组同步依赖服务端统一维护状态并精准广播变更事件，客户端局部更新ui、用版本号兜底离线与冲突，并通过tabid协调多标签页连接。
WebSocket 可以实现客户端与服务端的全双工实时通信，联系人分组的实时同步关键在于：服务端统一维护分组状态，所有客户端通过 WebSocket 接收变更广播，本地高效更新 UI，避免轮询和状态不一致。
服务端统一管理分组状态并广播变更
服务端需维护一个中心化的分组数据结构（如 Map
{
"type": "GROUP_MEMBER_UPDATE",
"userId": "u1001",
"groupId": "g205",
"action": "ADDED", // 或 "REMOVED", "MOVED"
"timestamp": 1717023456789
}
注意：广播范围要精准——不是全量推送所有分组，而是只推影响当前操作的单个分组及其成员，降低带宽压力。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
客户端监听事件并局部更新 DOM
前端建立 WebSocket 连接后，注册 onmessage 回调，对 GROUP_MEMBER_UPDATE 类型消息做轻量解析，仅更新对应分组下的联系人列表节点，不重绘整个侧边栏。可结合 dataset 或 key 属性快速定位元素：
- 为每个联系人
- 标签添加 data-user-id 和 data-group-id 属性
- 收到 ADDED 消息时，查找目标分组容器，动态插入新
- 元素
- 收到 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 事件在同域多标签间共享轻量状态（如最后同步时间戳），减少冗余请求
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
