WebSocket通过持久连接与服务端主动推送实现毫秒级实时更新，替代轮询；需维护会话映射、绑定用户身份、支持定向/广播；前端应局部更新、管理连接生命周期、定义结构化协议。
WebSocket 在 Web 应用中实现实时数据更新，核心在于建立持久连接 + 服务端主动推送 + 前端局部响应，彻底替代“请求-等待-刷新”的被动模式。它不是增强版 HTTP，而是一种通信范式的切换：从“客户端问、服务器答”，变成“双方随时可说”。
服务端主动推送才是实时性的关键
轮询依赖前端定时拉取，延迟由间隔决定（如每2秒一次），且大量请求可能返回空数据，浪费带宽和资源。WebSocket 连接建立后，服务端一旦有新数据（比如订单状态变更、传感器读数更新、行情跳动），立即封装消息推送给指定客户端，毫秒级触达。例如金融行情场景中，后端检测到价格变动，无需等待前端发起请求，直接通过 session.getBasicRemote().sendText(...) 发送 JSON 数据。
- 避免“漏推”：服务端需维护在线会话映射（如
ConcurrentHashMap<userId, Session>），确保消息精准送达目标用户 - 避免“错推”：在
@OnOpen阶段解析并绑定用户身份（如从 token 或 URL 参数提取 userId），不依赖后续消息携带身份信息 - 支持广播与定向：既可向全体推送（如系统公告），也可按业务维度筛选会话（如某车间所有设备监控页面）
前端轻量接收，避免重渲染开销
前端不再需要反复调用 fetch 或 axios，而是监听 ws.onmessage 事件。收到数据后，应聚焦于最小粒度更新：不是重新渲染整个组件，而是仅修改图表数据点、插入新通知 DOM 节点、或更新 React 状态中的特定字段。
WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。
- 图表类场景（如 Recharts / Highcharts）：调用
chart.series[0].addPoint(value, true, true)，第三个true表示自动移除最旧点，保持固定窗口长度 - 列表类场景（如消息中心）：用
Array.unshift()插入新消息，配合key={msg.id}保证 React Diff 高效 - 状态类场景（如在线人数）：直接
setState({ onlineCount: data.count })，不触发无关子组件重绘
连接生命周期管理不可忽视
WebSocket 是长连接，但并非永不中断。网络抖动、页面切换、服务重启都可能导致断连。健壮的实现必须包含显式的状态维护和恢复逻辑：
- 连接建立后启动心跳（如每30秒发
ping帧），服务端响应pong，超时则判定断连 - 前端监听
onclose和onerror，触发自动重连（带退避策略，如首次1s、二次2s、三次4s） - 页面卸载前主动
ws.close()，防止残留连接占用服务端资源 - 服务端在
@OnClose中清理对应 session 引用，避免内存泄漏
协议设计要兼顾扩展性与容错性
原始 WebSocket 传输的是裸字符串或 ArrayBuffer，真实项目需定义轻量应用层协议。推荐采用结构化方式，例如：
- 统一 JSON 格式：
{"type":"data","id":"order_123","payload":{"status":"shipped"}} - 区分消息类型：
"type":"auth"（认证）、"type":"control"（播放/暂停指令）、"type":"diff"（差分更新） - 携带序列号或时间戳：便于前端做去重、排序或断网重连后的数据补偿
- 对二进制大帧（如 Lottie 动画）启用分片传输，并附带校验和（如 CRC32），保障完整性
