Server-sent Events（SSE）是一种 Web 技术，允许服务器主动推送数据到浏览器，而无需浏览器发起请求。它与传统的轮询和长轮询相比，具有更低的延迟和更高的效率。然而，在使用 SSE 时，有可能会出现客户端突然断开连接的情况，本文将分析这个问题的原因，并提供一些解决方法。
问题原因
SSE 的核心是一个“持久连接”，也就是说，一旦客户端与服务器建立连接后，连接将一直保持打开状态，直到客户端显式关闭连接。但是，在实际应用中，由于网络波动、浏览器崩溃等原因，客户端可能会突然断开连接，这时服务器会收到一个“关闭”事件，但浏览器并不一定会发出一个错误或异常来告诉我们。
当客户端断开连接时，浏览器可能会自动重新连接，这会导致服务器发出了一条新的 SSE 消息，但浏览器并不会接收到，因为新的连接已经代替了旧的连接。这个问题可能导致客户端错过了一些重要的 SSE 消息，从而影响了应用的正确性和可靠性。
解决方法
心跳机制
为了解决客户端断开连接的问题，我们可以自己实现一个“心跳机制”，也就是定期发送 SSE 消息给客户端，以保持连接畅通。SSE 本身是支持“注释”类型的消息的，我们可以发送一个注释消息（即只包含一个冒号“:”），作为心跳消息。客户端收到注释消息后，不需要进行任何处理，只需在指定时间内继续保持连接即可。
-- -------------------- ---- -------
-------- -------------------------- -
---------------
------
---------------- -----------
--------------- --------------------
------------- ------------
---
-- ------
-------------- -- -
------------ ----------------
-- ------
-- -- --- --
----- ----- - ----------
----- ---- - ------- --------
----- -- - -----------
-------------- ----------
----------------- -------------
---------------- --------------
-上面的代码中，我们设置了一个 2 秒钟的定时器，每隔 2 秒钟就向客户端发送一条注释消息。在实际应用中，这个时间间隔可能需要根据网络状况和服务器负载来调整。
客户端重连机制
除了自己发送心跳消息之外，我们还可以利用浏览器的自动重连机制，当客户端意外断开连接时，浏览器会自动尝试重新建立连接。在客户端重连成功后，服务器可以向客户端发送最新的 SSE 消息，以确保客户端不会错过任何消息。为了防止服务器连续发送多个相同的 SSE 消息，我们可以给每个消息设置一个唯一的 ID，根据该 ID 判断是否需要发送这条消息。
-- -------------------- ---- -------
--- ------------- - --
-------- ------------------- -
----------------------- ---------
-
-------- -------------------------- -
---------------
------
---------------- -----------
--------------- --------------------
------------- ------------
---
-- -- --- --
----- ----- - ----------
----- ---- - ------- --------
----- -- - ----------------
-------------- ----------
----------------- -------------
---------------- --------------
-- --------
--------------- -------------------
-上面的代码中，我们为每个 SSE 消息增加了一个自增的 ID，用于标识该消息。在客户端重新连接后，服务器可以检查客户端最后一次接收到了哪个 ID 的消息，如果和服务器当前已发送的最后一个 ID 不同，则向客户端发送该 ID 后的所有消息，如下所示：
-- -------------------- ---- -------
--- ------------- - --
-------- ------------------- -
----------------------- ---------
-
-------- -------------------------- ---- -
---------------
------
---------------- -----------
--------------- --------------------
------------- ------------
---
-- -- --- --
----- ----- - ----------
----- ---- - ------- --------
----- -- - ----------------
-------------- ----------
----------------- -------------
---------------- --------------
-- --------
--------------- -------------------
-
-------- -------------------- ---- -
-------------------------- -----
------------- -- -- -
-- -------
------------------- ---------------
---
-- ------------------------------ -
----- ------ - -------------------------------------- ----
-- ----- --- --
-- ------- - -------------- -
-------------- ---------------------
----------------- ------------
---------------- ------ ----- -------------
-
-
-上面的代码中，我们在服务器端增加了一个路径为 /sse 的路由，用于处理 SSE 请求。当客户端连接到该路由时，服务器向客户端发送一条 SSE 消息，并监听客户端的断开连接事件。当客户端重新连接后，如果客户端最后一次接收到了 ID 为 1 的 SSE 消息，而服务器已经发送了 ID 1 和 2 的 SSE 消息，则服务器会向客户端发送 ID 2 的 SSE 消息，确保客户端不会错过任何 SSE 消息。
总结
SSE 是一种非常有用的 Web 技术，但在应用中可能会出现客户端断开连接的问题。为了解决这个问题，我们可以使用心跳机制和客户端重连机制。心跳机制可以保持连接畅通，客户端重连机制可以确保客户端不会错过任何 SSE 消息。除了这两种方法之外，我们还可以结合使用 WebSocket 和长轮询等技术，以提高应用的可靠性和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b04c7968c7c53b0d5fada