在 web 开发中，Server-sent Events（SSE）是一种用于实现服务器对浏览器的单向实时消息推送的技术。它主要基于标准的 HTTP 协议，允许浏览器与服务器之间建立长连接，从而可以接收来自服务器的持续流数据。然而，在使用 SSE 技术时，我们经常会面临连接突然断开的问题。本文将介绍 SSE 断开连接问题的原因及其解决方案，并给出示例代码。
SSE 断开连接问题的原因
SSE 技术的本质是建立长连接。长连接可以保持浏览器与服务器之间的通信，一旦建立成功，就可以实现持续的消息推送。然而，由于网络环境的复杂性，浏览器与服务器之间的连接可能会在某些情况下突然断开，例如：
- 网络连接异常或中断；
- 服务器主动关闭连接；
- 浏览器关闭或刷新页面。
在出现连接断开的情况下，如果不采取措施，SSE 将不再传输消息。为了解决这个问题，我们需要对连接进行监控，一旦连接断开就及时重连。
SSE 断开连接问题的解决方案
针对 SSE 断开连接问题，我们可以采取以下两种方案：
1. 客户端自动重连
在浏览器端，我们可以通过 JavaScript 对 SSE 连接进行监控，一旦发现连接断开，就利用 setTimeout 或 setInterval 函数实现自动重连。下面是一个简单的示例代码：
--- ------ - --- ------------------------
-- -- --- ----
-------------------------------- --------------- -
-- ------------------------ --- ------------------- -
-- ----
--------------------- -
------ - --- ------------------------
-- ------
-
-- -------在上面的示例中，我们利用 addEventListener 和 error 事件对 SSE 连接状态进行监控，当连接状态为 EventSource.CLOSED 即连接断开时，就利用 setTimeout 函数实现 1 秒后重新连接。通过这种方式，我们可以在 SSE 连接断开的时候自动重连，从而实现持续的消息推送。
2. 服务器推送心跳包
在服务器端，我们可以利用类似心跳包的方式定时推送数据，以保持 SSE 的持续连接。具体实现过程如下：
- 在服务器端，定时向客户端发送一条带有特定数据的 SSE 信息；
- 客户端监听 SSE 信息的 arrival 事件，一旦接收到指定的 SSE 信息，就视为 SSE 连接仍然处于活跃状态，否则就视为 SSE 连接已经断开，进行相关操作。
下面是一个简单的服务器端示例代码：
----- ------------ - ------------------
----- ---------- ------- ------------ --
----- ---------- - --- -------------
-------------- -- -
-------------------------- - --- -- ----- ------ ------- ---
-- ------
------------------- ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
------------------------ ------- -- -
-------------- ------------------
---------------- --------------------------------------
---
---在上面的示例中，我们借助 EventEmitter 实现 SSE 信息推送。每隔 1 秒向客户端推送一条 SSE 信息，并利用 res.write 将信息写入到 SSE 连接中。在客户端接收到 SSE 信息时，可以视为连接仍然处于活跃状态，否则就视为连接已经断开，进行相关操作。通过这种方式，我们可以自行定制心跳包的发送时间间隔，从而实现持续的 SSE 推送。
结论
SSE 技术为实现浏览器与服务器之间的实时消息推送提供了一种良好的解决方案。但是，在面对连接断开的问题时，我们需要对 SSE 进行监控和重连，或者利用服务器推送心跳包的方式定时维持连接。以上两种方案都可以有效解决 SSE 连接断开的问题，提升 SSE 技术的实时性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671a10549babaf620fa0ccdb