在现代 Web 应用程序中，实时数据检测是非常重要的。为了实现实时数据检测，我们通常使用轮询或 WebSocket。但是，这些方法都有一些缺点。轮询会导致服务器负载过高，而 WebSocket 不适用于所有情况。在这种情况下，Server-sent Events（SSE）是一种更好的解决方案。
SSE 是一种单向通信协议，它允许服务器向客户端发送事件。这些事件可以是任何类型的数据，例如 JSON、XML 或纯文本。客户端使用 EventSource API 来接收事件。SSE 的一个重要优点是它不需要客户端轮询服务器来获取数据。相反，服务器只需在有数据可用时发送事件。
在本文中，我们将学习如何在 React 应用程序中使用 SSE 进行实时数据检测。我们将使用 Node.js 和 Express 来创建服务器，并使用 React 和 EventSource API 来创建客户端。
创建服务器
首先，我们需要创建一个 Node.js 服务器。我们将使用 Express 框架来创建服务器。我们需要安装以下依赖项：
npm install express cors
接下来，我们将创建一个名为 server.js 的文件，并添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----------------
------------------ ----- ---- -- -
---------
---------------- -----------
--------------- --------------------
------------- -------------
---
-------------- -- -
----- ---- - -
-------- ------- --------
---------- -----------
--
---------------- ------------------------------
-- ------
---
---------------- -- -- -
------------------- --------- -- ---- --------
---上面的代码创建了一个 Express 应用程序，并在端口 3001 上启动服务器。我们定义了一个名为 /events 的路由，该路由返回 SSE 数据。在这个例子中，我们每秒钟发送一个包含当前时间戳的事件。
注意，我们在响应头中设置了 Content-Type 为 text/event-stream，这是 SSE 的标准 MIME 类型。我们还设置了 Cache-Control 为 no-cache，这是为了确保客户端不会缓存响应。
创建客户端
现在我们已经创建了服务器，接下来我们将使用 React 和 EventSource API 来创建客户端。我们需要安装以下依赖项：
npm install react react-dom
接下来，我们将创建一个名为 App.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ----- -
----- ------ -------- - -------------
------------ -- -
----- ------ - --- --------------------------------------------
---------------------------------- ------- -- -
----- ---- - -----------------------
--------------
---
------ -- -- -
---------------
--
-- ----
------ -
-----
--------------- ------ ------------
---------------------
------- ----------------------------------------------
------
--
-
------ ------- ----上面的代码创建了一个 React 组件，该组件将显示从服务器接收到的数据。我们使用 useState 钩子来存储数据状态，并使用 useEffect 钩子来订阅 SSE 事件。
在 useEffect 钩子中，我们创建了一个 EventSource 对象，并将其连接到服务器的 /events 路由。我们使用 addEventListener 方法来监听 message 事件，并将接收到的数据存储在组件状态中。在组件卸载时，我们使用 close 方法关闭 EventSource 对象。
最后，我们将组件导出为默认模块。
运行应用程序
现在我们已经创建了服务器和客户端，我们可以使用以下命令来启动应用程序：
npm start
这将在 http://localhost:3000 上启动 React 应用程序。我们还需要在另一个终端窗口中启动服务器：
node server.js
这将在 http://localhost:3001 上启动服务器。
现在，在浏览器中打开 http://localhost:3000，您应该能够看到一个包含“Hello, world!”消息和当前时间戳的页面。每秒钟，页面将自动更新以显示新的时间戳。
结论
在本文中，我们学习了如何在 React 应用程序中使用 Server-sent Events 进行实时数据检测。我们创建了一个 Node.js 服务器，并使用 Express 框架和 SSE 协议来向客户端发送数据。我们还创建了一个 React 组件，并使用 EventSource API 来接收服务器发送的事件。
SSE 是一种非常有用的技术，可以用于实时数据检测和通知。它比轮询和 WebSocket 更简单和更有效。如果您需要实现实时数据检测，那么 SSE 是一种值得考虑的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673af44239d6d08e88b0c252