在 Web 应用程序中，连接状态始终是一个关键问题。随着许多 Web 应用程序使用 AJAX 技术进行实时更新，我们必须找到更好的方式来检测服务器的连接状态。其中一种解决方案是使用 Server-sent Event (SSE)。
SSE 是一种允许在 Web 浏览器中创建实时连接的技术。它允许 Web 服务器推送事件到客户端，并允许客户端通过事件流与服务器保持长时间连接。在本文中，我们将讨论如何使用 SSE 检测服务器连接状态。
实现 SSE
SSE 的实现非常简单。你需要在服务器上设置一个端点（endpoint），允许客户端通过 HTTP 连接到该端点，并从该端点接收事件流。下面是一个使用 Node.js 和 Express 框架创建 SSE 端点的示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
------------------ ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-- ---- -- ------- ----- ---- --------- --- ---------- --- ----------
----------------- ----------------
-- ---- --- ---------- ---- -- ------- - ------ ------- ----- - -------
-------------- -- -
----------------- -----------
-- ------
-- ------ --- ------ -------------
--------------- -- -- -
----------------------- ---------
---
---
---------------- -- -- -
---------------- ------ ------- -- ---- -------
---在上面的代码中，当客户端通过 HTTP GET 请求'/events' 端点时，服务器会将其响应头设置为 SSE 格式，然后发送一个名为“connected”的事件，该事件用于表示连接成功。接下来，服务器使用间隔定时器每 5 秒钟将一条名为“ping”的消息发送到客户端，以保持连接保持打开状态。
最后，我们监听客户端是否断开了连接。一旦客户端断开连接，我们就在服务器上记录一条消息。
当连接断开时，执行任意操作
现在我们可以在浏览器中打开 SSE 端点并检查服务器连接状态。但是，我们可能还需要在检测到服务器连接状态故障时执行一些其他操作。以下是在连接断开时执行操作的示例代码：
-- -------------------- ---- -------
----- ----------- - --- -----------------------
------------------------------------- ----- -- -
-- ------------------------ --- ------------------- -
------------------- ---------------
-- -- --------- ---- --- ------ -----------
- ---- -- ------------------------ --- ----------------------- -
----------------------- -- --------- -- ------------
-- -- --------- ---- ---------- -- --------- -- ------
-
---在上面的代码中，我们使用 EventSource API 连接到 SSE 端点。然后，我们添加一个事件监听器，以便在连接状态发生变化时进行处理。
如果连接被关闭，则我们可以执行一些操作（例如在 UI 中显示一个错误消息）。如果正在重新连接，则我们可以执行一些其他操作（例如向用户显示正在重新连接的消息）。
总结
在本文中，我们介绍了如何使用 SSE 检测服务器连接状态。通过创建 SSE 端点并在客户端上监听连接状态，我们可以轻松地检测服务器连接状态，以便在连接故障时执行任意操作。SSE 技术十分实用，对于任何需要实时连接的 Web 应用程序都很有价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6454b5b3968c7c53b087f768