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 会影响性能：
立即学习“Java免费学习笔记（深入）”；
- 用
textContent替代innerHTML更新纯文本价格（更安全且快） - 对价格变化做简单防抖或节流（如仅当变动 ≥ 0.01 才更新 UI）
- 使用
requestAnimationFrame批量更新多个字段，减少重绘次数 - 为不同股票维护独立 DOM 元素（如
id="price-AAPL"），按 symbol 精准更新，不遍历列表
容错与用户体验细节
SSE 天然支持自动重连，但需补充业务层健壮性：
- 服务端推送
retry: 3000告知客户端重试间隔（毫秒），默认 3s - 前端可记录最后成功接收时间，超时后主动提示“行情延迟”
- 首次加载显示“获取中…”，连接成功后再展示初始价格，避免空白闪烁
- 若某只股票长时间无更新，可降级为轮询或触发告警（如 10 秒没收到 AAPL 数据）
