Server-Sent Events 的使用约定及其好处-JavaScript中文网-JavaScript教程资源分享门户

Server-Sent Events （SSE）是一种实现服务器向客户端推送数据的标准化技术。相比于传统的轮询或长轮询方式，SSE 是更加高效和可靠的。在前端开发中，SSE 可以用来实现实时通信、实时更新数据等功能。本文将介绍 SSE 的使用约定及其好处，并提供示例代码进行演示。

SSE 的使用约定

服务器端

在服务器端，需要通过特定的响应头来开启 SSE。响应头的格式如下：

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

Content-Type 指定响应体的 MIME 类型为 text/event-stream，表示服务器会向客户端推送事件流。
Cache-Control 设置缓存控制，no-cache 表示禁用缓存。
Connection 设置连接方式，keep-alive 表示持久连接，即保持连接状态不断开。

在响应体中，每个事件由多个行组成，每行以 \n 结尾。行的格式如下：

event: [事件名称]\n
data: [事件数据]\n\n

其中，event 行和 data 行是可选的，但它们必须以 \n\n 结尾。event 行用于指定事件的名称，data 行用于传递事件的数据。例如：

event: message\n
data: Hello, world!\n\n

表示一个名为 message 的事件，它的数据是字符串 "Hello, world!"。

客户端

在客户端，可以使用 JavaScript 的 EventSource 对象来建立 SSE 的连接。使用方法如下：

const eventSource = new EventSource(url);
eventSource.onmessage = function(event) {
  const data = event.data;
  console.log(data);
};

其中，url 参数指定 SSE 的 URL，onmessage 事件处理函数用于接收服务器推送的事件。

SSE 的好处

相比于传统的轮询或长轮询方式，SSE 具有以下好处：

实时性更高

SSE 可以建立持久连接，服务器可以在任何时候向客户端推送数据，客户端可以即时接收到数据，实时性更高。

带宽占用更小

传统的轮询或长轮询方式需要不断地向服务器发送请求，带宽占用较大。而 SSE 建立持久连接后，只需要在建立连接时发送一次请求，之后服务器向客户端推送数据时不需要再发送请求，带宽占用更小。

错误处理更容易

在传统的轮询或长轮询方式中，如果请求出错了，需要重新建立连接。而 SSE 建立持久连接后，服务器和客户端之间的连接一直存在，如果出现错误可以及时捕捉并处理。

示例代码

下面是一个 SSE 的示例，当服务器响应 SSE 时，将每隔 2 秒向客户端发送一次事件数据：

服务器端代码

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

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

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

客户端代码

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

在运行代码后，打开浏览器访问 http://localhost:8080，可以看到页面每隔 2 秒会自动更新一次，显示新的消息。可以通过查看控制台或网络面板，确认 SSE 的连接状态。

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

Server-Sent Events 的使用约定及其好处