WebSocket实现股票实时行情推送的核心是建立浏览器与服务端的长连接，通过约定数据格式、处理重连、断线恢复及高效数据解析来保障低延迟、高可靠性；前后端需协同完成订阅管理、心跳保活、指数退避重连、本地缓存兜底及安全鉴权。
用 WebSocket 实现股票实时行情推送，核心是建立浏览器与服务端的长连接，让服务端主动、低延迟地把最新价格、成交量等数据推送给前端。关键不在于 WebSocket 本身多复杂，而在于前后端如何约定格式、处理重连、应对断线和数据解析。
前端：创建 WebSocket 连接并监听行情数据
前端需创建 WebSocket 实例，连接到支持股票数据推送的服务端（如自建 Node.js 服务或第三方行情 WebSocket 接口）。注意使用 wss://（生产环境必须加密）而非 ws://。
示例代码：
const socket = new WebSocket('wss://your-api.com/stock');
socket.onopen = () => {
console.log('已连接行情服务');
// 连接成功后，发送订阅请求
socket.send(JSON.stringify({
type: 'subscribe',
symbols: ['AAPL', 'TSLA', '000001.SZ']
}));
};
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.type === 'tick') {
// 渲染最新行情，例如更新表格或 K 线图
updateStockUI(data.symbol, data.price, data.volume, data.time);
}
};
socket.onerror = (err) => console.error('WebSocket 错误:', err);
socket.onclose = () => console.log('连接已关闭，准备重连...');
后端：推送实时 tick 数据并管理订阅关系
服务端需维护客户端连接池和订阅关系。当收到新行情（如从交易所 API、模拟数据源或 Redis Pub/Sub 获取），按订阅列表精准广播给对应客户端，避免全量推送造成带宽浪费。
立即学习“Java免费学习笔记（深入）”；
常见做法：
- 用 Map 或对象存储 connection → subscribedSymbols 映射
- 行情数据到达时，遍历所有连接，只向订阅了该股票的客户端发送
- 支持动态订阅/退订：接收
{"type":"subscribe","symbols":["XYZ"]}或{"type":"unsubscribe","symbols":["XYZ"]} - 使用 Node.js + ws 库最轻量；高并发场景可选 Socket.IO（带自动重连/房间），但注意它默认用轮询降级，需显式禁用以保证纯 WebSocket 行为
稳定性和体验优化要点
真实场景中，网络抖动、页面切换、休眠都可能导致连接中断。不能只依赖 onclose 自动恢复。
- 手动心跳保活：前端每 20–30 秒 send() 一个 ping 消息，后端响应 pong；超时未收到则主动 close 并触发重连
- 指数退避重连：断开后延迟 1s→2s→4s→8s 尝试，避免雪崩式重连冲击服务端
- 本地缓存兜底：断线期间保留最后收到的价格，在 UI 上显示“最后更新：15:29:42（离线）”，避免空白或错误状态
- 二进制或 Protocol Buffers 传输（进阶）：高频行情下，JSON 解析有开销，可用 ArrayBuffer + typed array 打包字段，体积更小、解析更快
注意事项与避坑提示
直接用原生 WebSocket 可行，但要注意：
- 浏览器对同一域名的 WebSocket 并发连接数有限制（通常 6 个），不要为每只股票建一个连接
- 不要在 onmessage 中做耗时操作（如直接渲染百只股票的 DOM），应节流（throttle）或用 requestIdleCallback
- 服务端推送频率需合理控制（如 A 股 Level-1 最快 3 秒一推，Level-2 可达毫秒级），前端要能丢弃过期数据（按时间戳或序列号判断）
- 涉及金融数据，务必校验消息来源，服务端需鉴权（如 token 放在 URL query 或首条消息中），禁止未授权访问
