在前端开发中，我们经常需要与服务器进行实时数据传输，Server-sent Events (SSE，服务器推送事件) 是其中一种常用的方式。 SSE 允许服务器向客户端发送实时数据流，而客户端不需要轮询来获取最新的数据。但在实际应用中，由于网络等各种原因，可能会出现连接断开的情况，这时就需要断线重连机制来保证实时数据的可靠性。
SSE 的断线重连原理
在 SSE 中，客户端通过建立一个长连接与服务器保持连接。在连接正常时，服务器可以主动收到客户端发送过来的数据，并通过事件流返回新的数据流。但当连接出现问题时，如断网、服务器重启等原因，客户端与服务器的连接就会断开。这时，SSE 会自动发起重新连接机制，以确保服务器与客户端的连接不中断，保证实时数据传输的可靠性。
SSE 的断线重连实现
为了实现 SSE 的断线重连机制，我们需要在客户端注册一个监听事件，以便于在连接断开时重新发起连接。同时，客户端也需要记录当前连接的状态，并根据连接状态来判断是否执行重连操作。
以下示例代码是一个基本的 SSE 服务端和客户端的实现，同时添加了断线重连机制的支持：
服务端代码
-- -------------------- ---- -------
----- ---- - ----------------
------------------------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
---------------------- -
-- ---------
---------------- ----- -----------
-- ------
----------------客户端代码
-- -------------------- ---- -------
--- ------ - --- -----------------------
--- ------------- - ----- -- ------
------------- - ----------- -
---------------- ---------- ---------
--
-------------- - ----------- -
-- --------------- -
---------------- ---------- ------- ------------------
--------------------- -
------ - --- -----------------------
------------- - ----- -- -------------
-- ------
-
--
---------------- - ----------- -
---------------- ---- --------- - - --------
--
-------------- - ---------- -
---------------- ---------- ---------
------------- - ------ -- -------
--在客户端的代码中，我们首先定义了一个 connectStatus 变量来标记当前连接的状态。在连接正常时，该变量的值为 true。在连接断开时，该变量的值将被更新为 false。当连接断开时，我们会在 onerror 回调函数中检查 connectStatus 的值，再决定是否重新连接服务器。
结论
Server-sent Events 是一种非常便利实用的前端实时数据传输方式。加入断线重连机制的支持，可以保证客户端与服务器之间的连接不间断，有效保障实时数据的可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6700fa8e0bef792019afcc01