前言
在现代 Web 应用程序中，实时更新是非常重要的。这意味着当数据发生变化时，应用程序应该能够及时地更新界面，以便用户能够看到最新的信息。在本文中，我们将介绍如何使用 Server-sent Events 和 create-react-app 构建实时更新的应用程序。
Server-sent Events
Server-sent Events 是一种用于实现服务器到客户端单向数据流的技术。它允许服务器向客户端发送事件，而客户端可以通过 EventSource API 接收这些事件。Server-sent Events 的一个重要特点是它们是基于 HTTP 的，这意味着它们可以通过常规的 Web 服务器和浏览器进行通信。
服务器端实现
在服务器端，我们需要创建一个 HTTP 端点，以便客户端可以连接并接收事件。在 Node.js 中，可以使用以下代码来实现：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- ------------ - -----------------
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-- -- - -------
-------------- -- -
----- ---- - - -------- ------- ------- --
----- ----- - ------ -----------------------------
-----------------
-- ------
---
--------------------在上面的代码中，我们创建了一个 HTTP 服务器，并为每个连接设置了响应头。然后，我们使用 setInterval 函数每隔 5 秒钟发送一个事件。事件的格式如下：
data: {"message": "Hello, world!"}
其中，data 表示事件的类型，后面的 JSON 数据为事件的内容。最后，我们使用 res.write 函数将事件发送到客户端。
客户端实现
在客户端，我们可以使用 EventSource API 来接收 Server-sent Events。以下是一个简单的 React 组件，它将连接到服务器并显示接收到的事件：
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
-------- ----- -
----- --------- ----------- - -------------
------------ -- -
----- ----------- - --- -----------------------
--------------------- - ------- -- -
----- ---- - -----------------------
-------------------------
--
------ -- -- -
--------------------
--
-- ----
------ -
-----
------------------
------
--
-
------ ------- ----在上面的代码中，我们使用 useEffect Hook 来连接到服务器并监听事件。当事件到达时，我们将事件的数据解析为一个 JSON 对象，并将其存储在组件的状态中。然后，我们可以在组件的渲染函数中使用该状态来显示事件的内容。
create-react-app
create-react-app 是一个用于快速创建 React 应用程序的工具。它可以为我们生成一个基本的项目结构，并配置好 Webpack 和 Babel 等工具。使用 create-react-app 可以大大简化我们的开发工作，让我们能够更快地搭建起一个 React 应用程序。
创建项目
要使用 create-react-app 创建一个新项目，我们可以在终端中运行以下命令：
npx create-react-app my-app cd my-app npm start
这将创建一个名为 my-app 的新项目，并启动开发服务器。在浏览器中打开 http://localhost:3000，我们应该能够看到一个欢迎界面。
添加 Server-sent Events 支持
要在 create-react-app 中使用 Server-sent Events，我们需要在 package.json 文件中添加一个代理配置。这将允许我们将所有以 /api 开头的请求转发到我们的 Node.js 服务器。
-- -------------------- ---- -------
-
------- ---------
-------- ------------------------
--------------- -
-------- ----------
------------ ----------
---------------- -------
--
---------- -
-------- -------------- -------
-------- -------------- -------
------- -------------- ------
-------- -------------- ------
-
-在上面的代码中，我们将代理设置为 http://localhost:3000，这是我们 Node.js 服务器的地址。然后，我们可以使用以下代码来连接到服务器并接收事件：
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
-------- ----- -
----- --------- ----------- - -------------
------------ -- -
----- ----------- - --- ---------------------------
--------------------- - ------- -- -
----- ---- - -----------------------
-------------------------
--
------ -- -- -
--------------------
--
-- ----
------ -
-----
------------------
------
--
-
------ ------- ----在上面的代码中，我们使用 /api/events 路径来连接到服务器。由于我们在 package.json 文件中设置了代理，因此所有以 /api 开头的请求都将被转发到我们的 Node.js 服务器。
结论
在本文中，我们介绍了如何使用 Server-sent Events 和 create-react-app 构建实时更新的应用程序。我们首先介绍了 Server-sent Events 的基本概念和用法，然后演示了如何在 Node.js 中实现一个简单的 Server-sent Events 服务器。接下来，我们使用 React 和 EventSource API 来连接到服务器并接收事件。最后，我们使用 create-react-app 简化了项目的创建和配置过程。
希望本文能够对你有所帮助，如果你有任何问题或建议，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675e6d2ac52bb71917661855