sse是超大型高并发大屏看板的首选方案；因其基于http、轻量稳定、自动重连、兼容性强、服务端开销低，且天然适配单向推送场景，而websocket功能冗余、运维复杂，fetch轮询仅作兜底。
用 JavaScript 的 SSE（Server-Sent Events）实现大屏看板的实时数据推送，核心是建立一条服务端到浏览器的单向长连接，让后端主动“推”数据，前端监听并更新 DOM，全程无需轮询、不刷新页面。
后端需提供标准 SSE 接口
SSE 要求服务端响应必须满足三个基本条件：Content-Type 为 text/event-stream；响应头设置 Cache-Control: no-cache；数据按特定格式分块发送（以 data: 开头，每条消息以双换行结束）。例如 Node.js（Express）中可这样写：
- 设置响应头：
res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }) - 定时推送 JSON 数据：
res.write(`data: ${JSON.stringify({ cpu: 72, memory: 64, onlineUsers: 1289 })}\n\n`) - 注意保持连接不关闭，避免 res.end() 过早调用
前端用 EventSource 建立连接并处理数据
浏览器原生支持 EventSource，它会自动重连、解析 event-stream 格式。关键点在于正确监听 message 事件，并安全更新大屏元素：
- 创建连接：
const es = new EventSource('/api/sse/dashboard') - 监听数据：
es.onmessage = e => { const data = JSON.parse(e.data); updateDashboard(data) } - 处理异常和重连：
es.onerror可记录日志；默认重连间隔约 3 秒，可通过服务端发送 retry: 字段调整 - 更新 DOM 时建议用
textContent或innerText替代innerHTML，防 XSS；数值类指标可用Number(data.cpu).toFixed(1)格式化
大屏场景下的实用优化技巧
大屏对稳定性、延迟和视觉反馈要求高，不能只靠基础 SSE：
- 加心跳保活：服务端定期发 data: ping\n\n，前端 onmessage 中检测并更新 lastActive 时间，超时可手动 reconnect
- 防重复渲染：用
requestIdleCallback或节流（如 500ms 内最多更新一次）避免高频数据导致卡顿 - 离线兜底：监听
es.readyState === 0时显示“连接中…”；长时间失败后可降级为 10s 一次 fetch 拉取快照 - 多指标分通道：若 CPU、订单、告警等更新频率差异大，可拆成多个 EventSource（如 /sse/cpu、/sse/orders），避免低频数据阻塞高频更新
常见问题与避坑提醒
SSE 看似简单，但大屏上线常因细节翻车：
- 跨域问题：若前端域名与 SSE 接口不同源，后端必须显式设置
Access-Control-Allow-Origin: *（或具体域名），且不能带 credentials - IE 不支持：SSE 在 IE 全系列不可用，如需兼容，改用 WebSocket 或降级 polling
- 连接数限制：Chrome 对同一域名最多 6 个 SSE 连接，大屏含多个子模块时注意复用连接或合并数据流
- 服务端缓冲：Nginx/Apache 默认开启 proxy_buffering，会截断流式响应，需关闭：
proxy_buffering off;并设proxy_cache off;
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
