介绍
在 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 项目,并在其中安装以下依赖项:
--- ------- ------- ----
然后,在项目的根目录创建 server.js 文件并编写以下代码:
----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- -- ------ ---------------- -- --- -- --------------- ----- ---- -- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------- --- -------------- -- - ----- ---- - ------ ----- --------------------------- ---------------- -- ------ --- -- ----- ---------------- -- -- - ------------------- -- ------- -- ----------------------- ---
代码逐行解释:
- 引入 express 和 cors 库。
- 创建 express 应用程序。
- 使用 cors 中间件,允许跨域请求。
- 创建 SSE 路由,该路由将返回一个 text/event-stream 响应。
- 定期(每秒)向客户端推送一个事件。
- 启动服务器。
前端界面
接下来,让我们创建一个 React 应用程序,并在其中使用 SSE。我们可以使用 npx 命令快速创建 React 应用程序:
--- ---------------- ------ -- ------ --- -----
这将在应用程序的根目录下启动一个本地服务器。
现在让我们安装 EventSource-polyfill 库,它是 EventSource 对象的一个兼容性接口。
--- ------- --------------------
然后,我们可以在 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