JavaScript 用 SSE 实现实时公告需服务端返回 text/event-stream 响应并保持长连接，前端用 EventSource 监听解析；注意消息格式、心跳保活、去重、兼容性及 XSS 防护。
JavaScript 中用 SSE（Server-Sent Events）实现系统公告实时下发，核心是服务端持续推送、前端自动接收并更新 UI，不需轮询或 WebSocket 的复杂握手。关键在于保持 HTTP 长连接、正确设置响应头、前端监听事件流。
服务端：按 SSE 协议输出公告数据
服务端需返回 text/event-stream 类型响应，并保持连接打开。每次推送一条公告时，以 data: 开头，可选 id: 和 event: 字段。
- 响应头必须包含：
Content-Type: text/event-stream、Cache-Control: no-cache、Connection: keep-alive - 每条消息以双换行分隔；
data:后跟 JSON 字符串（需手动转义换行），例如：data: {"id":1,"title":"系统维护通知","content":"将于今晚22:00开始..."} - 支持心跳保活：定期发送注释行（以
:开头）或空 data 行，防止连接超时断开
前端：用 EventSource 监听并渲染公告
浏览器原生 EventSource API 负责建立连接、重连和解析事件流，比手动 fetch + setInterval 更轻量可靠。
- 创建实例：
const es = new EventSource('/api/announcements')，路径需与服务端 SSE 接口一致 - 监听默认
message事件（对应无event:前缀的消息），event属性为MessageEvent，data是字符串，需JSON.parse() - 可监听自定义事件（如
event: announcement），用es.addEventListener('announcement', ...) - 连接异常时自动重试（默认 3 秒），可通过
es.onopen、es.onerror处理状态
公告去重与状态管理
SSE 不保证消息顺序或幂等性，前端需自行处理重复、丢失或乱序问题。
立即学习“Java免费学习笔记（深入）”；
- 服务端推送时带上唯一
id:，前端用 Set 或 Map 缓存已处理的 ID，避免重复渲染 - 首次加载页面时，可先发一次普通请求拉取最新 3 条公告，再开启 SSE 连接，弥补连接建立前的空白期
- 用户切换页面或失焦时，可暂停渲染（如隐藏弹窗），但不要主动关闭
EventSource，让它保持后台连接
兼容性与降级建议
现代浏览器均支持 EventSource（Chrome 6+、Firefox 6+、Safari 5.1+、Edge 12+），IE 完全不支持。
- 若需兼容 IE，可用 polyfill（如 eventsource-polyfill），本质是长轮询模拟
- 生产环境建议加简单错误兜底：连接失败超过 3 次后提示“公告推送暂不可用”，并提供手动刷新入口
- 避免在 SSE 流中传大量 HTML 片段，推荐只传结构化数据，由前端模板安全渲染，防止 XSS
