JavaScript 通过 EventSource 监听 SSE 的 message 事件，自动重连并解析 data: 字段的 JSON 数据，动态创建带动画的 DOM 弹窗或调用 Notification API，同时监听 error 事件处理连接异常。
用 JavaScript 处理 SSE 通知并触发实时弹窗，关键在于监听 EventSource 的 message 事件，解析数据后调用合适的 UI 展示逻辑。不需要额外轮询或手动重连，浏览器会自动维持连接、恢复断线。
建立 SSE 连接并监听消息
先创建 EventSource 实例，指向服务端支持 SSE 的接口。确保服务端返回 Content-Type: text/event-stream，且按规范发送 data: 字段：
- 使用
new EventSource('/api/notifications')初始化连接 - 监听
onmessage处理默认事件（event 字段为空时触发） - 也可监听自定义 event 类型，如
addEventListener('notify', handler)
解析推送内容并构造弹窗数据
SSE 消息是纯文本格式，每条以 data: 开头，多行内容会自动拼接为字符串。服务端通常推送 JSON 字符串，需手动解析：
- 检查
event.data是否为空，避免空消息触发弹窗 - 尝试
JSON.parse(event.data)提取标题、内容、图标等字段 - 若解析失败，可降级为纯文本提示，或丢弃无效消息
用原生 API 或 DOM 方式显示弹窗
不推荐用 alert()——它会阻塞页面、无法定制样式。更实用的是动态插入 DOM 弹窗：
立即学习“Java免费学习笔记（深入）”；
- 创建
div元素，设置固定定位、高 z-index 和过渡动画 - 填入解析出的标题和内容，添加关闭按钮并绑定点击移除逻辑
- 可配合 CSS 实现淡入、右上角定位、自动消失（如 5 秒后 remove）
- 若需系统级通知，可用
Notification.requestPermission()+new Notification()，但需用户授权且仅限 HTTPS
处理连接状态与错误边界
EventSource 自动重连，但需监听 error 事件做兜底提示，避免静默失败：
- 在
onerror中检查event.target.readyState：0=未连接，0=关闭，2=已连接 - 连接长时间失败时，可显示“通知暂时不可用”小 toast 提示
- 避免重复创建弹窗实例，建议加节流（如 1 秒内相同类型消息只显示一次）
