本文将介绍如何使用 React 和 Firebase 搭建一个实时在线聊天室。这个聊天室拥有一个简洁的界面，支持多用户聊天，同时使用 Firebase 实时数据库实现了实时聊天功能。
准备工作
在开始之前，需要先准备好以下工具：
如果你还没有安装以上工具，请先进行安装。
创建 React 应用
使用 Create React App 脚手架工具可以快速创建一个新的 React 应用程序。
在终端中运行以下命令：
npx create-react-app my-chat-app cd my-chat-app npm start
这将创建一个新的 React 应用程序，并启动开发服务器。 现在你可以在浏览器中访问 http://localhost:3000，在页面上显示 " Welcome to React "。
集成 Firebase
现在我们需要在项目中添加 Firebase。
- 在 Firebase 控制台中创建一个新的项目。
- 打开 "设置" 页面，然后选择 "应用"，在这里你将获得用于连接你的应用及初始化 Firebase 的凭据。
- 将以下代码加入到项目中的
index.html文件的<head>标签内:
-- -------------------- ---- ------- ---- -------- --- ---- ---- -------- ---- -- ------ -------- --- ---- -- ------ ----- --- ------- ------------------------------------------------------------------------- ---- -- --- ------- --------- -- ---- -------- --- --- -------- --- --- --------- --- ------- ------------------------------------------------------------------------------- ---- --- -------- -------- ---- --- ---- -- --- --- ------- -------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------
这里使用了 Firebase 实时数据库来实现实时聊天功能。你也可以使用 Firebase 的其他产品，如 Firestore 来实现聊天室功能。
- 在
index.js中引入 Firebase：
-- -------------------- ---- ------- ------ -------- ---- --------------- ------ -------------------- ----- -------------- - - -- ------ -------- ---- -- --- -- ---------------------------------------
- 现在，Firebase 已经和你的项目成功集成，你可以开始进行开发了。
实现聊天室页面
现在，我们开始构建聊天室页面的组件。
- 创建一个新的组件
ChatRoom.js，并导入在前面已经引入的 Firebase：
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
------ -------- ---- ---------------
------ --------------------
----- -------- - -- -- -
----- ------ -------- - -------------
----- ---------- ------------ - -------------
------------ -- -
----- ----------- - ------------------------------------
----------------------- ---------- -- -
----- -------- - ---------------
----- ----------- - ---
--- ---- -- -- --------- -
------------------ --- --------------- ---
-
-------------------------
---
-- ----
------ -
-----
----
----------------------- -- -
--- ------------------------------------
---
-----
------
-----------
------------
------------- -- ------------------------
--
------- -----------------------------------
------
--
--
------ ------- ---------useEffect钩子函数将调用firebase.database().ref("messages")并添加获取信息的事件监听器。 当有新的消息加入时，我们将使用setMessages将新的消息列表设置到组件中。在
render()方法中，我们使用messages.map将每个聊天记录都渲染为<li>标签。我们还需要创建一个发送新信息的函数
sendMessage:
const sendMessage = () => {
const messagesRef = firebase.database().ref("messages");
messagesRef.push({ text });
setText("");
};这个函数使用 firebase.database().ref("messages") 将新的聊天信息添加到 Firebase 实时数据库中。
- 最后，将新的组件
ChatRoom.js导入到App.js中，并在render()方法中将其渲染到页面：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------
-------- ----- -
------ -
-----
--------- --
------
--
-
------ ------- ----使用 npm start 启动开发服务器，在浏览器中访问 http://localhost:3000，你将看到你的聊天室应用程序已经成功运行！
总结
在这篇文章中，我们使用 React 和 Firebase 构建了一个简单但功能完整的在线聊天室应用程序。通过使用 Firebase 实时数据库，我们实现了聊天室中的实时聊天功能。这个应用程序只是一个简单的开始，你可以使用 React 和 Firebase 来构建更多功能复杂的在线应用程序。
示例代码请参见 GitHub。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64781536968c7c53b045ab20