javascript 用 sse 实现股票实时更新，前端通过 eventsource 建立长连接监听服务端推送的 json 数据，服务端需设置 text/event-stream 响应头并定时发送 data: 消息；需处理自动重连、防抖渲染与连接关闭清理。

用 JavaScript 的 SSE（Server-Sent Events）实现股票价格实时更新，核心是前端建立长连接监听服务端推送，服务端持续发送 JSON 格式的价格数据。它比 WebSocket 更轻量，适合单向、高频、低延迟的行情推送场景。

服务端需支持 SSE 协议（以 Node.js Express 为例）

SSE 要求响应头设置 Content-Type: text/event-stream，并保持连接打开，定时推送数据。注意禁用缓存、设置字符编码，并处理连接断开逻辑：

• 设置响应头：res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', 'Charset': 'utf-8' });
• 每条消息以 data: 开头，结尾加两个换行符（\n\n），例如：data: {"symbol":"AAPL","price":192.34,"change":-0.21}\n\n
• 用 setInterval 模拟行情更新（实际应对接行情源或 Redis Pub/Sub）；连接关闭时清除定时器

前端用 EventSource 建立连接并解析数据

浏览器原生 EventSource 自动重连、解析 event-stream，无需手动管理连接状态：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

• 创建实例：const es = new EventSource('/api/stocks');
• 监听 message 事件，event.data 是字符串，需 JSON.parse() 转为对象
• 可监听 open 和 error 事件，用于显示连接状态或错误提示
• 页面卸载前调用 es.close() 避免内存泄漏（尤其在 SPA 中）

前端渲染优化：避免频繁 DOM 操作

股票价格每秒可能更新多次，直接修改 innerHTML 或频繁 reflow 会影响性能：

• 用 textContent 替代 innerHTML 更新纯文本价格（更安全且快）
• 对价格变化做简单防抖或节流（如仅当变动 ≥ 0.01 才更新 UI）
• 使用 requestAnimationFrame 批量更新多个字段，减少重绘次数
• 为不同股票维护独立 DOM 元素（如 id="price-AAPL"），按 symbol 精准更新，不遍历列表

容错与用户体验细节

SSE 天然支持自动重连，但需补充业务层健壮性：

• 服务端推送 retry: 3000 告知客户端重试间隔（毫秒），默认 3s
• 前端可记录最后成功接收时间，超时后主动提示“行情延迟”
• 首次加载显示“获取中…”，连接成功后再展示初始价格，避免空白闪烁
• 若某只股票长时间无更新，可降级为轮询或触发告警（如 10 秒没收到 AAPL 数据）

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南