什么是 Server-Sent Events？
Server-Sent Events 是一种实现服务器向客户端推送数据的技术。它基于 HTTP 协议，使用长连接（长轮询）来实现服务器向客户端推送数据。相比于 WebSocket，Server-Sent Events 更加简单，仅需要一个 HTTP 连接即可，而且还支持自定义事件和自定义数据。
Server-Sent Events 的断开连接问题
Server-Sent Events 的长连接在遇到一些异常情况时，可能会断开连接，比如网络故障、服务器宕机等。这时，客户端需要重新连接服务器，但是如何判断连接已经断开呢？在这里，我们可以使用 EventSource 对象的 readyState 属性来判断连接状态。
EventSource 对象有一个 readyState 属性，它有以下几个值：
- 0：连接尚未建立
- 1：连接已经建立
- 2：连接已经关闭
当连接断开时，readyState 的值会变成 2。我们可以在 onerror 事件中监听 readyState 的变化来判断连接是否已经断开。下面是一个示例代码：
----- ------ - --- -------------------------
------------- - ---------- -
----------------------
--
---------------- - --------------- -
-------------------- ------------
--
-------------- - --------------- -
-- ------------------------ --- ------------------- -
----------------------
- ---- -
-------------------- -------
-
--在这个示例代码中，我们创建了一个 EventSource 对象，然后监听了它的 onopen、onmessage 和 onerror 事件。当连接建立时，会触发 onopen 事件；当收到消息时，会触发 onmessage 事件；当连接断开时，会触发 onerror 事件。在 onerror 事件中，我们判断 readyState 的值是否为 2，如果是，则说明连接已经断开。
如何重新连接服务器？
当连接断开时，客户端需要重新连接服务器。我们可以在 onerror 事件中重新创建一个 EventSource 对象来重新连接服务器。下面是一个示例代码：
--- -------
-------- --------- -
------ - --- -------------------------
------------- - ---------- -
----------------------
--
---------------- - --------------- -
-------------------- ------------
--
-------------- - --------------- -
-- ------------------------ --- ------------------- -
----------------------
---------- -- -------
- ---- -
-------------------- -------
-
--
-
----------在这个示例代码中，我们定义了一个 connect 函数来连接服务器。在 connect 函数中，我们创建了一个 EventSource 对象，并且监听了它的 onopen、onmessage 和 onerror 事件。当连接断开时，我们调用 connect 函数来重新连接服务器。
总结
本文介绍了 Server-Sent Events 的断开连接问题，并提供了如何判断连接状态和如何重新连接服务器的解决方案。在实际应用中，我们需要根据具体的业务需求来处理断开连接的情况，以保证客户端能够及时获取到服务器推送的数据。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66016363d10417a222c93c48