Server-sent Events：利用 HTTP 协议推送数据的最佳方案-JavaScript中文网-JavaScript教程资源分享门户

什么是 Server-sent Events？

Server-sent Events（SSE）是一种基于 HTTP 协议的服务器推送技术，可以实现服务器向客户端实时推送数据。与传统的轮询或长轮询方式不同，SSE 可以在客户端与服务器之间建立一条持久化的连接，服务器可以在任何时候向客户端推送数据，而客户端则可以通过 EventSource API 接收到这些数据。

SSE 的优点

相比于传统的轮询或长轮询方式，SSE 有以下优点：

实时性更好，服务器可以立即向客户端推送数据，而不需要等待客户端的请求。
减少了网络流量，因为没有了不必要的请求和响应。
更加高效，服务器可以一次性向多个客户端推送数据，而不需要为每个客户端都单独发送数据。

如何实现 SSE

服务端实现

在服务端，我们需要设置响应头 Content-Type 为 text/event-stream，并且在数据的末尾加上两个换行符，表示一条 SSE 的结束。另外，我们还需要设置一个 event 字段，用于指定 SSE 的事件类型，以及一个 data 字段，用于指定 SSE 的数据内容。

示例代码：

// javascriptcn.com 代码示例
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(8080);

客户端实现

在客户端，我们可以通过 EventSource API 来接收 SSE 数据。在创建 EventSource 对象时，需要指定 SSE 的服务端地址，并且可以监听 message 事件来接收 SSE 数据。

示例代码：

const eventSource = new EventSource('http://localhost:8080');

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

SSE 的应用场景

SSE 可以广泛应用于实时通知、实时聊天、实时数据更新等场景。例如，在在线游戏中，可以通过 SSE 来实现实时更新游戏状态；在股票行情网站中，可以通过 SSE 来实时推送股票价格等数据。

总结

Server-sent Events 是一种基于 HTTP 协议的服务器推送技术，可以实现服务器向客户端实时推送数据，具有实时性更好、减少网络流量、更加高效等优点。在实现 SSE 时，服务端需要设置响应头 Content-Type 为 text/event-stream，并且在数据的末尾加上两个换行符，客户端则可以通过 EventSource API 来接收 SSE 数据。SSE 可以广泛应用于实时通知、实时聊天、实时数据更新等场景。

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