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

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

介绍

在 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


猜你喜欢

  • 使用 PM2 进行分布式架构 Node.js 实现

    介绍 Node.js 是一个非常流行的服务器端 JavaScript 运行环境,具有高性能、易于扩展等特点。然而,在面对大并发、高负载时,单个 Node.js 实例可能会出现瓶颈。

    2 天前
  • 如何在 Material Design 中设计绚丽的颜色渐变效果?

    Material Design 是 Google 推出的一套设计语言,旨在提供美观、易于使用的用户界面。颜色是其中至关重要的一部分,可以帮助用户识别界面元素、传达品牌信息并增强用户体验。

    2 天前
  • 在 ES9 中使用 WeakRef 数据结构解决代码中的内存泄漏问题

    随着前端应用越来越复杂,内存泄漏成为了一道需要重视的问题。在 JavaScript 中,内存泄漏通常是由持久化引用引起的。例如,当你创建一个对象并将其存储在某个地方,但忘记清除这个引用时,这个对象就会...

    2 天前
  • Android 系统性能优化方法探究

    前言 在移动应用开发领域,随着智能手机的普及和应用程序的日益复杂,更高的性能需求成为了主流趋势。本文将深入探讨 Android 系统性能优化方法以及实现方式,并提供相关示例代码。

    2 天前
  • 如何使用 Sequelize 查询多张表的数据

    在前端开发中,常常需要从数据库中查询多张表的数据。而 Sequelize 是一个基于 Promise 的 Node.js ORM,它非常方便的帮助我们完成这个任务。

    2 天前
  • 如何利用 Headless CMS 满足不同的业务需求

    随着互联网技术的不断发展,传统的网站开发方式已无法满足现代业务的快速变化和多样化需求。因此,Headless CMS 应运而生。 Headless CMS 是一种将后端数据和前端展示分离的架构模式,它...

    2 天前
  • 如何正确地使用 ESLint 和 Babel 检查 JavaScript 代码规范

    在现代前端开发中,写出具有一致性的可维护的代码是至关重要的。ESLint和Babel是两个工具,它们可以帮助我们检查和纠正代码风格和语法问题,并确保代码的一致性和可读性。

    2 天前
  • RxJS 中的 retryWhen 操作符延时重试

    RxJS 内置的 retryWhen 操作符可以帮助我们在发生错误时,进行重试操作。相比于简单地使用 retry 操作符直接重试,retryWhen 可以更加灵活地控制重试的次数和时间间隔。

    2 天前
  • Cypress 自动化框架初体验

    Cypress 是一个快速、简单且可靠的前端自动化测试框架。它支持端到端测试和集成测试,并提供了易用的API和交互式测试运行器,可以帮助开发者轻松地进行前端应用程序测试。

    2 天前
  • Docker 的 Volume 数据卷介绍及实践

    什么是 Docker 数据卷 在 Docker 中,Volume(数据卷)提供了一种持久化存储数据的方法。与容器内部的文件系统不同,Volume 可以在容器启动或关闭后仍然存在,并且可以被多个容器共享...

    2 天前
  • 使用 Stencil 和 Vue 混合开发 Web Components 的实践经验

    Web Components 是一种用于构建可重用、高可组合的 Web 应用程序的标准化技术。Stencil 是由 Ionic 提供的基于 Web Components 标准的框架,而 Vue 则是当...

    2 天前
  • Mongoose 中如何使用 Compound Index 来提高查询性能

    在开发中,我们通常需要在数据库中存储并查询多个字段的数据。这时候使用单独的索引可能会无法满足需求。Mongoose 提供了 Compound Index(复合索引)来解决这个问题。

    2 天前
  • Docker 容器性能优化的几种方法

    Docker 已经成为开发和部署应用程序的首选工具之一,它可以让我们轻松地将应用的环境打包到一个镜像中,然后快速部署到任何地方。但是,当我们开始在生产环境中使用 Docker 容器时,我们通常会面临性...

    2 天前
  • 解决 Deno 中使用第三方模块瞬间升级导致的问题

    在 Deno 中使用第三方模块时,会经常遇到模块瞬间升级导致的问题。以“abc”模块为例,当你在代码中引用了 "https://deno.land/x/abc@1.0.0/mod.ts" 这个地址时,...

    2 天前
  • 详解 CSS Reset 对表单元素的影响及解决方法

    前端开发中,为了让不同浏览器的表现更加一致,常常使用 CSS Reset。CSS Reset是一款能重置所有HTML元素样式的CSS文件。但是,CSS Reset不仅会影响常规元素,还会对表单元素造成...

    2 天前
  • 使用 ES9 中的 AsyncIterator 协议解决异步迭代问题

    在 JavaScript 中,迭代器是一个帮助我们遍历复杂数据结构的强大工具。然而,当我们需要处理异步数据或操作时,使用传统的迭代器可能会变得更加困难。 幸运的是,ES9 引入了 AsyncItera...

    2 天前
  • 在 Node.js 中如何优雅地使用 Promise 进行后台异步操作

    在 Node.js 中,异步操作是非常重要的部分,因为它们可以让我们的程序变得更加高效。然而,在处理异步操作时,回调函数会让代码变得不易理解、维护和测试。这时候,Promise 就可以成为我们的好帮手...

    2 天前
  • 前端性能优化:基于网络的方案

    在现代网络世界中,前端性能对用户体验至关重要。但是,随着互联网技术的不断迭代,移动设备和网页应用程序数量的爆炸式增长,实现一流的前端性能变得越来越困难。然而,有一些技巧可以帮助你通过网络优化提高前端性...

    2 天前
  • Redis 集群模式的设计与实现

    介绍 Redis 是一款高性能的非关系型数据库,被广泛应用于 Web 开发中。随着数据量和并发量的不断增加,单节点的 Redis 已经无法满足需求。为了解决这个问题,Redis 推出了集群模式。

    2 天前
  • 如何使用 ECMAScript 2017(ES8)中的 String.raw() 方法简化字符串处理

    在 JavaScript 中,字符串处理是非常常见的任务。ES6 随着模板字面量的引入,为我们提供了很多方便的方法来创建和操作字符串。而 ES8 进一步增加了名为 String.raw() 的方法,可...

    2 天前

相关推荐

    暂无文章