如何在 JavaScript 中使用 Server-sent Events(SSE) 轻松实现数据推送-JavaScript中文网-JavaScript教程资源分享门户

介绍

Server-sent Events (SSE) 是 HTML5 的一个重要特性，可以轻松地实现浏览器对服务器的数据推送。它是一种单向的、基于 HTTP 的数据传输协议，与 WebSocket 相比，SSE 的优势在于它只需要简单的 HTTP 连接，不需要额外的握手过程，适用于一些比较简单的数据推送场景。本文将介绍如何在 JavaScript 中使用 SSE 实现数据推送。

SSE 基础

SSE 的格式

SSE 推送的数据格式是以下三个字段的组合：

event: <事件名称>
data: <数据>
id: <消息ID>

其中，event 字段表示事件名称，data 字段表示数据，id 字段表示消息ID。在推送数据时，可以同时发送多个字段的信息给浏览器，但 data 字段是必须的。

举个例子，以下是一个 SSE 推送的数据格式：

event: update
data: {"foo": "bar"}
id: 123

SSE 的流程

SSE 的通信过程是基于 HTTP 的，其流程如下：

客户端向服务器发送 HTTP 请求，将 Accept 头部设置为 text/event-stream，以指定该请求是一个 SSE 请求。
服务器向客户端发送响应，响应头中包含 Content-Type: text/event-stream 字段，以告诉浏览器该响应是 SSE 响应。同时，数据以 SSE 格式作为 payload 发送。
客户端接收到 SSE 数据后，可以通过 JavaScript 监听 message 事件，来处理数据。

SSE 的浏览器兼容性

SSE 的兼容性情况可以查看 Can I use SSE。

如何使用 SSE

使用 SSE 的 API 实现数据推送

浏览器提供了 EventSource 接口来使用 SSE。使用 EventSource 的步骤如下：

创建一个 EventSource 对象，指定 SSE 数据的 URL。
监听 message 事件，处理 SSE 数据。

以下是使用 EventSource 的代码示例：

const eventSource = new EventSource("/sse");
eventSource.onmessage = (event) => {
  console.log("event:", event.type); // 查看事件类型
  console.log("data:", event.data); // 获取数据
  console.log("lastEventId:", event.lastEventId); // 获取最后一条消息 ID
  // 处理数据......
};

服务器端推送 SSE 数据

服务器端可以使用一些库来推送 SSE 数据，比如 Node.js 中的库 sse-express。使用该库的步骤如下：

在服务器端设置路由，响应 SSE 请求，使用 res.sse() 方法发送数据。
在客户端监听 message 事件，处理 SSE 数据。

以下是使用 sse-express 的代码示例：

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

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

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

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

总结

本文介绍了如何在 JavaScript 中使用 SSE 实现数据推送，SSE 是一种基于 HTTP 的传输协议，适合一些比较简单的数据推送场景。我们可以使用浏览器提供的 EventSource 接口来实现数据接收，也可以在服务器端使用一些库来推送数据给客户端。

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