简介
Server-Sent Events 可以在客户端和服务器之间创建基于事件流的持续连接，使得服务器可以实时推送数据给客户端。SSE 基于 HTTP 协议，通过发送特定格式的消息实现数据传递。SSE 支持自动重连、心跳检测等功能，因此在实时通信、推送通知等场景下具有广泛的应用。
本文将介绍如何在反向代理环境下部署 SSE 流，并提供完整的示例代码。
反向代理下的 SSE 部署
在反向代理环境下部署 SSE 流需要考虑到以下两个因素：
- SSE 连接的超时时间与反向代理的超时时间要相匹配，否则可能出现连接被关闭的问题。
- Nginx 等反向代理服务器默认不支持 SSE 流，需要进行额外的配置。
超时时间匹配
SSE 连接的超时时间可以通过在服务器端设置“ping”的间隔时间（pingInterval）和连接超时时间（timeout）来实现。下面是一个示例的 SSE 连接实现：
-- -------------------- ---- ------- ----- ----------- - --- ------------------------------------- - ---------------- ---- --- --------------------------------------- ----- -- - --------------------- ---------- ------------ --- ------------------------------------- ----- -- - ------------------ ----------- ------- ---展开代码
在服务器端，我们可以使用express框架来创建 SSE 服务器：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- --------------- ----- ---- -- - ----------------------------- --------------------- ------------------------------ ------------ --------------------------- -------------- ------------------- -------------- -- - ----- ---- - ---------------------- ---------------- -------------- -- ------ ---展开代码
上面的 SSE 服务器每秒钟发送一次当前时间。
为了避免反向代理在 SSE 连接还在进行时就关闭连接，我们需要将反向代理的超时时间和 SSE 连接的超时时间设为相同。以 Nginx 为例，我们可以在配置文件中添加以下内容：
proxy_read_timeout 1h; proxy_send_timeout 1h;
这里将代理的读取超时时间和发送超时时间均设置为 1 小时，与 SSE 的连接超时时间相匹配。
Nginx 配置 SSE 流支持
Nginx 默认不支持 SSE 流，需要进行以下配置才能支持：
- 在 Nginx 中设置请求的缓存控制头，以便可以使用 SSE 流。
-- -------------------- ---- ------- -------- ---- - ------------------ ------------- ---------------------- --- ---------- ------------- --------- ---------------- ---------- --- ------------------ ---- ---------------- ------- -------------- ---------------- ---------- ---------- ---------------- ---- ------ ---------------- --------- ------------- ---------------- --------------- --------------------------- ------------------ --- ------------------ --- --------------- ---- ----------- ---- - --- -展开代码
- 禁用 Nginx 的缓存。
proxy_buffering off; proxy_cache off;
- 更新浏览器请求头以支持 SSE。
const eventSource = new EventSource('http://example.com/sse', { withCredentials: true, headers: { 'Cache-Control': 'no-cache', Pragma: 'no-cache', 'X-Accel-Buffering': 'no', }, });
这里将 Cache-Control 和 Pragma 头设置为 no-cache，以确保浏览器不会对请求进行缓存。
总结
本文介绍了如何在反向代理环境下部署 SSE 流，并提供了完整的示例代码。在实时通信、推送通知等场景下，SSE 流能够使得服务器实现实时推送数据给客户端，为 Web 应用带来更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6500426695b1f8cacde72255
