SSE实现大屏实时刷新的核心是建立服务端单向长连接，后端持续推送JSON数据，前端用EventSource监听并更新DOM；需设置Content-Type:text/event-stream、Cache-Control:no-cache等响应头，前端做防抖、状态缓存与断线兜底。
用 JavaScript 的 SSE（Server-Sent Events）实现实时监控大屏数据刷新，核心是建立一条服务端单向推送的长连接，让后端持续把最新数据“推”给前端，前端收到后直接更新 DOM 或图表。它比轮询更省资源，比 WebSocket 更轻量（不需要双向通信），特别适合只读型的大屏场景。
服务端需支持 SSE 协议（关键响应头）
SSE 要求服务端返回特定的 HTTP 响应头和数据格式。常见错误是漏掉 Content-Type: text/event-stream 或未设置 Cache-Control: no-cache，导致浏览器缓存或解析失败。
- 响应头必须包含：Content-Type: text/event-stream、Cache-Control: no-cache、Connection: keep-alive
- 每条消息以 data: 开头，可选带 id: 和 event:；多行 data 自动拼接，结尾用双换行符分隔
- 示例响应片段：
id: 123
event: update
data: {"cpu": 65.2, "memory": 4280}
前端用 EventSource 建立连接与监听
JavaScript 原生提供 EventSource API，无需额外库。它会自动重连（默认 3 秒），支持自定义事件类型，也兼容大多数现代浏览器（IE 不支持，需降级方案）。
- 创建连接：
const es = new EventSource("/api/metrics") - 监听默认消息（无 event 字段）：
es.onmessage = e => { const data = JSON.parse(e.data); updateDashboard(data); } - 监听自定义事件（如后端发
event: alert）：es.addEventListener("alert", e => { showWarning(JSON.parse(e.data)); }) - 连接异常时可手动重连：
es.onerror = () => { console.warn("SSE 连接断开，正在重试..."); }（注意：重连由浏览器自动处理，一般不需干预）
大屏适配：防抖更新 + 状态管理 + 断线兜底
高频推送（如每秒一次）直接操作 DOM 可能引发卡顿；网络波动时若无状态保持，大屏会“白屏”或显示陈旧数据。
立即学习“Java免费学习笔记（深入）”；
- 避免频繁重绘：对连续推送的数据做简单防抖（例如
setTimeout合并最近一次更新），或使用 requestIdleCallback 延迟非紧急渲染 - 维持本地状态：用一个全局对象缓存最新指标值，即使某次推送失败，大屏仍能展示“最后已知值”，并标记为 stale（如加灰边框）
- 超时兜底机制：配合心跳字段（如后端在 data 中加
"ts": 1718234567），前端定时检查时间差，超过 10 秒无新数据则触发告警或切换备用数据源
生产环境注意事项
SSE 看似简单，上线后常因部署细节出问题。重点检查：
- 反向代理（Nginx / Traefik）需配置超时：
proxy_read_timeout 300;（防止中间件主动断连） - 后端框架（如 Express、Spring Boot）要禁用 response 缓冲，确保
res.flush()或等效调用及时发出数据 - 大屏页面隐藏或切后台时，EventSource 会自动暂停，恢复可见后重新连接——若需保活，可监听
visibilitychange手动 close + new - 单页面多个大屏模块？复用同一个 EventSource 实例，避免重复建连；用不同 event 类型或 data 字段区分数据域
