如何在现代 Web 应用程序中使用 SSE（Server-Sent Events）-JavaScript中文网-JavaScript教程资源分享门户

什么是 SSE？

SSE（Server-Sent Events）是一种基于 HTTP 的单向通信协议，允许服务器向客户端推送数据。传统的 HTTP 响应是基于请求和响应的，客户端发送请求，服务器返回响应，而 SSE 允许服务器在任何时候向客户端发送数据，而客户端不需要不停地发送请求，可以减少网络负载和延迟。

为什么要使用 SSE？

在一些场景下，服务器需要实时向客户端推送数据，例如实时数据更新、聊天程序等。SSE 提供了一种简单、可靠的方式来实现实时数据传输，而不需要使用 WebSocket 或其他更复杂的技术。

另外，SSE 与标准的 HTTP 响应相比，具有更好的兼容性和可用性。它不需要任何特殊的库和插件，而且能够在所有现代浏览器和设备中使用。

如何使用 SSE？

基本使用方法

SSE 是基于 EventSource 接口来实现的。在客户端，我们可以通过创建一个 EventSource 对象来与服务器建立连接，并监听 server-sent 事件。服务器端需要发送一个包含“Content-Type: text/event-stream”头部的响应，并以“data:”开头的行来发送数据。

下面是一个简单的 SSE 消息推送示例，服务端使用 Node.js：

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

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

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

在客户端，我们可以通过以下方式接收 SSE 数据：

const source = new EventSource('/sse');

source.addEventListener('message', e => {
  console.log(e.data);
});

客户端将会每秒钟收到一个类似“data: 14:23:46\n\n”的字符串，表示当前时间。

事件类型和数据格式

在服务端发送的 SSE 数据中，可以使用以下事件类型和数据格式：

data：一条普通的消息，以“data:”开头。例如：
```
res.write("data: this is a message\n\n");
```

event：指定一个事件名称。例如：

res.write("event: myEvent\ndata: some data\n\n");

id：为消息指定一个 ID。例如：
```
res.write("id: 123\ndata: some data\n\n");
```
客户端可以通过 EventSource 对象的 lastEventId 属性获取以前接收到的最后一个 ID。服务器端可以使用“Last-Event-ID”头部指定起始 ID。
retry：在连接中断后，客户端自动重连的时间间隔。例如：
```
res.write("retry: 10000\n\n");
```

服务端发送多个事件

服务端可以在一个响应中发送多个事件，只需要在每条消息之间加入一个空行即可。例如：

res.write("event: firstEvent\ndata: some data\n\n");

res.write("event: secondEvent\ndata: some data\n\n");

在客户端，我们可以使用 addEventListener 来监听不同的事件类型：

source.addEventListener('firstEvent', e => {
  console.log('Received firstEvent:', e.data);
});

source.addEventListener('secondEvent', e => {
  console.log('Received secondEvent:', e.data);
});

可以使用哪些浏览器？

SSE 是一个规范化的技术，所有标准符合规范的浏览器和设备都可以支持。以下是一些常见的支持 SSE 的浏览器和版本：

Chrome 6+
Firefox 6+
Safari 5+
Opera 11.6+
Edge 12+

总结

SSE 提供了一种简单、可靠的方式来实现实时数据传输，无需使用 WebSocket 等更复杂的技术。在本文中，我们学习了 SSE 的工作原理、基本用法和常见的数据格式。通过实现一个简单的 SSE 消息推送示例，我们可以更好地理解 SSE 在现代 Web 应用程序中的用途。

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