什么是 SSE？
SSE（Server-Sent Events）是一种基于 HTTP 的协议，用于服务器向浏览器推送消息。与传统的轮询或长轮询（Polling 或 Long Polling）相比，SSE 更加高效、实时和可靠。
SSE 通过建立一条持久化的 HTTP 连接，将服务器端的事件流（Event Stream）实时地推送到客户端。每个事件包含一个标识符（Event ID）、一个类型（Event Type）和一个数据（Event Data），浏览器通过监听消息事件（onmessage）来接收服务器端推送的消息。
SSE 的优点包括：
- 省略了轮询或长轮询的 HTTP 请求和响应头，减少了网络带宽和 CPU 负载的消耗；
- 建立了一条持久化的连接，避免了频繁地连接和断开；
- 可以方便地发送任意格式的数据（如文本、JSON、XML 等），而不需要额外的编解码工作。
SSE 中的连接中断和重连
与 WebSocket 不同，SSE 的连接是单向的，即只能由服务器端向客户端发送消息，客户端无法主动向服务器发送消息。因此，在 SSE 中，只有客户端断开连接，服务器才能获知连接中断的信息。
客户端断开连接的原因有多种，比如网络故障、浏览器崩溃、浏览器窗口关闭等。为了能够及时发现连接中断的情况，并进行重连，需要在客户端添加一些相关的逻辑。
在客户端代码中，我们可以监听连接的状态（readyState），并监测其值的变化。连接状态的值一般包括以下四个：
(0) CONNECTING：正在连接服务器；(1) OPEN：连接已经建立，并正在接收服务器的消息；(2) CLOSED：连接已关闭；(3) SENDING：连接正在发送消息（一般不会用到）。
如果连接状态变为 CLOSED，说明客户端已经断开了连接，可以尝试进行重连。在进行重连时，需要重新建立一个新的 EventSource 实例，并将原实例的事件监听器及数据存储到新实例中。
下面是一个示例代码，演示了如何处理连接中断和重连情况：
-- -------------------- ---- -------
--- ----------- - -----
--- ---------- - ---
--- -------------- - -----
-------- --------- -
----------- - --- ----------------- -------
------------------ - ---------- -
---------------------- -- ----------
--
--------------------- - --------------- -
--------------------- -------- -- ------------
-- ----- ----------
--
------------------- - --------------- -
----------------------- ------ -- -------
-- ----------------------- --- ------------------- -
-- ----------
------------
-
--
-- ------------- ----------- ---
-- ------------------ - -- -
-------------------- ------ ----------
---------------------------------- -
---------------------------------
---
---------- - ---
-
-
-------- ----------- -
------------------------- -- ------------
-- --------------- --- ----- -
-- -- - ------
-------------- - --------------------- -
-------------- - -----
----------
-- ------
-
-
-- ----
----------在这个示例中，我们使用了一个全局的 eventSource 变量保存了 EventSource 的实例。当连接断开后，可以重新建立一个新的 EventSource 实例，并将原实例的事件监听器及数据存储到新实例中。
如果在断开连接之前，有一些事件数据已经被服务器端推送过来，但尚未被浏览器端处理，我们可以将这些数据缓存，并在重连后重新发送到服务器端。这样可以确保数据不会丢失，且不会重复发送。
总结
SSE 是一种实时推送消息的协议，通过建立持久化的 HTTP 连接，可以实时地将服务器端的事件流推送到浏览器端。但是，在实际使用中，我们应该考虑到连接中断和重连的情况，以确保消息的可靠性和稳定性。
通过监听连接状态的变化，可以及时发现连接的中断情况，并进行重连。在重连时，我们可以使用缓存机制确保之前未处理的事件数据被重新发送，从而避免数据丢失和重复发送的问题。
在实际开发中，我们还可以使用第三方的 SSE 库，如 EventSourcePolyfill 等，以兼容不同浏览器的 SSE 实现，并提供更加丰富的 API 和功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64719220968c7c53b0f6f0f4