在不到20分钟的时间内在React中进行实时聊天

在本教程中,我将向您展示如何在React中创建小型Web聊天应用程序而不在后端创建任何代码。 在codeandbox上可以找到完整的演示源代码。

科技栈

对于此项目,我们将使用:

  • React — v16.5.2
  • Firebase — v5.7.0
  • Firebase Google身份验证
  • react-web-gifted-chat — v0.1.1
  • material-ui(用于漂亮的样式)— v3.6.1

入门

我们将从创建react应用开始。 为此,您可以只使用create-react-app 。 在控制台中输入以下命令:

  npx创建反应应用程序聊天 

在他们的github中,您可以检查如何启动项目。

下一步是向我们的项目添加基本依赖项:

 毛线添加react-web-gifted-chat firebase @ material-ui / core 

现在我们有了所有需要的项目。 我们最感兴趣的文件是: App.js。

从左侧菜单中选择身份验证 ,选择设置登录方法 ,然后启用Google (您必须在项目支持电子邮件中选择您的电子邮件)。

Firebase实时数据库

从左侧菜单中选择数据库 ,向下滚动至或选择实时数据库

并使用选项“ 以测试模式启动”创建数据库(这允许任何人读取和写入您的数据库数据)。

为了进行开发,我们将通过选择import JSON将一些初始数据导入数据库。

初始数据在这里:

将复制的配置添加到您的App.js中,您还需要添加firebase的导入。 它应该看起来像这样

但是,单击此按钮后,您将收到错误消息:

this.signIn不是函数

因此,让我们对其进行声明。

如您所见,添加了react-web-gifted-chat 真的很容易

正在载入讯息

要加载消息,我们需要从Firebase数据库中读取消息。 我们将添加loadMessage函数,并修改componentDidMount以在登录后加载消息。

正在传送讯息

Messenger的最后一个缺少的功能是发送消息。 我们需要对组件使用onSend方法。

在本教程中,我们学习如何在没有一行后端代码的情况下创建简单的实时Messenger, react-web-gifted-chat 使我们能够毫无问题地构建功能齐全的Messenger。 在codeandbox上可以找到完整的演示源代码。