随着互联网和移动互联网的发展，实时性逐渐成为了各种应用的必要需求。在前端开发中，我们通常会使用 WebSocket 或者轮询来实现实时更新数据的功能。但是这些方法都有其缺点，WebSocket 需要服务器端支持，而轮询则会导致大量的无效请求。在这篇文章中，我们将介绍另一种实现实时更新数据的方法：Server-Sent Events。
什么是 Server-Sent Events？
Server-Sent Events 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送事件流，以实现实时更新数据的功能。与 WebSocket 不同，Server-Sent Events 使用的是单向通信，即服务器向客户端发送数据，而客户端不能向服务器发送数据。
Server-Sent Events 使用的是纯文本协议，可以使用 JavaScript 中的 EventSource 对象来接收和处理服务器发送的事件流。在事件流中，每个事件都是一个文本消息，由两部分组成：事件类型和数据。事件类型以“event:”开头，数据则以“data:”开头。例如：
------ ---- ----- --------- ------- ---------- ---------
如何使用 Server-Sent Events？
下面我们将介绍如何使用 Server-Sent Events 构建出一个实时财经新闻应用。
服务端代码
首先，我们需要编写一个简单的 Node.js 服务端来发送财经新闻。代码如下：
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - -
------ -------
-------- --------
--
----------------- ---------
---------------- ------------------------------
-- ------
---
------------------- -- -- -
------------------- -- ------- -- ---- -------
---在代码中，我们创建了一个 HTTP 服务器，并在每隔 5 秒钟向客户端发送一条财经新闻消息。注意，我们在响应头中设置了“Content-Type”为“text/event-stream”，这是 Server-Sent Events 的标准 MIME 类型。
客户端代码
接下来，我们需要编写客户端代码来接收并处理服务器发送的事件流。代码如下：
----- ------ - --- ------------------------------------- ------------------------------- ------- -- - ----- ---- - ----------------------- ----------------------- -------------- ---
在代码中，我们使用 EventSource 对象来连接服务器，并监听“news”事件。当服务器发送一条新闻消息时，客户端会收到该事件，并将消息打印到控制台中。
运行示例
现在，我们可以运行上述代码，并在控制台中查看实时财经新闻的更新了。如果你想要自己尝试一下，请按照以下步骤操作：
- 在控制台中进入到一个空白目录，并创建一个名为“server.js”的文件，将上述服务端代码复制到该文件中。
- 在控制台中运行“node server.js”命令，启动服务端。
- 在控制台中进入到另一个空白目录，并创建一个名为“client.js”的文件，将上述客户端代码复制到该文件中。
- 在控制台中运行“node client.js”命令，启动客户端。
- 在控制台中观察实时财经新闻的更新。
总结
通过本文，我们了解了 Server-Sent Events 的基本概念和使用方法，并通过一个实例展示了如何使用 Server-Sent Events 构建出一个实时财经新闻应用。Server-Sent Events 不仅能够实现实时更新数据的功能，还可以避免 WebSocket 和轮询的缺点，是一种非常实用的技术。如果你想要实现实时更新数据的功能，可以考虑使用 Server-Sent Events。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65669d1bd2f5e1655df99c11