使用 Server-Sent Events 实现将 HTML 代码片段推送到客户端

前言

在前端开发中，我们经常需要将动态的数据展示给用户，比如聊天消息、新闻内容等。传统的方式是使用 AJAX 轮询或者 WebSocket 技术。但是这些方式都有一些缺点，比如轮询会导致频繁的请求和响应，WebSocket 需要特定的服务器支持。那么有没有一种更简单的方式实现实时推送呢？答案是肯定的，那就是使用 Server-Sent Events（SSE）。

什么是 Server-Sent Events？

Server-Sent Events 是一种 HTML5 技术，它允许服务器向客户端推送事件，而不需要客户端发送请求。SSE 基于 HTTP 协议，使用简单的文本格式传输数据，不需要特殊的服务器支持。SSE 可以实现实时推送，而且相对于其他技术，它更加简单、轻量级。

如何使用 Server-Sent Events？

使用 SSE 非常简单，只需要在客户端使用 JavaScript API，向服务器发送一个 SSE 请求。服务器会在有新数据时，将数据以 SSE 格式推送给客户端。下面是一个 SSE 请求的示例代码：

const eventSource = new EventSource('/sse');
eventSource.onmessage = function(event) {
  const data = JSON.parse(event.data);
  // 处理推送过来的数据
};

上面的代码中，我们使用 EventSource 对象创建了一个 SSE 请求，指定了服务器地址 /sse。当服务器有新数据推送过来时，onmessage 事件会被触发，我们可以在事件处理函数中处理推送过来的数据。

在服务器端，我们需要监听 SSE 请求，并在有新数据时，将数据以 SSE 格式推送给客户端。下面是一个 Node.js 服务器端的示例代码：

const http = require('http');

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

    setInterval(function() {
      const data = { message: 'Hello, world!' };
      res.write(`data: ${JSON.stringify(data)}\n\n`);
    }, 1000);
  }
}).listen(3000);

上面的代码中，我们创建了一个 HTTP 服务器，并监听 /sse 路径的 SSE 请求。当有 SSE 请求时，我们设置响应头，指定响应类型为 text/event-stream，并设置 Cache-Control 和 Connection 头。然后我们使用 setInterval 定时向客户端推送数据，注意数据格式要符合 SSE 规范。

总结

使用 Server-Sent Events 实现将 HTML 代码片段推送到客户端非常简单，只需要使用 EventSource 对象创建 SSE 请求，然后在服务器端监听 SSE 请求，将数据以 SSE 格式推送给客户端即可。相对于传统的轮询和 WebSocket 技术，SSE 更加简单、轻量级，可以实现实时推送的效果。

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