在当今的技术领域，实时应用程序正变得越来越普遍。实时应用程序能够实时处理数据，并向用户提供及时的反馈，这使得它们在聊天应用、在线游戏和在线支付等应用领域中变得广泛使用。
本文将详细介绍如何使用 React 和 Node.js 搭建实时应用程序，并提供示例代码和指导意义。
1. 前置知识
在阅读本教程之前，你需要掌握以下知识点：
- 基本的 JavaScript 知识
- React 的基础知识
- Node.js 和 Express 的基础知识
- WebSocket 协议的基础知识
2. 构建实时应用程序
我们将构建一个实时聊天应用程序作为示例。该应用程序允许多个用户同时加入聊天室，实时发送和接收消息，并显示在线用户列表。
2.1 使用 React 构建前端
我们使用 React 来构建前端部分。React 是一个非常流行的 JavaScript 库，用于构建用户界面。在这个例子中，我们将使用 socket.io-client（一个用于浏览器的 WebSocket 库）来建立与服务器的实时连接。
我们首先需要在项目中安装 React 和 socket.io-client。在命令行中运行以下命令：
npm install react socket.io-client
我们将使用 React 创建可复用的组件来构建聊天室。以下是代码示例：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ -- ---- -------------------
----- -------- - -- -- -
----- --------- ----------- - -------------
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- ------- --------- - -------------
----- ------ - ----------------------------
------------ -- -
-------------------- -- -- -
---------------------- -- ---------
---
-------------------- --------- -- -
------------------------- ----------
---
--------------------- ------- -- -
----------------
---
------ -- -- -
--------------------------
-------------
--
-- ------------
----- --------------- - --- -- -
-------------------
-- ---------------- -
-------------------------- ---------
---------------
-
--
----- ---------------- - --- -- -
-------------------
-- ----------------- -
------------------- ----------
-
--
----- --------------- - -- -- -
------ ---------------- ------ -- -
------ --- ------------------------
---
--
------ -
-----
---- -----------------------
---------- -----------
----------------------------
------
---- ----------------------
---- --------------------------
----------------------- ------ -- -
------ -
---- ------------
---------------------- --------------
------
--
---
------
----- ---------------------------
------
-----------
---------------
------------- -- ---------------------------
--
---------------------
-------
----- ----------------------------
------
-----------
------------------ ---- ---------
----------------
------------- -- ----------------------------
--
------------ -------------
-------
------
------
--
--
------ ------- ---------以上代码创建了一个 ChatRoom 组件，用于渲染聊天室应用程序的前端部分。它从 socket.io-client 导入并使用 useState 和 useEffect 钩子来管理内部状态并处理实时消息。它还使用 Socket.IO 提供的 on 和 emit 方法与服务器通信。
2.2 使用 Node.js 构建后端
在后端部分，我们将使用 Node.js 和 Express 来搭建服务器，并使用 socket.io 模块来处理 WebSocket 连接。
我们首先需要在项目中安装 express 和 socket.io。在命令行中运行以下命令：
npm install express socket.io
以下是后端代码示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- -------- - ---------------------
----- --- - ----------
----- ------ - -----------------------
----- -- - -----------------
----- ----- - ---
------------------- -------- -- -
---------------- --------- -------------
----------------- ---------- -- -
---------------------
------------------- -------
---
------------------------ --------- -- -
------------------ -
----- ----------------
----- --------
---
---
----------------------- -- -- -
---------------------- ---------------
----- ----- - -------------------------------
-- ------ --- --- -
------------------- ---
------------------- -------
-
---
---
----- ---- - ---------------- -- -----
------------------- -- -- -
------------------- -- -- -- ---- ----------
---以上代码创建了一个基于 Express 的服务器，并使用 Socket.IO 来处理 WebSocket 连接。它监听 join 和 sendMessage 事件，并在这些事件发生时向所有客户端广播消息。它还使用 users 数组来跟踪当前在线用户，当用户断开连接时，它将从用户列表中删除该用户并将用户列表广播回客户端。
2.3 运行应用程序
现在我们已经完成了前端和后端代码，我们需要在本地运行服务器。在命令行中运行以下命令：
node server.js
这将启动服务器，并将它绑定到 http://localhost:8000 端口上。
接下来，我们需要在另一个终端窗口中运行 React 应用程序。在命令行中运行以下命令：
npm start
这将启动 React 应用程序，并在默认浏览器中打开它。您应该能够看到一个聊天室应用程序，允许您输入用户名并开始发送和接收消息。
3. 结论
通过本教程，我们学习了如何使用 React 和 Node.js 搭建实时应用程序。我们创建了基于 WebSocket 技术的聊天室应用程序，展示了使用 React 和 Node.js 实现实时应用程序的全过程。
如果您对实时应用程序的开发感兴趣，那么 React 和 Node.js 是您的理想选择。它们都是非常强大和灵活的工具，可以让您快速构建实时应用程序。祝你好运！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66eff6626fbf960197317af3