在现代的 Web 应用程序中，往往需要实时地通知用户有关事件的发生。HTTP 协议本身是一种无状态的协议，但可以使用长连接技术来保持连接状态并实现实时通信。其中，Server-sent Events（SSE）是一个常用的长连接实现方案。
本文将介绍 Server-sent Events 的基本原理，并详细讨论如何实现 SSE 长连接的健康检测及恢复机制，以保证连接的稳定性和可靠性。
Server-sent Events 基本原理
Server-sent Events 是一种简单的协议，用于在 Web 浏览器与服务器之间建立长连接。该协议基于 HTTP 协议，使用一种类似于 Comet 的技术，允许服务器向客户端发送事件流（Event Stream）。Event Stream 是一系列的文本块，它们由两个换行符分隔开。每个文本块包含一条事件，通常是 JSON 格式的文本。
创建链接的代码如下：
const eventSource = new EventSource('http://example.com/stream');当客户端连接到服务器的 SSE 端点时，服务器会将一个 HTTP 响应头设为 Content-Type: text/event-stream; charset=utf-8，并向客户端发送 data: 的消息前缀，表示事件流的开始。接下来，服务器会将一系列事件推送到客户端，每个事件以 data: 开头，并以两个换行符结尾（\n\n）。例如，这是一个名为 heartbeat 的事件：
data: {"event":"heartbeat","timestamp":"2021-11-02T08:00:00.000Z"}
客户端可以使用 EventSource API 来监听事件，并在收到事件时触发相应的事件处理程序：
eventSource.addEventListener('heartbeat', function(event) {
console.log(event.data);
});长连接的健康检测
虽然 SSE 能够保持连接状态，但实际的网络环境中可能出现多种问题，如网络断开、服务器宕机等。在这些情况下，长连接将无法正常工作，客户端将不再收到事件。因此，为了确保 SSE 长连接的稳定性和可靠性，需要实现一种健康检测机制，可以及时发现连接故障并采取相应的恢复措施。
心跳检测
一种常见的健康检测方法是定时发送心跳事件，并在一定时间内检测是否接收到服务器的响应。例如，以下代码将每隔 30 秒发送一个名为 ping 的心跳事件，并在 5 秒内检测是否收到名为 pong 的响应：
-- -------------------- ---- -------
----- ----------- - --- -----------------------------------------
--- ------- - -----
-------- ---------- -
------------------------------
-
-------- ----------- -
---------------------- -- -----
------- - --------------------- -
-------------------- -- ------------ --- --
-- ------ -- -- - --
-
------------------------------------ --------------- -
------------------------------
---
------------------------------------ --------------- -
------------
---
----------- -- ---------
-- -- -- ---------
--------------------- -------在每个心跳事件中，服务器需要回应一个与客户端发送的心跳事件相匹配的事件（例如，响应名为 pong 的事件），以表明连接仍然活动。客户端在收到响应后，立即发送下一个心跳事件。如果在一定时间内未收到响应，则认为连接已断开，需要关闭 SSE 连接。
断线重连
即使定期发送心跳事件，SSE 连接仍然可能由于网络波动或服务器故障而中断。在这种情况下，可以采取一些机制来恢复连接。
一种实现 SSE 断线重连的方法是使用 EventSource 的 onerror 事件来检测连接故障，并在一段时间后尝试重新连接 SSE 端点。以下代码演示了如何实现基本的 SSE 断线重连机制：
-- -------------------- ---- -------
----- -------------- - ----------------------------
--- ----------- - -----
--- ------- - -----
--- ------------- - ----- -- ------ --- -------
-------- --------- -
----------- - --- ----------------------------
----------------------------------------- --------------- -
------------------------
---
------------------------------------- --------------- -
------------------ ---------- -------- -------
--------
---
-
-------- ------- -
---------------------- -- -----
------- - --------------------- -
--------------------- --- ----------------
---------- -- ---- --- --
-- ---------------
-
---------- -- ---- --- --在每次出现错误时，都会调用 retry 函数，该函数会等待一段时间后尝试重新连接 SSE 端点。可以根据实际情况调整等待时间和尝试次数以减少错误重试的影响。
总结
本文介绍了 Server-sent Events 的基本原理，以及如何实现 SSE 长连接的健康检测及恢复机制。通过在客户端发送心跳事件，并检测服务器是否正确响应，可以及时发现连接故障并采取相应的恢复措施。SSE 断线重连机制可以保证连接的稳定性和可靠性，提高实时通信的用户体验。
完整示例代码：https://gist.github.com/voicycoder/771fba17390956705f0a72214e010cf5
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648cf44248841e9894b40d90