无需登录 数据私有 本地保存

Server-Sent Events 代码片断生成 - 客户端与服务端模板

API 开发工具 SSE 代码生成
11
0
0
0
SSE 参数配置
服务端语言
SSE 端点路径
事件名称
数据类型
间隔(秒)
Node.js (Express) 
// 加载中...
JavaScript (客户端) 
// 加载中...
提示： SSE 需要服务端设置 Content-Type: text/event-stream 和 Cache-Control: no-cache。 若部署在 Nginx 后，需关闭缓冲：proxy_buffering off; 并增加 proxy_read_timeout。 EventSource 会自动重连，服务端可通过 retry: 字段建议重连间隔。
常见问题 (FAQ)
SSE 和 WebSocket 有什么区别？如何选择？
SSE (Server-Sent Events) 是单向通信（服务器→客户端），基于HTTP协议，使用更简单，自动重连，适合实时推送场景（如消息通知、股票行情、日志推送）。
WebSocket 是双向通信，需要独立的ws协议，更灵活但实现复杂，适合聊天应用、协作编辑等双向交互场景。
如果只需服务器推送数据给客户端，SSE是更轻量的选择；需要客户端频繁发送数据则选WebSocket。
SSE 的浏览器兼容性如何？
EventSource API 在所有现代浏览器中均受支持（Chrome 6+、Firefox 6+、Safari 5+、Edge 79+）。IE 不支持，如需兼容可使用polyfill。移动端浏览器也广泛支持。
为什么我的 SSE 连接总是断开又重连？
常见原因：
1) 服务端未保持长连接（如PHP默认超时），需要设置合理的超时时间或使用循环保持连接。
2) Nginx等反向代理缓冲了数据，需配置 proxy_buffering off;。
3) 服务端未持续发送数据，浏览器可能因超时断开。可通过定期发送心跳（如注释行 : heartbeat）保持连接。
SSE 事件格式中的 id 和 retry 字段有什么用？
id 字段：为事件设置唯一标识。客户端断线重连时，会在请求头中带上 Last-Event-ID，服务端可据此从断点继续推送，避免数据丢失。
retry 字段：告诉客户端重连前等待的毫秒数（默认约3秒）。服务端发送 retry: 5000 即建议客户端5秒后重连。
如何在前端自定义事件类型的监听？
服务端发送 event: customEventName 后，客户端使用 eventSource.addEventListener('customEventName', handler) 来监听。
默认的 onmessage 只处理无 event 字段或 event 为 "message" 的事件。支持同时监听多个自定义事件类型。
SSE 连接数有上限吗？
浏览器端对同一域名的SSE连接数有限制（通常6个左右，遵循HTTP/1.1同域连接限制）。HTTP/2下此限制大幅放宽。服务端则需要考虑并发长连接对资源的占用，建议使用异步非阻塞框架（如Node.js、Go、FastAPI）来处理大量SSE连接。
如何在生产环境中正确配置Nginx代理SSE？
关键配置：
proxy_buffering off; — 关闭缓冲确保实时推送
proxy_cache off; — 禁用缓存
proxy_read_timeout 86400s; — 延长超时防止断开
proxy_set_header Connection ''; — 清除Connection头
chunked_transfer_encoding on; — 启用分块传输
🔧 相关工具