情比纸薄！Nginx SSE 推送的邂逅与背叛

2023-05-05 01:26:08

一见钟情：我与 SSE 的邂逅

SSE：无与伦比的实时推送技术

Server Sent Events（SSE）是一款轻量级的服务端推送技术，打破了客户端轮询的束缚，赋予服务端主动向客户端推送数据的超能力。它专为构建实时推送系统而生，诸如聊天室、股票行情和新闻更新等应用场景都能完美驾驭。

初识 SSE，就被它的简洁和高效所倾倒。它仅需在响应头中添加一行代码（Content-Type: text/event-stream），便可源源不断地输出数据。客户端则无需复杂配置，使用 JavaScript 的 EventSource 对象即可轻松接收。

此外，SSE 与 HTTP 协议天然融合，可充分利用缓存机制优化性能，同时支持数据压缩，最大程度地减轻传输负担。

初次邂逅，花前月下的浪漫

实际应用中，SSE 宛若一位体贴的伴侣，一切都是那么美好。直到有一天，突如其来的变故打破了这份宁静。

在 Nginx 上使用 SSE 推送数据时，客户端只能收到第一条消息，后续消息杳无音信。排查了许久，毫无头绪，直到偶然发现问题所在：Nginx 的一个默认设置让我措手不及。

峰回路转，拨开云雾见光明

Nginx 配置中的 client_max_body_size 选项默认设置为 1MB。而 SSE 的数据往往是源源不断的，轻而易举地突破了这一限制。当 Nginx 收到超过 1MB 的请求体时，会毫不犹豫地关闭连接。

洞察到问题的症结后，我毫不犹豫地修改了 client_max_body_size 设置，扩大可接受的请求体大小。霎时间，问题迎刃而解，客户端恢复了对所有推送数据的正常接收。

总结与反思：爱与bug并存

这段经历让我深切体会到，在 Nginx 和 SSE 的世界里，client_max_body_size 选项是一个不可忽视的雷区。稍不留神，就可能陷入我曾经的困境。

愿我的经历能为后来者披荆斩棘，免于陷入同样的泥潭。

常见问题解答

Q1：SSE 与 WebSockets 有何异同？

SSE 和 WebSockets 同为实时推送技术，但各有所长。SSE 的优势在于轻量、简单，更适用于数据量较少、单向推送的场景。而 WebSockets 则双向通信能力更强，适合交互性更强的应用。

Q2：SSE 的浏览器兼容性如何？

SSE 广泛兼容于现代浏览器，包括 Chrome、Firefox、Safari 和 Edge。

Q3：如何使用 SSE 进行跨域推送？

SSE 本身不支持跨域，需要配合 CORS（跨域资源共享）机制。服务端需在响应头中添加 Access-Control-Allow-Origin 选项，允许客户端跨域访问。

Q4：SSE 推送数据时是否有大小限制？

SSE 本身没有推送数据大小限制，但受限于底层 HTTP 协议，实际推送大小可能受 Nginx 等服务器的配置影响。

Q5：如何优雅地处理 SSE 连接断开的情况？

SSE 连接断开时，客户端的 EventSource 对象会触发 error 事件。此时，可以重试连接，或根据具体业务逻辑采取其他处理措施。

示例代码：

服务端（Node.js）：

const http = require('http');

const server = http.createServer();

server.on('request', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
  });

  const interval = setInterval(() => {
    res.write(`data: ${new Date().toLocaleString()}\n\n`);
  }, 1000);

  req.on('close', () => {
    clearInterval(interval);
  });
});

server.listen(3000);

客户端（JavaScript）：

const eventSource = new EventSource('http://localhost:3000');

eventSource.onmessage = (event) => {
  console.log(event.data);
};

eventSource.onerror = (error) => {
  console.log(error);
};