如何在 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 的代码示例：

const express = require("express");
const sseExpress = require("sse-express");

const app = express();

app.get("/sse", sseExpress(), (req, res) => {
  setInterval(() => {
    const data = JSON.stringify({ foo: "bar" });
    res.sse({ event: "ping", data, id: Date.now() });
  }, 1000);
});

app.listen(3000);

总结

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

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

如何在 JavaScript 中使用 Server-sent Events(SSE) 轻松实现数据推送

介绍