什么是 SSE？
SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器推送技术，它可以让服务器实时向客户端发送数据，并且客户端可以在接收到数据后自动更新页面内容，而不需要手动刷新页面。
SSE 的工作原理是通过建立一个长连接，服务器向客户端持续发送数据，客户端通过监听 EventSource 对象的 message 事件来接收数据。
WebSocket 与 SSE 的区别
WebSocket 是一种双向通信协议，可以让客户端和服务器之间实时地进行双向通信，而 SSE 只能让服务器向客户端单向发送数据。
由于 WebSocket 支持双向通信，因此在实时性和效率上比 SSE 更加优秀。但是，WebSocket 的实现比 SSE 更加复杂，因此在一些场景下，SSE 可以作为 WebSocket 的替代方案。
WebSocket 断开后的自动重连
在使用 WebSocket 时，由于网络等原因，WebSocket 可能会断开连接。为了保证 WebSocket 的稳定性，我们通常需要在 WebSocket 断开后自动重连。
而对于 SSE，由于 SSE 只能由服务器向客户端发送数据，因此在 SSE 断开后，我们只需要重新创建一个 EventSource 对象即可。
下面是一个 WebSocket 断开后自动重连的示例代码：
-- -------------------- ---- -------
--- -- - -----
--- -------------- - -----
----- ----- - -------------------
-------- --------- -
-- - --- -----------------
--------- - -- -- -
---------------------- -------
-----------------------------
--
------------ - ------- -- -
----------------------------------
--
---------- - -- -- -
---------------------- -------
------------
--
---------- - -- -- -
---------------------- -------
------------
--
-
-------- ----------- -
--------------------- ------------
-------------- - ------------- -- -
----------
-- ------
-
----------在上面的代码中，我们使用了一个 connect() 函数来创建 WebSocket 连接，并在 onopen、onmessage、onclose 和 onerror 四个事件中处理连接状态和数据接收的逻辑。
当 WebSocket 连接断开时，我们调用了一个 reconnect() 函数来重新连接 WebSocket，并且在 reconnect() 函数中使用了一个定时器来延迟 5 秒后重新连接。
对于 SSE，我们可以使用类似的方式来实现自动重连的功能。下面是一个 SSE 自动重连的示例代码：
-- -------------------- ---- -------
--- -- - -----
--- -------------- - -----
----- ----- - -------------------------
-------- --------- -
-- - --- -------------------
--------- - -- -- -
---------------- -------
-----------------------------
--
------------ - ------- -- -
----------------------------------
--
---------- - -- -- -
---------------- -------
------------
--
-
-------- ----------- -
--------------------- ------
-------------- - ------------- -- -
----------
-- ------
-
----------在上面的代码中，我们使用了一个 connect() 函数来创建 SSE 连接，并在 onopen、onmessage 和 onerror 三个事件中处理连接状态和数据接收的逻辑。
当 SSE 连接错误时，我们调用了一个 reconnect() 函数来重新连接 SSE，并且在 reconnect() 函数中使用了一个定时器来延迟 5 秒后重新连接。
总结
本文介绍了 SSE 的基本原理和 WebSocket 断开后自动重连的实现方法，并且给出了示例代码。在实际项目中，我们需要根据具体情况选择 SSE 或 WebSocket，并根据需求实现自动重连的功能，以保证连接的稳定性和实时性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6630627fd3423812e4e4c2c7