JavaScript 中 SSE 怎么实现网页端的即时消息提醒-js教程-PHP中文网

sse是实现网页端即时消息提醒最轻量、最直接的方式，适用于服务器单向通知客户端场景。前端用eventsource建立长连接并自动重连，监听message或自定义事件；服务端返回text/event-stream格式数据，含data:、event:、id:等字段；结合notification api、dom更新或提示音实现ui提醒，需注意禁用服务端缓冲及nginx缓存配置。

javascript 中 sse 怎么实现网页端的即时消息提醒

用 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: 开头，空行结尾：

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

基础格式示例：
data: {"type":"msg","content":"你有一条新通知"}
（空行）
带事件类型和 ID（便于断线续推）：
event: msg
id: 12345
data: {"title":"订单已支付"}
可选设置重连间隔：retry: 3000（毫秒），客户端将在断连后 3 秒重试

三、结合 UI 实现消息提醒

收到消息后，触发前端提醒逻辑，无需轮询或手动刷新：

调用 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）均完整支持

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南