SSE（Server-Sent Events）是一种服务器推送技术，能够让服务器实时地将数据发送到客户端，而不需要客户端不断地向服务器请求。这种技术在现代 Web 应用中越来越常见，因为它可以降低网络带宽的使用量，同时也可以提高应用的实时性和性能。
然而，在使用 SSE 时，有一个重要的问题需要考虑：客户端断电的情况。如果客户端在连接到服务器时意外断电了，那么服务器可能仍然会发送消息到这个客户端，但是这些消息将无法接收到。这个问题有两个解决方案。
方案一：设置心跳
设置心跳是最常用的 SSE 断线重连方案。可以在客户端上使用 JavaScript 的 setInterval 函数每隔一段时间向服务器发送心跳请求，以确保连接状态。如果服务器没有收到心跳请求，就可以将客户端标记为已断开连接。以下是实现 SSE 心跳的示例代码：
const source = new EventSource('/sse')
setInterval(() => {
source.dispatchEvent('ping')
}, 10000) // 10 秒发送一次心跳在服务器端，你需要监听心跳请求并回复一个空消息，以保持连接状态。以下是 Node.js 中 SSE 心跳的示例代码：
-- -------------------- ---- -------
--------------- ----- ---- -- -
------------------------
----------------------------- --------------------
------------------------------ -----------
--------------------------- -------------
-------------------- -- -------
--------------- -- -- -
-- ------------
--
-------------- -- -
----------------- ---------- -- ------
-- ----- -- - -------
--通过设置心跳，服务器可以监控客户端连接状态并及时处理掉线的情况，从而提高应用的实时性和性能。
方案二：使用自定义的 ACK 消息
如果设置心跳不太可行，那么可以考虑使用自定义的 ACK（Acknowledgment）消息。在 SSE 连接上，服务器会定期向客户端发送消息，而客户端可以通过发送一个 ACK 消息告诉服务器，自己已经接收到了最后一个消息。如果服务器长时间没有收到客户端的 ACK 消息，就可以将客户端标记为已断开连接。以下是实现 SSE 自定义 ACK 消息的示例代码：
-- -------------------- ---- -------
----- ------ - --- -------------------
--- ----------- - ----
--- -------- - ----
---------------------------------- ----- -- -
----------- - -----------------
----------------------
-------- - ------------- -- -
---------------------------
-- ----- -- - ----- --- --
--
------------------------------ -- -- -
----------------------
--在服务器端，你需要在每个消息中加上 id 字段，并在 ACK 消息中回复最后一个接收到的消息的 id，以便客户端可以识别消息的顺序。以下是 Node.js 中 SSE 自定义 ACK 消息的示例代码：
-- -------------------- ---- -------
--------------- ----- ---- -- -
------------------------
----------------------------- --------------------
------------------------------ -----------
--------------------------- -------------
--- ------- - -
--------------------
-------------- -- -
----- ---- - ------ ----------- ------- ------ ----- ------------------
---------------
------- -- -
-- ----- -- --------
--------------- -- -- -
-- ------------
--
--通过使用自定义的 ACK 消息，服务器可以跟踪消息的顺序，并及时处理客户端断电的情况，从而提高应用的可靠性和稳定性。
结论
在使用 SSE 时，你需要考虑客户端断电的情况，并采取适当的措施来确保应用的实时性、性能、可靠性和稳定性。可以通过设置心跳或使用自定义的 ACK 消息来解决这个问题。无论哪种方案，都需要在客户端和服务器端共同实现，才能发挥效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670d0b5e5f551281025c469b