使用React和Firebase构建实时聊天应用程序

本教程演示了使用React和Firebase建立实时聊天应用程序，重点是用户身份验证。我们将集成第三方身份验证提供商（Google，GitHub），并利用Firebase的实时数据库进行实时数据同步。在用React构建的同时，核心概念可以转移到其他框架上。

了解火池

Google的应用程序开发平台Firebase提供了一套全面的工具，包括身份验证，实时NOSQL数据库，云功能，静态托管和云存储。它的慷慨的免费层非常适合该项目，提供身份验证（电子邮件/密码，Google，github）和实时数据库访问（对并发连接和存储的限制）。

此应用程序中使用的关键火箱功能：

• 身份验证：通过电子邮件/密码和Google和GitHub通过电子邮件/密码和单个登录（SSO）安全登录。
• 实时数据库： NOSQL数据库启用实时数据更新。

健谈的应用程序

我们的应用程序“ Chatty”允许身份验证的用户发送和接收消息。用户可以注册电子邮件/密码或使用Google/github SSO。源代码可供参考。

设置和配置

1. Firebase项目：在Firebase控制台中创建一个新项目。命名（例如，“ chatty”）。您可以选择启用分析。
2. Web应用程序设置：在Firebase控制台中，导航到“ Web”部分并注册您的应用程序。记录配置详细信息（API密钥，Auth域等） - 稍后您需要这些。
3. 身份验证提供商：在Firebase身份验证设置中启用电子邮件/密码，Google和GITHUB登录方法。切记为授权重定向添加您的Web应用程序域（例如localhost ）。

发展环境

1. NODE.JS和NPM（或YARN）：已安装Node.js和软件包管理器（NPM或YARN）。
2. 创建React App： Bootstrap一个新的React项目： npx create-react-app chatty
3. 安装依赖项：安装React Router和Firebase： yarn add react-router-dom firebase （或使用npm install ）。
4. 项目结构：使用组件，助手，页面和服务的文件夹来组织您的项目。

集成火基

1. Firebase配置（ src/services/firebase.js ）：导入Firebase并使用设置步骤2的配置详细信息进行初始化。导出auth和database模块。

2. 应用程序设置（ src/App.js ）：导入必要的模块（React，React Router，Firebase）。创建PrivateRoute和PublicRoute高阶组件（HOC）来处理基于身份验证的路由。这些HOC将检查身份验证状态并相应地重定向用户。

3. 身份验证状态（ src/App.js ）：使用auth().onAuthStateChanged监视身份验证更改并更新应用程序的状态（ authenticated ， loading ）。

4. 身份验证帮助者（ src/helpers/auth.js ）：创建注册功能（ signup ），signin（ signin ），Google登录（ signInWithGoogle ）和github登录（ signInWithGitHub ）。这些功能将与Firebase身份验证服务相互作用。

5. 注册和登录页面（ src/pages/Signup.js ， src/pages/Login.js ）：使用src/helpers/auth.js的辅助函数创建用于用户注册和登录的表单。处理表单提交和显示错误消息。

6. 聊天页面（ src/pages/Chat.js ）：使用db.ref("chats").on("value", ...)从firebase实时数据库中收听实时更新。呈现聊天消息并提供发送新消息的表格。使用db.ref("chats").push(...)将新消息添加到数据库中。实施读取和写入数据的错误处理。

7. 数据库规则：配置Firebase实时数据库规则仅限于对身份验证的用户的访问。

测试和部署

完成后，彻底测试应用程序。部署将取决于您选择的托管提供商。

该详细的指南提供了一项全面的演练，旨在使用React和Firebase构建安全的实时聊天应用程序。请记住要查阅Firebase文档以获取更高级的功能和选项。

以上是使用React和Firebase构建实时聊天应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！