WebSocket因低延迟、全双工、单连接复用和轻量帧结构，适合股票行情等高频实时场景；前端用new WebSocket连接并防抖更新DOM；需手动指数退避重连、快照补发及Nginx配置支持。
WebSocket 是 HTML5 提供的全双工通信协议，特别适合股票行情这类需要低延迟、高频更新的实时数据场景。相比传统轮询或长轮询，它能显著降低服务器压力和网络开销，让前端页面真正“主动”接收推送，而非被动等待。
为什么用 WebSocket 而不是 AJAX 轮询？
股票行情每秒可能变动数十次。若用 AJAX 每 100ms 请求一次，不仅造成大量无效 HTTP 头开销，还容易因请求堆积、超时、丢帧导致数据滞后或错乱。WebSocket 建立连接后，服务端可随时向客户端精准推送最新价格、涨跌幅、成交量等字段，延迟通常控制在毫秒级。
- 单连接复用：避免反复建立 HTTP 连接的握手开销
- 轻量帧结构：消息体无 HTTP 头，传输更紧凑
- 服务端主动推送：行情变化即达前端，无 polling 延迟
前端如何连接并处理行情数据？
使用 new WebSocket(url) 创建实例，监听 onopen、onmessage、onerror 和 onclose 事件即可。关键点在于：解析服务端推送的 JSON 数据，按股票代码映射到对应 DOM 元素，并做防抖更新（避免高频重绘卡顿）。
- 连接前建议加协议判断：wss://（生产环境必须用加密连接）
-
onmessage 中用 JSON.parse(event.data) 解析行情对象，如
{symbol: "600519", price: 1725.3, change: -8.2} - 更新 DOM 时优先用 requestAnimationFrame 批量刷新，减少 layout thrashing
如何保障连接稳定与数据连续性？
网络波动或页面休眠可能导致 WebSocket 断连。不能只依赖浏览器自动重连——需前端实现带退避策略的手动重连机制，并配合服务端的行情快照补发能力。
立即学习“前端免费学习笔记（深入）”；
- 断连后按指数退避重试（如 1s → 2s → 4s → 8s）
- 重连成功后，先拉取一次全量快照（snapshot），再订阅增量更新
- 本地缓存最近一条行情时间戳，收到旧数据时直接丢弃，防止倒灌
实际部署要注意哪些坑？
开发时用 ws://localhost:8080 很方便，但上线必须面对跨域、反向代理、SSL 终结等问题。Nginx 需显式开启 WebSocket 支持，否则连接会在 60 秒后静默关闭。
- Nginx 配置中添加：
proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; - 移动端 WebView（尤其 iOS）对 wss 连接较敏感，建议增加心跳保活（每 30 秒 send() 空消息）
- 避免在 onmessage 里执行耗时操作（如复杂计算或同步 DOM 遍历），可用 Web Worker 分离逻辑
