介绍
在 web 应用程序中，实时更新是至关重要的。传统的实现方式是使用轮询或 WebSocket。但是，这些方法都有缺点。轮询非常浪费网络带宽，WebSocket 需要连接的建立和维护等等。Server-Sent-Events(SE, 服务器推送事件)为我们提供了一种可行的方案，它允许服务器向客户端推送事件，而不需要客户端发起请求。
在本文中，我们将使用 React 和 Server-Sent-Events 实现一个简单的实时更新应用程序。
Server-Sent-Events 简介
Server-Sent-Events 是一种推送技术，它允许服务器向客户端推送事件。相比其他推送技术，比如 WebSocket，Server-Sent-Events 对于实时更新应用程序来说是一个更简单，更轻量级的替代方案。
在 Server-Sent-Events 中，服务器通过 HTTP 连接向客户端推送事件。客户端通过一个特殊的事件源对象（EventSource）监听这些事件。当客户端接收到事件时，它会执行相应的回调函数，并更新用户界面。
React 应用程序
我们将创建一个简单的 React 应用程序，通过 SSE 实现实时更新。该应用程序包括一个后端 api 和一个前端界面。后端 api 使用 Node.js 和 express.js 编写，前端界面使用 React 和 SSE 。
后端 api
首先，让我们创建一个 Node.js 项目，并在其中安装以下依赖项：
npm install express cors
然后，在项目的根目录创建 server.js 文件并编写以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
-- ------
----------------
-- --- --
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
----- ---- - ------ ----- ---------------------------
----------------
-- ------
---
-- -----
---------------- -- -- -
------------------- -- ------- -- -----------------------
---代码逐行解释：
- 引入 express 和 cors 库。
- 创建 express 应用程序。
- 使用 cors 中间件，允许跨域请求。
- 创建 SSE 路由，该路由将返回一个 text/event-stream 响应。
- 定期（每秒）向客户端推送一个事件。
- 启动服务器。
前端界面
接下来，让我们创建一个 React 应用程序，并在其中使用 SSE。我们可以使用 npx 命令快速创建 React 应用程序：
npx create-react-app my-app cd my-app npm start
这将在应用程序的根目录下启动一个本地服务器。
现在让我们安装 EventSource-polyfill 库，它是 EventSource 对象的一个兼容性接口。
npm install eventsource-polyfill
然后，我们可以在 App.js 文件中编写如下代码：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ----------- ---- --------------
-------- ----- -
----- --------- ----------- - -------------
------------ -- -
----- ------ - --- -----------------------------------------
---------------- - ------- -- -
-----------------------
--
------ -- -- -
---------------
--
-- ----
------ -
-----
---------- ---------
---------- ---- --- -------------
------
--
-
------ ------- ----代码逐行解释：
- 导入 React 和 useState, useEffect hooks。
- 导入 EventSource 对象。
- 定义 message 状态，并使用 setMessage 更新它。
- 使用 useEffect 定义副作用，当组件加载时执行。
- 创建一个 EventSource 对象，监听 http://localhost:3000/sse 路由的事件流。
- 在接收到事件流数据时更新 message 状态。
- 在组件卸载时关闭 EventSource 连接。
- 在组件中显示一个标题和消息。
现在启动应用程序，打开 http://localhost:3000，应用程序会在每秒钟更新一次当前时间。
结论
在本文中，我们使用了 Server-Sent-Events 技术实现了一个简单的实时更新应用程序。这种技术有许多优点，包括轻量级、简单易用和可扩展性，它非常适合于需要实时更新数据的 web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672b4148ddd3a70eb6d24e31