前言
在前端开发中，我们经常需要将动态的数据展示给用户，比如聊天消息、新闻内容等。传统的方式是使用 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 服务器端的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
------------------------------- ---- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
----- ---- - - -------- ------- ------- --
---------------- ------------------------------
-- ------
-
----------------上面的代码中，我们创建了一个 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