使用 Server-Sent Events 实现服务器端事件推送应用程序-JavaScript中文网-JavaScript教程资源分享门户

前言

在 Web 应用程序中，服务器通常是被动的，只有当客户端发起请求时才会响应。但是，有些场景需要服务器主动向客户端推送数据，例如实时聊天、实时数据监控等。传统的实现方式是使用长轮询或 WebSocket，但是这些方案都有一些缺点。长轮询需要频繁的网络连接和断开，WebSocket 的实现复杂度较高。Server-Sent Events（SSE）是一种新的解决方案，它可以轻松地实现服务器端事件推送应用程序。

什么是 Server-Sent Events

Server-Sent Events（SSE）是一种基于 HTTP 的服务器端事件推送技术，它允许服务器向客户端推送任意数据，而不需要客户端发起请求。SSE 使用简单的文本格式传输数据，可以轻松地与现有的 HTTP 服务器和客户端通信库集成。

SSE 的优点如下：

简单易用：SSE 使用简单的文本格式传输数据，可以轻松地与现有的 HTTP 服务器和客户端通信库集成。
可靠性高：SSE 基于 HTTP，可以使用现有的网络基础设施，具有很高的可靠性。
实时性好：SSE 支持实时数据传输，可以实现实时聊天、实时数据监控等应用程序。

如何使用 Server-Sent Events

服务端实现

服务端需要遵循以下规则来实现 SSE：

使用 HTTP 协议。
使用 text/event-stream 类型的 MIME 类型。
发送数据时，每个数据块之间以空行分隔。
每个数据块由一个或多个字段组成，每个字段由字段名和字段值组成，用冒号分隔。字段名可以为 data、event、id 和 retry。

下面是一个 Node.js 实现 SSE 的示例代码：

const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  });

  setInterval(() => {
    const data = `data: ${new Date().toLocaleTimeString()}\n\n`;
    res.write(data);
  }, 1000);
}).listen(3000);

该示例代码创建了一个 HTTP 服务器，每秒向客户端推送一个包含当前时间的数据块。

客户端实现

客户端需要使用 JavaScript 来实现 SSE。下面是一个使用浏览器原生 API 实现 SSE 的示例代码：

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

eventSource.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  console.log(data);
});

eventSource.addEventListener('error', (event) => {
  console.error(event);
});

该示例代码创建了一个 EventSource 对象，用于接收服务器推送的数据。当收到数据时，会触发 message 事件，可以在事件处理函数中处理数据。当发生错误时，会触发 error 事件，可以在事件处理函数中处理错误。

总结

Server-Sent Events 是一种简单易用、可靠性高、实时性好的服务器端事件推送技术。使用 SSE 可以轻松地实现实时聊天、实时数据监控等应用程序。需要注意的是，SSE 不支持双向通信，如果需要双向通信，可以使用 WebSocket。

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