websocket是网页端实现实时在线状态管理的核心技术，通过服务端校验凭证绑定用户、广播上下线事件、redis存储在线集合、前端响应式更新ui及断网兜底机制，构建闭环状态管理体系。
WebSocket 是网页端实现实时在线状态管理的核心技术，它能主动推送联系人上下线事件，避免轮询开销，让“绿色小圆点”真正实时响应。
建立稳定 WebSocket 连接并绑定用户身份
服务端需在握手阶段校验用户凭证（如 token），将连接与用户 ID 绑定；客户端连接时携带唯一标识（如 userId 或 sessionId），便于后续精准广播。连接成功后立即发送 {"type":"online","userId":"u1001"} 通知服务端本端上线。
- 前端用
new WebSocket("wss://chat.example.com")初始化，监听onopen后触发上线注册 - 服务端（如 Node.js + ws 库）在
connection事件中解析 URL 参数或 header 提取用户 ID，并存入内存 Map 或 Redis 的在线用户集合中 - 连接异常断开时，前端应在
onclose中延迟 3 秒重连（防抖），服务端需监听close事件并从在线集合中移除该用户
服务端统一维护在线状态并广播变更
所有用户上下线操作必须经由服务端原子处理：新用户上线 → 写入在线集合 → 广播给其好友；用户掉线 → 删除记录 → 广播离线事件。避免客户端直写状态，防止伪造和不一致。
- 使用 Redis 的
SET存储在线用户 ID（支持去重、快速查存），配合PUBLISH/SUBSCRIBE实现跨进程广播 - 当用户 A 上线，服务端查询 A 的好友列表（如从数据库或缓存），遍历向每个在线的好友连接推送
{"type":"status","target":"A","status":"online"} - 为减少冗余，可对同一用户的多次状态变更做合并（如 500ms 内连续掉线重连只发一次 online）
前端高效更新联系人列表 UI
收到状态消息后，不直接操作 DOM，而是更新本地状态对象（如 contacts[u1001].online = true），再触发响应式框架（Vue/React）或手动 diff 渲染，确保列表流畅无闪烁。
- 为每个联系人节点添加
data-user-id="u1001"属性，状态变更时仅更新对应节点的 class（如online/offline）和提示文案 - 对长时间未响应的连接（如心跳超时），前端可主动标记为“网络不稳定”，显示灰色问号图标，而非强制置为离线
- 首次加载联系人列表时，应通过 HTTP 接口拉取当前在线快照（
GET /api/online?ids=u1001,u1002...），再与 WebSocket 流同步，避免白屏等待
应对断网、重连与状态兜底
纯 WebSocket 无法保证 100% 可靠，需设计降级与恢复逻辑：断网期间缓存发信、重连后同步状态、本地维持最后已知状态（Last Known State）。
- 监听
window.onoffline和window.ononline，离线时禁用发送按钮，提示“网络不可用”，并将消息暂存localStorage - 重连成功后，先发送
{"type":"sync_status"}请求服务端补发错失的状态变更，再逐条发送离线期间缓存的消息 - 服务端可为每个用户维护一个轻量心跳通道（如每 15 秒 ping），客户端未响应 3 次即判定下线，避免“幽灵在线”
不复杂但容易忽略：在线状态本质是“服务端可信视图 + 前端及时渲染”的组合，关键不在连接本身，而在状态生命周期的闭环设计——从登录注册、变更广播、UI响应到断线兜底，每一步都需双向确认与容错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
