实时聊天应用是当今互联网时代最常见的应用之一。在这篇文章中，我们将学习如何使用 React 和 Firebase 构建一个实时聊天应用。
前置知识
在开始本教程之前，您需要具备以下知识：
- HTML 和 CSS 基础
- JavaScript 基础
- React 基础知识
- Firebase 基础知识
开始
首先，我们需要创建一个 React 应用程序。在终端中运行以下命令：
npx create-react-app chat-app
然后，我们需要安装 Firebase SDK。在终端中运行以下命令：
npm install firebase
接下来，我们需要在 Firebase 控制台中创建一个新项目。在 Firebase 控制台中，单击“添加项目”按钮并输入项目名称。然后，单击“继续”按钮并选择您的国家/地区。最后，单击“创建项目”按钮。
现在，我们需要在 React 应用程序中配置 Firebase。在 src 文件夹中创建一个名为 firebase.js 的新文件，并将以下代码添加到该文件中：
-- -------------------- ---- ------- ------ -------- ---- --------------- ------ --------------------- ----- -------------- - - ------- --------------- ----------- ------------------- ------------ -------------------- ---------- ------------------ -------------- ---------------------- ------------------ --------------------------- ------ -------------- -- --------------------------------------- ------ ----- --------- - ---------------------
请确保将 YOUR_API_KEY、YOUR_AUTH_DOMAIN、YOUR_DATABASE_URL、YOUR_PROJECT_ID、YOUR_STORAGE_BUCKET、YOUR_MESSAGING_SENDER_ID 和 YOUR_APP_ID 替换为您在 Firebase 控制台中找到的对应值。
现在，我们可以开始构建我们的实时聊天应用程序。
构建聊天应用
首先，我们需要创建一个名为 Chat 的新组件。在 src 文件夹中创建一个名为 Chat.js 的新文件，并将以下代码添加到该文件中：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - --------- - ---- -------------
----- ---- - -- -- -
----- ---------- ------------ - -------------
----- ------ -------- - -------------
------------ -- -
----- ----------- - ---------
-----------------------
---------------------
---------------------- -- -
----- -------- - ----------------------- -- --
--- -------
--------------
----
----------------------
---
------ -- -- --------------
-- ----
----- ------------ - ------- -- -
-----------------------
--------------------------------------
-----
---------- --- -------
---
------------
--
------ -
-----
----
----------------------- -- -
--- ------------------------------------
---
-----
----- ------------------------
------
-----------
------------
----------------- -- ----------------------------
--
------- ---------------------------
-------
------
--
--
------ ------- -----让我们逐行解释一下这个组件的代码。
首先，我们导入 React、useState 和 useEffect。然后，我们导入我们刚刚创建的 firestore 实例。
接下来，我们创建了一个名为 Chat 的函数组件，并在组件中使用了 useState 和 useEffect。useState 用于处理输入框的文本和消息数组，而 useEffect 用于监听 Firebase 数据库中的消息集合。
在 useEffect 中，我们使用 onSnapshot 方法来监听 messages 集合的变化。当集合中有新的文档时，我们将使用 map 方法将文档转换为具有 id 和数据属性的对象，并使用 setMessages 方法更新消息数组。
接下来，我们创建了 handleSubmit 函数，该函数将在表单提交时调用。在此函数中，我们使用 add 方法将新消息添加到 messages 集合中，并将文本值重置为空。
最后，我们在组件中返回一个包含消息列表和表单的 div 元素。
现在，我们需要在 App.js 文件中使用 Chat 组件。将以下代码添加到 App.js 文件中：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ---------
----- --- - -- -- -
------ -
-----
-------- --------
----- --
------
--
--
------ ------- ----这将在我们的应用程序中显示一个标题和 Chat 组件。
现在，我们可以启动我们的应用程序并测试它是否正常工作。在终端中运行以下命令：
npm start
然后，在浏览器中打开 http://localhost:3000，您应该能够看到一个包含输入框和发送按钮的页面。在输入框中输入一条消息并单击发送按钮，您应该能够看到该消息出现在消息列表中。
结论
在本教程中，我们学习了如何使用 React 和 Firebase 构建一个实时聊天应用程序。我们创建了一个名为 Chat 的组件，该组件使用 useState 和 useEffect 处理输入框的文本和消息数组，并使用 Firebase 实时数据库监听消息集合的变化。最后，我们在 App.js 文件中使用 Chat 组件，并测试了我们的应用程序是否正常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676290bb856ee0c1d405dca4