websocket是网页端实现股票行情秒级实时推送最直接高效的方式，通过全双工长连接避免http轮询延迟，前端需用wss://建立连接并实现重连，后端按订阅精准广播，推荐二进制协议优化性能，部署时需配置nginx、集群与合规审计。
WebSocket 是网页端实现股票行情秒级实时推送最直接、高效的方式。它建立浏览器与服务器之间的全双工长连接，避免 HTTP 轮询的延迟和开销，天然适合高频、低延迟的行情数据流（如沪深 Level-1 行情、逐笔成交、五档盘口）。
一、前端：建立并管理 WebSocket 连接
使用原生 WebSocket API 即可，无需额外库。关键点在于连接地址（需 wss://）、重连机制、消息解析和错误处理：
- 用
wss://（非 ws://）确保生产环境 HTTPS 页面下能正常连接 - 行情服务通常要求鉴权，可在 URL 中携带 token 或在首次消息中发送认证包（如
{"type":"auth","token":"xxx"}） - 监听
onmessage，对二进制数据（如 Protocol Buffer 或自定义二进制帧）需用responseType = 'arraybuffer'；若为 JSON 文本，直接JSON.parse(e.data) - 主动监听
onclose和onerror，实现指数退避重连（如 1s → 2s → 4s → 最大 30s）
二、后端：推送逻辑与数据组织
服务端需维持活跃连接池，并按订阅关系精准广播。不推荐“全量推+前端过滤”，应由服务端完成订阅分发：
- 用户连接后，立即发送订阅请求（如
{"type":"subscribe","symbols":["SH600519","SZ000858"]}） - 服务端解析后，将该连接加入对应股票的订阅组（可用 Map
>） - 当行情引擎（对接交易所接口或行情中间件）收到新 tick，只向该 symbol 对应的客户端集合推送，降低冗余流量
- 对高频数据（如逐笔），建议合并小包（如 100ms 内多笔打包成数组）、启用 permessage-deflate 压缩
三、数据格式与性能优化要点
文本 JSON 虽易调试，但体积大、解析慢；真实场景推荐更紧凑方案：
- 轻量级二进制协议：如使用 protobuf.js 定义
Tick消息，体积比 JSON 小 60%+，解析快 3–5 倍 - 字段精简：行情仅传必要字段（代码、最新价、涨跌幅、成交量、时间戳毫秒），去掉冗余键名
- 时间戳统一用相对时间（如距连接建立的毫秒数）或 Unix 毫秒整数，避免字符串时间解析开销
- 前端用
requestIdleCallback或setTimeout(..., 0)批量更新 DOM，防渲染阻塞
四、实际部署注意事项
WebSocket 在生产环境需兼顾稳定性、可观测性和合规性：
- Nginx 需配置
proxy_set_header Upgrade $http_upgrade;和proxy_set_header Connection "upgrade";，否则连接降级为 HTTP - 单机连接数受限于系统文件描述符和内存，高并发建议用集群 + Redis 订阅/发布同步各节点订阅状态
- 金融类数据需记录连接日志、订阅日志、断线时长，满足监管审计要求
- 行情数据涉及版权，前端禁止缓存、截图、转发，服务端应校验 Referer 或 Token 有效性
不复杂但容易忽略。核心就三点：前端稳连、后端准推、数据够轻。跑通后，从连接建立到行情显示延迟可稳定控制在 200ms 内，满足秒级行情需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
