什么是 SSE
SSE（Server-Sent Events）是一种用于实现服务器向客户端推送数据的技术。与传统的 Ajax 请求不同，SSE 通过一条持久连接向客户端发送数据，可以实时地将服务器端的数据推送给客户端，而不需要客户端不断地发送请求。
SSE 的优点
- 实时性：SSE 可以实时向客户端推送数据，可以在数据更新时立即通知客户端。
- 简单易用：SSE 的使用非常简单，只需要在客户端监听一条持久连接即可。
- 轻量级：SSE 的数据传输使用的是纯文本，比传统的 Ajax 请求更轻量级。
维护 SSE 连接状态的难点
SSE 的持久连接需要在客户端和服务器之间维护一个长时间的连接，这就需要保持连接的稳定性。在实际开发中，我们需要考虑以下几个问题：
- 连接的稳定性：SSE 的连接可能会因为网络原因中断，我们需要保证连接的稳定性并及时重连。
- 服务器端的状态：服务器端需要记录每个连接的状态，以便及时地向客户端推送数据。
- 客户端的状态：客户端需要记录连接的状态，以便在连接中断后及时重连。
维护 SSE 连接状态的解决方案
为了解决上述问题，我们可以分别在服务器端和客户端维护连接状态，具体实现如下：
服务器端的实现
在服务器端，我们需要维护每个连接的状态，以便及时向客户端推送数据。具体实现如下：
-- -------------------- ---- -------
----- ---- - ----------------
-- ---------
----- ------- - ---
-- -- ---- ---
----- ------ - ----------------------- ---- -- -
-- -----
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-- ---------
----- ------ - -
--- -----------
----
--
---------------------
-- -------
-------------- -----------------
---------------- ------------------ ----- ------- -------- ------ ----------
-- --------
--------------- -- -- -
-- -----------
--------------------------------------- ---
---
---
-- ---------
-------- ---------- -
------------------------ -- -
----------------------- ------------------------------
---
-
-- ------
-------------- -- -
------ ----- --------- -------- ------ ---
-- ------
-- -- ---- ---
------------------- -- -- -
------------------- ------- -- ---- -------
---在上面的代码中，我们创建了一个 HTTP 服务器，并维护了一个连接状态的数组 clients。在客户端连接成功后，我们将连接对象加入数组，并向客户端发送初始化数据。在数据更新时，我们通过 send 函数向所有连接推送数据。在客户端连接关闭时，我们将连接对象从数组中删除。
客户端的实现
在客户端，我们需要维护连接的状态，以便在连接中断后及时重连。具体实现如下：
-- -------------------- ---- -------
----- ------ - --- --------------------
------------- - ------- -- -
----------------------- ---------
--
---------------- - ------- -- -
------------------------ ------------
--
-------------- - ------- -- -
----------------------- -------
---------------
--
------------------------------- ------- -- -
--------------------------- ------------------------
---
--------------------------------- ------- -- -
----------------------- ------------------------
---
--------------------------------------- -- -- -
---------------
---
-------- ----------- -
-------------------------------
---------------
------------- -- -
-------
-- ------
-
-------- ------ -
-------------------------------
----- ------ - --- --------------------
------------- - ------- -- -
----------------------- ---------
--
---------------- - ------- -- -
------------------------ ------------
--
-------------- - ------- -- -
----------------------- -------
------------
--
------------------------------- ------- -- -
--------------------------- ------------------------
---
--------------------------------- ------- -- -
----------------------- ------------------------
---
--------------------------------------- -- -- -
---------------
---
-
-------在上面的代码中，我们创建了一个 EventSource 对象，并监听了 open、message、error 事件。在连接成功后，我们向控制台输出连接成功的信息。在接收到数据时，我们向控制台输出接收到的数据。在连接出错时，我们向控制台输出错误信息，并调用 reconnect 函数进行重连。在页面关闭前，我们关闭连接。在初始化成功时，我们向控制台输出初始化成功的信息。在数据更新时，我们向控制台输出更新的信息。在重连时，我们调用 init 函数进行重新初始化。
总结
维护 SSE 连接状态是一个比较复杂的问题，但我们可以通过在服务器端和客户端分别维护连接状态来解决。在实际开发中，我们需要考虑网络原因导致连接中断的情况，以便及时重连。同时，我们需要在服务器端记录每个连接的状态，以便及时向客户端推送数据。在客户端，我们需要记录连接的状态，以便在连接中断后及时重连。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6637e1fcd3423812e460271d