Web 技术的进步使得我们能够构建更为复杂的应用程序。然而，当我们需要实时更新 UI 时，传统的 HTTP 请求和响应模型就无法满足需求了。在这种情况下，使用 Server-Sent Events 技术可以实现实时渲染 Web 内容。
什么是 Server-Sent Events？
Server-Sent Events (SSE) 是一种完全基于 HTTP 的实时推送技术。相对于 WebSockets，SSE 更加轻量级，同时也适用于需要较低的实时性的场景（例如股票价格更新、即时通知等情境）。
SSE 协议规定了客户端通过 HTTP/1.1 协议向服务端请求 SSE 数据流。服务端将 SSE 数据流封装在一个特定的 HTTP 响应头中，并使用 chunked 编码（分块编码）将数据流分为多个部分发送到客户端。
客户端接收到 SSE 数据后，可以通过 JavaScript 监听事件来处理从服务端推送的新数据。
如何实现 Server-Sent Events？
在服务端，我们可以使用 Node.js 原生的 http 模块来创建 HTTP 服务器。首先，我们需要设置正确的 HTTP 响应头：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
---在 HTTP 响应头设置完成后，我们需要向客户端发送 SSE 数据。SSE 数据由一系列“事件”组成。每个事件包含以下信息：
- 事件标识符 (
event)：事件的名称，用于客户端区分不同类型的事件； - 数据 (
data)：要发送给客户端的数据； - 重试 (
retry)：在连接失败后重新尝试连接的时间间隔，单位为毫秒 (ms)。
这里是一个简单的例子：
res.write('event: message\n');
res.write('data: This is a message from server.\n\n');在此例中，我们定义了一个名为“message”的事件，并且发送了一条消息。
最后，我们需要在服务端设置一个定时器，定期地向客户端发送 SSE 数据。在实际应用中，我们可以根据具体的业务需要来决定数据的生成方式和发送频率。
setInterval(() => {
const currentTime = new Date().toLocaleTimeString();
res.write(`event: time\n`);
res.write(`data: The current time is ${currentTime}.\n\n`);
}, 1000);在示例代码中，服务端每秒向客户端发送当前时间，事件名称为“time”。
如何处理 SSE 数据？
在客户端，我们可以通过 JavaScript 的 EventSource API 来处理 SSE 数据。
-- -------------------- ---- ------- ----- ------ - --- -------------------- ---------------- - ------- -- - ------------------------ -- ---------------------------------- ------- -- - ------------------------ ---
在以上代码中，我们创建了一个新的 EventSource 对象，并且通过 onmessage 回调函数或者 addEventListener 方法来监听事件。
总结
使用 Server-Sent Events 技术可以实现 Web 内容的实时渲染。在服务端，我们需要设置正确的 HTTP 响应头，并且定时向客户端发送 SSE 数据。在客户端，我们可以通过 JavaScript 的 EventSource API 来处理 SSE 数据。
SSE 和 WebSockets 是两种完全不同的实时推送技术，它们各自的优缺点需要我们根据实际应用的情况来进行选择。同时，也需要注意 SSE 无法在 Internet Explorer 浏览器中正常使用，这也是在选择实时推送技术时需要考虑的因素之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6488b27948841e9894719214