Server-Sent Events 断开连接后的重连机制

阅读时长 5 分钟读完

Server-Sent Events (SSE) 是一种用于实现服务器向客户端推送数据的技术。与 Ajax 和 WebSocket 不同,SSE 使用 HTTP 协议,因此能够在不支持 WebSocket 的环境下使用。相比较于 Ajax 轮询,SSE 拥有更低的延迟和更高的效率。但是,SSE 却存在一个问题:一旦连接断开,就需要通过重连机制重新建立连接。

SSE 原理

SSE 的原理是使用独立的 HTTP/TCP 连接,使得服务端可以通过这个连接向客户端发送数据。客户端使用 EventSource API 与服务端建立连接,并通过注册事件句柄接收服务端发送的信息。

服务端发送的数据使用文本格式,以 "data:" 开头,以 "\n\n" 结尾,例如:

客户端通过监听 "message" 事件处理函数接收数据:

此外,SSE 还支持事件类型(event),用于区分不同类型的消息,以及 ID 字段,用于识别消息的唯一性。

断开连接后的重连机制

由于 SSE 使用的是 HTTP/TCP 连接,因此在网络不稳定或者发生其他异常情况时,连接可能会断开。为了保证数据的稳定传输,SSE 需要通过重连机制来重新建立连接。

首先,客户端需要监听 "error" 事件,以便检测连接是否断开:

然后,我们需要实现一个重连函数,用于重新建立连接:

-- -------------------- ---- -------
-------- ---------------------- -
  -------------------------------
  --------------------- -
    ----------- - --- -----------------------
    --------------------------------------- --------------- -
      --------------------- ---------- ------------
    ---
    ------------------------------------- --------------- -
      -----------------------
    ---
  -- ------ -- - ------
-
展开代码

当连接断开时,重连函数将会被调用,并在 1 秒后尝试重新建立连接。在重新连接过程中,客户端需要重新注册 "message" 事件和 "error" 事件,以便处理新的数据和连接异常。

示例代码

下面是一个完整的示例代码,对 SSE 断开连接后的重连机制进行了实现:

服务端代码:

-- -------------------- ---- -------
-- --------
----- ---- - ----------------

------------------------------- ---- -
  ------------------ -
    --------------- --------------------
    ---------------- -----------
    ------------- ------------
  ---

  ---------------------- -
    ---------------- - - --- --------------------------- - --------
  -- ------

--------------- ---------- -
  ------------------- --------- -- ---- ----------
---
展开代码

客户端代码:

-- -------------------- ---- -------
-- ----------
--------- -----
------
------
  ----- ----------------
-------
------
  --------
    ----- ----------- - --- -----------------------
    --------------------------------------- --------------- -
      --------------------- ---------- ------------
    ---
    ------------------------------------- --------------- -
      -----------------------
    ---

    -------- ---------------------- -
      -------------------------------
      --------------------- -
        ----------- - --- -----------------------
        --------------------------------------- --------------- -
          --------------------- ---------- ------------
        ---
        ------------------------------------- --------------- -
          -----------------------
        ---
      -- ------ -- - ------
    -
  ---------
-------
-------
展开代码

运行上面的代码,打开浏览器访问 "http://localhost:8080",可以在控制台中看到每秒钟输出一个时间戳。在控制台中,可以模拟网络中断的情况,观察断开连接后的重连过程。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67c283b7314edc2684bd7a18

纠错
反馈

纠错反馈