使用 Server-Sent-Events 进行实时更新的 React 应用程序

介绍

在 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