在使用前端的 Server-Sent Events （简称 SSE）时，我们经常会面临一个问题：连接可能会因为长时间无数据而被关闭。这就是所谓的“连接闲置超时”问题。为了解决它，我们需要在后台服务上进行一些设置和优化。
SSE 简介
SSE 是一种服务器向客户端推送数据的方式，与 WebSocket 相似。不同之处在于，SSE 是通过 HTTP 协议进行通信的，而不需要像 WebSocket 那样建立一个独立的 TCP 连接。
在前端，我们可以使用 EventSource 以及相关的 API 来处理 SSE 事件。我们可以监听来自服务器的事件，例如消息、进度更新等等。
连接闲置超时问题
默认情况下，大多数 web 服务器会在超过一定时间后自动断开连接。这是为了避免资源浪费和安全问题。然而，这也会导致连接闲置超时，使得 SSE 连接被关闭。如果我们使用的是一些基础服务（如 Heroku 等），这个时间可能更短。
这种情况下，我们需要在后台服务中做出相应调整，以确保 SSE 连接可以持续有效地工作。下面是一些解决方案：
后台服务解决方案
1. 使用 keep-alive
在 HTTP/1.1 中，我们可以使用 keep-alive 选项来避免连接断开。这个选项会保持连接开启一段时间，以便后续通信。我们可以在后台服务中配置 keep-alive 参数，来保证 SSE 连接不会因为连接断开而关闭。
例如，使用 Node.js 的 Express 框架：
-- -------------------- ---- -------
------------- ---- ----- -- -
---------
------------- -------------
---------------- -----------
--------------- --------------------
------------------------------ ---
---
-------
---在这个例子中，我们在 res 上设置了一些响应头，将连接保持开启。
2. 通过发送消息来防止闲置
另一个方案是在一段时间内发送一些消息，以避免连接被关闭。我们可以在客户端定期向后台发送一个 HTTP 请求，以便后台检查连接是否闲置，并发送一个空白消息以更新连接。
例如，我们可以在客户端使用以下代码：
// 每 30 秒发送一个请求
setInterval(() => {
fetch(SERVER_URL);
}, 30000);在后台，我们通过定期发送一个空白消息来保持连接：
res.write("event: noop\ndata: {}\n\n");这个空白消息会更新 SSE 连接的时间戳，保证连接不会被关闭。
3. 调整连接闲置超时配置
如果你运行的是自己的服务器，你也可以直接调整连接闲置超时的设置。例如，使用 Nginx，你可以在 nginx.conf 文件中添加以下配置：
keepalive_timeout 65;
这个配置将连接闲置超时设置为 65 秒。
结论
在使用 SSE 连接时，我们需要注意连接闲置超时问题。通过在后台服务中设置 keep-alive 和更新连接时间戳，我们可以避免这个问题，确保 SSE 连接有效工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6708b98cd91dce0dc873dc3e