SSE是实现网页端即时消息提醒最轻量、最直接的方式，适用于服务器单向通知客户端场景。前端用EventSource建立长连接并自动重连，监听message或自定义事件；服务端返回text/event-stream格式数据，含data:、event:、id:等字段；结合Notification API、DOM更新或提示音实现UI提醒，需注意禁用服务端缓冲及Nginx缓存配置。
用 JavaScript 实现网页端即时消息提醒，SSE 是最轻量、最直接的方式之一——尤其适合“服务器通知客户端”这类单向场景，比如新消息到达、系统告警、任务完成提示等。
一、前端用 EventSource 建立连接
浏览器原生支持 EventSource API，无需额外库。它会自动维持长连接，并在断开后按规则重连。
- 创建实例时传入服务端 SSE 接口地址，例如：
new EventSource('/api/notifications') - 监听
message事件接收默认类型的消息；也可监听自定义事件，如event: notify对应source.addEventListener('notify', ...) - 连接失败或重连时，可通过
onerror捕获（注意：它不区分具体错误类型，只表示连接异常） - 页面卸载前建议调用
source.close()避免资源泄漏
二、服务端返回标准 SSE 格式
后端需返回 Content-Type: text/event-stream，并保持响应流打开。每条消息以 data: 开头，空行结尾：
- 基础格式示例：
data: {"type":"msg","content":"你有一条新通知"}（空行） - 带事件类型和 ID（便于断线续推）：
event: msgid: 12345data: {"title":"订单已支付"} - 可选设置重连间隔：
retry: 3000（毫秒），客户端将在断连后 3 秒重试
三、结合 UI 实现消息提醒
收到消息后，触发前端提醒逻辑，无需轮询或手动刷新：
立即学习“Java免费学习笔记（深入）”；
- 调用
Notification.requestPermission()获取浏览器通知权限，之后用new Notification(...)弹出桌面通知 - 在页面右上角添加气泡角标，用 DOM 操作更新未读数（如
badgeEl.textContent = ++count） - 播放提示音（可预加载 audio 并
.play()）、高亮消息区域、滚动到最新条目等 - 注意：SSE 不携带用户身份信息，首次连接时建议在 URL 中带 token 或 sessionId，例如
new EventSource('/api/notifications?token=abc123')
四、实际使用注意事项
SSE 看似简单，但几个细节决定体验是否稳定：
- 服务端需禁用响应缓冲（如 Node.js 的
res.flushHeaders()、PHP 的ob_flush()+flush()），否则数据会积压不推送 - 部分 Nginx / CDN 默认缓存 SSE 响应，需配置：
proxy_buffering off;、proxy_cache off;、add_header X-Accel-Buffering no; - 每个标签页独立连接，多开页面会导致多个 SSE 连接；如需统一管理，可用 SharedWorker 或 localStorage + postMessage 协调
- 不支持 IE，但所有现代浏览器（Chrome/Firefox/Safari/Edge）均完整支持
