在现代 Web 应用中，实时动态数据更新已经成为了一个必要的功能。例如，在社交网站上，用户需要实时地看到他们的朋友发布的新状态；在在线游戏中，玩家需要实时地看到其他玩家的动态。为了实现这些功能，我们需要使用一些特殊的技术来实现实时动态数据更新。其中一种常用的技术是 Server-sent Events。
什么是 Server-sent Events？
Server-sent Events 是一种基于 HTTP 协议的服务器推送技术。它允许服务器向客户端发送事件流，这些事件流可以包含任何类型的数据。客户端使用 EventSource API 来接收事件流，并在接收到事件时执行相应的操作。与 WebSocket 相比，Server-sent Events 的优势在于它不需要建立双向通信的连接，因此更加轻量级。
如何使用 Server-sent Events？
使用 Server-sent Events 非常简单。首先，在服务器端，我们需要创建一个能够发送事件流的路由。这个路由可以是任何类型的路由，例如一个 HTTP 路由、一个 WebSocket 路由等等。在本文中，我们将使用 Express 框架来创建路由。下面是一个示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
--------------- ------------- ---- -
----------------------------- ---------------------
------------------------------ ------------
---------------------- -
---------------- - - --- --------------------------- - --------
-- ------
---
---------------- ---------- -
------------------- -- --------- -- ---- -------
---在上面的代码中，我们创建了一个 GET 路由 /sse，当客户端访问这个路由时，服务器会向客户端发送一个事件流，这个事件流包含了当前时间。在事件流的开头，我们设置了 Content-Type 和 Cache-Control 头，这是必须的，因为它们告诉浏览器这是一个事件流，并且不要缓存它。在事件流的主体中，我们使用 setInterval 定时器来每秒钟发送一个事件，这个事件包含了当前时间。注意，在事件流的末尾，我们必须写入两个换行符，这是必须的，因为它们告诉浏览器这个事件结束了。
在客户端，我们可以使用 EventSource API 来接收事件流。下面是一个示例代码：
const source = new EventSource('/sse');
source.addEventListener('message', function(event) {
console.log(event.data);
});在上面的代码中，我们创建了一个 EventSource 对象，它连接到服务器的 /sse 路由。当客户端接收到事件流时，它会触发 message 事件，并执行相应的操作。在这个示例中，我们只是简单地将事件的数据打印到控制台上。
深入了解 Server-sent Events
在本文中，我们只是简单地介绍了 Server-sent Events 的基本用法。实际上，Server-sent Events 还有很多高级特性，例如自定义事件类型、事件重试、事件 ID 等等。如果你想深入了解 Server-sent Events，可以参考 MDN 文档中的详细说明。
总结
使用 Server-sent Events 可以非常方便地实现实时动态数据更新。它比 WebSocket 更加轻量级，适合于一些简单的应用场景。在实际开发中，我们可以使用 Express 框架来创建 Server-sent Events 的路由，使用 EventSource API 来接收事件流。如果你想深入了解 Server-sent Events，可以参考 MDN 文档中的详细说明。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e5cfec1886fbafa414e969