简介
SSE (Server-Sent Events) 是一种在前端实现推送服务的方式，它非常适用于实时通知、在线聊天和其他需要实时数据获取的场景。虽然 SSE 在使用时得心应手，但在实际应用中我们可能会遇到一些问题，其中之一就是 SSE 连接被重置。
问题原因
SSE 连接被重置的原因有很多，例如网络问题、服务器问题、浏览器问题等。但在使用过程中，我们最常遇到的原因是 HTTP 保活超时。HTTP 保活超时会导致浏览器在 60 秒 无响应时关闭 SSE 连接。
解决方法
对于 SSE 连接被重置的问题，我们可以从以下三个方面入手解决：
1. 修改服务器配置
服务器默认的超时时间可能是 60 秒，可以通过修改服务器的超时时间延长 SSE 连接的生命周期。例如，我们可以在 Nginx 中修改 http {} 配置块下的 keepalive_timeout 参数：
http {
...
keepalive_timeout 120s; # 将超时时间从60s修改为120s
...
}2. 通过发送消息来保持连接
为了保持 SSE 连接的生命周期，我们可以通过每隔一段时间（例如 50 秒）发送一条空消息，让服务器知道连接还在保持。这样就不会出现 HTTP 保活超时关闭 SSE 连接的情况。示例如下：
-- -------------------- ---- -------
----- ----------- - --- --------------------
-- ------------
-------------- -- -
------------------- - ------- ------ ---
-- -- - ------
--------------------- - --- -- -
--------------------
--3. 处理连接重置事件
当 SSE 连接被关闭时，我们可以通过事件监听的方式处理连接重置事件。通过监听 error 事件，我们可以得知 SSE 连接被关闭的原因。一旦连接关闭，可以在回调函数中重启连接。示例如下：
-- -------------------- ---- -------
--- ----------- - --- --------------------
------------------- - --- -- -
-- -------------------- --- ------------------- -
---------------- --------
-- ------
----------- - --- --------------------
-
--总结
本文介绍了 SSE 连接被重置的问题及其解决方法，并给出了详细的示例代码。通过修改服务器配置、发送消息保持连接和处理连接重置事件，我们可以避免 SSE 连接被关闭的情况，从而更好地使用 SSE 并不断优化我们的前端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64508400980a9b385b987dbf