什么是 SSE？
SSE，全称为 Server-Sent Events，是一种服务器主动推送数据到客户端的技术。与传统的 HTTP 请求不同，SSE 建立一次持久性的连接，从而让服务器能够持续地向客户端推送数据。
SSE 应用于 Web 开发的过程中，可以实现部分实时数据和消息推送，比如股票行情、聊天室等。同时 SSE 协议与 WebSocket 相比，更加轻量级，因此在一些比较简单的推送场景中表现更加优异。
SSE 的连接超时
SSE 通过建立一次持久性连接来保证实时数据的持续发送。但是在某些情况下，由于网络或者服务器端的原因，这个连接会被意外中断，导致连接超时。
连接超时一般会导致前端出现意向不到的 bug，比如一个聊天窗口无法持续更新消息，或者行情数据无法自动更新等。因此，如何正确地处理 SSE 连接超时，是 Web 开发中需要关注的重点问题之一。
处理 SSE 连接超时的方法
SSE 连接超时的处理，主要有两种方法：前端和后端。
1. 前端
前端处理 SSE 连接超时，主要是通过监听 EventSource 对象的 onerror 事件，来获取错误信息并重新建立连接。示例代码如下：
const eventSource = new EventSource("server-url");
eventSource.onerror = function(event) {
console.log(`SSE error: ${event}`);
// 处理连接超时
eventSource.close(); // 需要手动关闭老的连接
eventSource = new EventSource("server-url"); // 重新建立连接
}上述代码中，当 EventSource 对象的连接出现错误时，会触发 onerror 事件。在事件处理函数中，我们可以获取到错误信息，并且手动关闭老的连接，然后重新建立新的连接。这样做可以有效地防止连接超时导致的前端错误。
2. 后端
后端处理 SSE 连接超时的方法，主要是通过设置超时时间等参数来控制连接。一般来说，可以通过以下两种方式来处理：
1. Nginx 的配置
如果我们是使用 Nginx 作为 Web 服务器，那么我们可以通过配置 keepalive_timeout 参数来控制 SSE 连接的超时时间。示例如下：
http {
...
keepalive_timeout 600s;
...
}上述代码中，我们将 keepalive_timeout 参数设置为 600 秒，这意味着 SSE 连接会在 600 秒后自动超时，需要重新建立连接。
2. 后端代码
在一些情况下，我们也可以通过后台代码来设置超时时间。比如在 Node.js 中，我们可以使用 setTimeout 函数来手动关闭连接。示例代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
------------------ -- ------
--- ----- - --
----- ----- - -------------- -- -
---------------- ---------------
--------
-- ------
------------------------ -- -- -
---------------------
---
-
---
--------------------上述代码中，我们首先设置了超时时间为 0，这意味着 SSE 连接将不会自动超时。然后，在建立 SSE 连接后，我们使用 setInterval 函数来向前端发送消息。在代码末尾，我们也监听了连接的关闭事件，以清理定时器。这样做既可以实现 SSE 连接的持续发送，又可以避免连接超时的问题。
总结
SSE 是一种非常有用的服务器主动推送技术，在 Web 应用开发中具有广泛的应用。然而，连接超时问题也是每个开发人员需要关注的问题。通过本文介绍的前端和后端方法，我们可以很好地解决 SSE 连接超时的问题，避免前端错误的出现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6452fab8968c7c53b076ff5b