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 元素，并做防抖更新（避免高频重绘卡顿）。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 连接前建议加协议判断：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 分离逻辑

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！