SSE实现消息通知的核心是服务端通过持久HTTP连接单向推送符合data:格式的事件流,前端用EventSource监听并调用Notification API触发提醒;需设置Content-Type:text/event-stream响应头、携带id字段支持断线重连、兼容处理页面隐藏与旧浏览器降级。

网页端用 SSE 实现消息通知提醒,核心是建立一个持久的单向 HTTP 连接,由服务端主动推送事件,浏览器通过 EventSource 接收并触发提醒(如桌面通知、页面角标、声音等)。关键在于服务端持续输出符合 SSE 格式的文本流,前端正确监听与处理。
服务端发送标准 SSE 数据
SSE 要求响应头必须包含 Content-Type: text/event-stream,且数据以 data: 开头,每条消息以双换行分隔。可选携带 event: 类型和 id: 用于断线重连。
- Node.js(Express)示例:设置响应头、禁用缓存、保持连接不关闭
- 每条消息格式如:
event: message\nid: 123\ndata: {"title":"新订单","body":"用户下单成功"}\n\n - 避免使用
res.end()提前结束响应;可用res.flush()或res.write()即时推送
前端用 EventSource 监听并触发提醒
创建 EventSource 实例后,监听 message 或自定义事件名(如 message),解析 event.data,再调用浏览器提醒 API。
分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- 首次请求前检查
Notification.permission,未授权则调用Notification.requestPermission() - 收到消息后新建
Notification,传入标题和选项(body、icon、sound需额外处理) - 注意:SSE 默认重连(约 3s 后),可通过
eventSource.onopen和eventSource.onerror监控连接状态
处理断线、重连与消息去重
SSE 自带重连机制,但服务端需配合传递 id: 字段,客户端可通过 eventSource.lastEventId 获取上一次 ID,用于断线后从指定位置恢复。
立即学习“Java免费学习笔记(深入)”;
- 服务端每次推送时带上递增或时间戳 ID,例如
id: 1698765432000 - 前端在
onmessage中记录已处理 ID,避免重复提醒(尤其在重连瞬间可能重复推送) - 若需更可靠投递(如金融类通知),建议搭配消息队列 + 消费确认机制,SSE 仅作实时通道
兼容性与降级考虑
现代浏览器均支持 EventSource(Chrome、Firefox、Safari、Edge),但 IE 完全不支持。如需兼容旧环境,可 fallback 到长轮询(fetch + 定时重试)或 WebSocket。
- 检测支持:
if ('EventSource' in window) { /* 使用 SSE */ } else { /* 切换轮询 */ } - 移动端 Safari 对长时间空闲连接可能关闭,建议服务端定期发送注释行(
:keep-alive\n\n)维持连接 - 避免在页面隐藏时频繁弹窗,可用
document.hidden判断,转为更新 badge 或缓存待显示

















