随着现代 web 应用程序的发展，越来越多的 web 应用程序需要实时渲染推送的数据。传统的轮询和 WebSocket 技术已经成为了实施方案的一部分，但它们都不是最佳的解决方案。在这篇文章中，我们将介绍 Server-sent Events 技术，它可以实现更轻巧，更高效的实时渲染推送解决方案。
Server-sent Events 概述
Server-sent Events（SSE）是一种 HTML5 技术，它允许浏览器接收来自服务器的实时事件。SSE 基于 HTTP 协议，因此它是一种轻量级的通信协议，适用于实现实时推送。与 WebSocket 相比，SSE 更加简单，更容易实现且具有更好的兼容性。
SSE 是一个单向通信协议，这意味着服务器只会向客户端推送数据，并且客户端不能向服务器发送任何数据。当服务器端有新的数据推送时，将使用 text/event-stream 类型的数据流将数据传输到客户端。客户端收到数据后，可以通过 JavaScript 代码将数据实时渲染到网页上。
实现 SSE
使用 SSE 首先需要在服务器端设置一个端点，客户端可以通过该端点来订阅服务器端的实时事件。 后端代码示例（使用 Node.js 和 Express 框架）：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
---------
---------------- -----------
--------------- --------------------
------------- ------------
---
-------------------
-------------- -- -
----- ---- - --- ----------------------------
---------------- --------------
-- ------
---
---------------- -- -- -
------------------- ------- -- ---- -------
---在这个示例中，我们设置了一个 SSE 的端点 /sse，当客户端向该端点发送请求时，服务器将返回一个 text/event-stream 类型的响应。Cache-Control 头告诉浏览器不要缓存响应，Content-Type 头告诉浏览器响应类型为 text/event-stream，Connection 头告诉浏览器保持连接处于打开状态。调用 res.flushHeaders() 方法以确保头文件在数据写入之前都已经发送到客户端。
使用 setInterval 方法模拟服务器每秒向客户端发送一条数据，并以 data: 前缀标识数据过去，并且使用双换行符分隔每条消息，表示一条完整的 SSE 事件消息。
在前端页面上，我们可以使用 JavaScript 来订阅服务器端的 SSE 事件，以实时渲染数据。
前端代码示例：
const sse = new EventSource('/sse');
sse.onmessage = event => {
const data = event.data;
console.log(data);
// 渲染代码
};在这个示例中，我们使用 EventSource API 来订阅服务器端的 SSE 事件。 onmessage 事件会在新的 SSE 事件接收时触发，将通过 event.data 来获得数据。 收到数据后，你可以将数据实时渲染到网页上。
结论
本文章中，我们介绍了使用 SSE 技术来实现前端实时渲染推送数据的解决方案。相比其他技术方案，SSE 更加轻量且更容易实现。由于它基于 HTTP 协议，它可以在大多数现代浏览器上运行。 如果你正在寻找一种更好的实时渲染推送解决方案，SSE 可能是你想要寻找的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67749dad6d66e0f9aaeea76a