在前端开发中，我们经常需要实现实时数据的推送。虽然现在 WebSocket 已经成为了实时通信的主流技术，但是如果只需要服务端发送数据而不需要前端发送数据的话，我们可以使用 Server-sent Events (SSE) 技术。
什么是 Server-sent Events？
Server-sent Events 是一种 HTML5 的新特性，它允许服务端发送事件给客户端，而客户端通过 EventSource 对象来监听事件并处理。与 WebSocket 不同的是，SSE 是基于 HTTP 协议的，也就是说，我们并不需要使用特殊的协议和端口来进行通信，它和普通的 HTTP 请求一样，可以通过 HTTP/HTTPS 协议进行通信。
SSE 的工作原理是，客户端向服务端发送一个 HTTP 请求，服务端会保持连接打开不关闭，然后定期发送数据给客户端。当客户端接收到数据时，随时可以通过 message 事件处理函数来处理收到的数据。
如何使用 Server-sent Events？
使用 SSE 自然需要服务端的支持，下面我将以 Node.js 为例，讲解如何使用 SSE 实现数据推送。
准备工作
首先我们需要安装一个 Node.js 的 package，名为 express，它是一个基于 Node.js 的 Web 应用开发框架，提供了一套完整的 MVC 架构。在安装之前我们需要先安装 npm，安装完毕后，执行 npm install express 安装 express。
服务端代码
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
-- --------
-----------------------------------
-- ----
--------------- ----- ---- -- -
-- -- -------
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------------
-- ----------
-------------- -- -
-- ----
---------------- ----- -------------------------------
-- ------
---
-- -----
---------------- -- -- ------------------- ------------首先我们通过 require 引入 express，然后创建一个 express() 实例 app。接着我们设置静态文件目录，这里我设置为当前目录，所以将 __dirname 传入 express.static() 方法即可。
然后我们使用 app.get() 方法设置了路由 /sse。在这个路由中，我们首先在响应头部添加了一些 SSE 规定的特殊的 HTTP 头部，用于告诉浏览器对响应进行特殊处理，同时为了保持连接的打开，我们使用 res.flushHeaders() 方法。然后，我们通过 setInterval 方法定时向客户端发送数据，这里我设置的是每秒发送一次数据，具体的发送内容可以自己定义，最后将数据通过 write() 方法写入响应体。需要注意的是，每条数据需要以 \n\n 结尾。
最后我们使用 app.listen() 方法启动服务器，监听在本地 3000 端口，打印 "Server Start..." 字符串表示服务器已经启动。
客户端代码
const source = new EventSource('/sse');
source.onmessage = (event) => {
const data = event.data;
console.log(`Received: ${data}`);
};在客户端中，我们首先创建了一个 EventSource 对象，将请求地址设置为我们在服务器中设置的 /sse 路由。然后，我们在 onmessage 事件处理程序中，处理从服务器端发送来的数据。
在这个例子中，每次从服务器端发送来的数据都会被打印到控制台，你也可以根据自己的需要，对数据进行其他处理。
总结
使用 Server-sent Events 实现定期数据推送，是一种简单且高效的方案，适用于无需实时双向通信的场景。在 Node.js 中，我们可以使用 express 框架来实现 SSE。在客户端，我们可以使用 EventSource 对象来监听事件并处理。
希望这篇文章对你有所帮助，也希望你能够掌握使用 SSE 实现数据推送的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b5c9c968c7c53b0db44ba