在 Web 应用程序中，实时 (real-time) 更新是十分重要的功能，它可以提升用户体验，增加应用程序的价值。常用的实现方法包括轮询（Polling）、WebSocket 和 Server-sent Events（称为 SSE）。本文将介绍如何使用 SSE 在前端实现实时页面更新。
Server-sent Events 简介
SSE 是一种浏览器与服务器之间的单向通信技术，它允许服务器实时向客户端推送消息。SSE 中的服务器维护一个长连接，在连接上发送事件（Event），然后浏览器通过 EventSource API 接收到事件并处理。与 WebSocket 不同，SSE 仅支持单向通信（服务器可以向客户端主动发送消息），通信协议使用的是 HTTP/1.1。
SSE 的好处包括：
- 对于简单的实时更新场景而言，使用 SSE 比 WebSocket 更加轻量、简单易用，可以快速开发。
- SSE 可以通过 HTTP 请求使用现有的网络基础设施进行通信，不需要额外的协议。
- 在浏览器端，SSE 通过 EventSource API 提供了简单易用的接口，可以方便地处理消息。
使用 SSE 实现实时页面更新
下面将介绍如何使用 SSE 在前端实现实时页面更新的示例代码：
1. 创建服务器端代码
-- -------------------- ---- -------
-- ------- ------
----- ---- - ---------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- -------------------- -- --- --
---------------- -----------
------------- ------------ -- ----
--
-------------- -- -
----- ---- - --- ---------------------
---------------- ------------- -- ----
-- -----
--
------------------- -- -- -
------------------- -- ------- -- -----------------------
--代码中，我们使用 Node.js 创建一个 HTTP 服务器，每隔一秒钟发送一个消息（当前时间）到客户端。其中，Content-Type 设置为 text/event-stream，Cache-Control 设置为 no-cache，Connection 设置为 keep-alive，这是 SSE 协议的标准要求。
2. 创建客户端代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ---------------
--------
-- -- --- --
----- ------ - --- -------------------
-- ----------
---------------- - --------------- -
----- ---- - ----------------------
------------------------------------------- - ---------
-
---------
-------
------
--- -----------------
-------
-------客户端代码非常简单，使用 EventSource API 创建一个 SSE 对象，并通过 onmessage 事件处理函数接收事件（这里我们把数据解析成 JSON 格式，以便于处理）。
3. 运行代码并测试
在命令行下执行 node app.js 启动 Node.js 服务器。在浏览器中运行 HTML 文件，打开控制台可以看到每隔一秒钟，页面上的时间会自动更新。
总结
SSE 是一种非常实用的技术，可以用于实现实时页面更新等功能。本文通过介绍 SSE 协议的原理、示例代码等内容，希望读者了解 SSE 在前端开发中的应用场景和具体实现方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64960ba548841e98942ffa01