使用 Firebase 创建实时聊天应用

在本教程中，我们将使用 Firebase 构建一个实时聊天应用程序。构建消息应用程序最重要的方面是学习为 iOS 应用设置 Firebase，并将聊天数据保存到数据库中。Firebase 可以定义为一个充当后端提供商的服务。换句话说，我们可以说它是一个 Web 服务，它为我们提供了一个基于云的基础设施，允许我们从 Google Web 服务保存和检索数据。我们不需要维护自己的服务器和编写服务器端代码。它提供了许多功能，包括数据存储、身份验证、分析、通知、托管、崩溃分析等。在大多数情况下，它是免费使用的。

在本教程中，我们将使用 Firebase 的两个核心功能，即实时数据库和身份验证。我们将保存实时聊天消息，并在安装了该应用程序的所有设备上检索这些消息。在这个 iOS 应用程序中，我们将通过使用 Firebase 的身份验证功能为用户提供注册和登录功能。

为开发设置 Firebase

要为开发设置 Firebase，我们需要在控制台中注册我们的项目。为此，请在浏览器中浏览 https://console.firebase.google.com/，然后点击“添加项目”以添加项目。这将提示我们为项目提供名称，如下所示。

现在，点击“继续”以继续设置 Firebase。下一个窗口会提示我们在此项目中启用 Google Analytics，如下所示。

在第 3 步中，选择一个 Google 帐户以继续处理。一旦我们从下拉列表中选择了帐户，我们就完成了在 Firebase 上创建项目。

现在，我们的项目已经准备就绪。我们需要将我们的 iOS 应用程序添加到此项目中。为此，请点击项目仪表板屏幕上的“iOS”，如下所示。

这将提示我们提供应用程序的 bundle id、App nickname 和 App Store Id。但是，nickname 和 store id 是可选的，但我们必须提供 bundle id，该 bundle id 必须与我们在 Apple Developer 帐户和 Xcode 应用程序中使用的 bundle id 相同。

现在，从仪表板下载 GoogleService-info.plist 文件，并将其添加到 Xcode 项目中。

现在，将 Firebase SDK 添加到项目中。添加 Firebase SDK 的过程在下图中给出。

除了 Firebase/Analytics pod，我们还需要各种其他依赖项才能在我们的 iOS 应用程序中使用 Firebase 的数据库和身份验证服务。为此，请将以下代码添加到 Podfile 中。

现在，将初始化代码添加到 Xcode 的 AppDelegate 中。

一旦我们将初始化代码添加到 AppDelegate，我们就可以在我们的 iOS 应用程序中使用 Firebase 了。创建一个 Xcode 项目并执行以上所有步骤以连接到 Firebase。确保使用我们一直在 Firebase 中为我们的 iOS 应用程序使用的相同的 bundle id。

设置 Firebase 实时数据库

要创建我们的实时聊天应用程序，我们需要在 Firebase 上设置实时数据库。为此，请点击项目控制台上的“实时数据库”。系统会提示我们创建一个数据库，如下所示。

点击“创建数据库”来创建一个。在第一步中，系统会提示我们选择国家/地区，默认情况下为美国。让它保持美国，然后点击“下一步”。

点击“下一步”后，系统会提示我们选择数据库规则，即锁定模式和测试模式。现在，我们将从测试模式开始。选择测试模式并点击“启用”以继续数据库。

配置 iOS 应用以使用 Firebase 数据库

现在，我们将配置我们的 iOS 应用程序以使用 Firebase 数据库。为此，请在 AppDelegate 中的 `didFinishLaunchingWithOptions(: )` 方法（在 return 语句之前）中添加以下代码，以创建 Firebase 数据库的引用，并测试数据是否已在 Firebase 控制台的项目仪表板中保存。

请确保在测试完成后删除此代码，因为每次都会清除数据库并存储新数据。我们需要返回 Firebase 控制台，检查数据是否已添加到数据库中。为此，请转到 Firebase 控制台上的“实时数据库”并检查数据。我们应该在仪表板中看到如下所示的数据。

在 Firebase 上为我们的应用添加用户

现在，我们将使用 Firebase 身份验证功能为我们的应用程序添加用户。为此，请转到 Firebase 控制台上的“身份验证”。系统会提示我们开始，如下所示。

一旦我们开始使用身份验证功能，我们就需要启用要在我们的应用程序中使用的登录方法。有多种选项，如下所示。

我们将启用电子邮件/密码登录方法以在我们的应用程序中使用。为此，请点击编辑图标并启用下图所示的选项。

现在，我们的应用程序将允许用户使用他们的电子邮件和密码组合进行注册和登录。

创建 Interface Builder

我们的应用程序将包含 4 个屏幕，即欢迎屏幕、注册屏幕、登录屏幕和聊天屏幕。

欢迎屏幕

当新用户安装应用程序时，它将进入欢迎屏幕，用户可以在其中选择注册到应用程序，或者在已注册的情况下登录到应用程序。欢迎屏幕如下所示。

在 iPhone 11 Pro Max 上，它看起来如下。

注册屏幕

如果用户未在应用程序上注册，则可能需要注册到应用程序。

在 iPhone 11 Pro Max 上，它看起来如下。

登录屏幕

登录屏幕在一定程度上会与注册屏幕类似。Main.storyboard 中的登录屏幕如下所示，其中包含一个 Label、两个文本字段和一个用于触发用户事件的按钮。

在 iPhone 11 Pro Max 上，它看起来如下。

聊天屏幕

聊天屏幕将在顶部包含一个标题和注销按钮，一个 tableview 用于显示消息列表，一个 textfield 和发送按钮用于输入消息并发送给对方。它在 storyboard 中显示，如下面的图像所示。

现在，我们已经完成了应用程序的用户界面的设计。现在我们将为 Xcode UI 创建 UIViewController 类，并连接相应的 outlet。

实现代码

我们要做的第一件事是创建 WelcomeViewController、LoginVC 和 RegisterVC 之间的链接。为此，请在 WelcomeViewController 中添加以下代码。

在这里，我们需要确保我们在 storyboard 中为 view controller 提供了相同的 storyboard id。

注册到应用程序

要继续注册到应用程序，我们需要确保我们已连接了电子邮件和密码文本字段的 outlet。我们还需要连接 Register 按钮的 outlet 以触发用户事件。

要将用户添加到 Firebase 数据库，请将以下代码添加到 `btnClickedRegister()` 方法中。

这将把用户添加到 Firebase 数据库；我们可以在 Firebase 控制台的身份验证部分中检查条目，就像用户一样。

要添加用户，请构建并运行该应用程序，选择注册，然后输入凭据（电子邮件和密码），如下所示。

现在，如果我们点击“注册”并在 Firebase 控制台上查看用户，我们将在“身份验证”部分看到一个条目，例如 [email protected]，如下所示。

现在，我们必须注意到注册已成功，但屏幕上没有发生任何事情。注册成功后，我们应该能够直接将用户导航到聊天屏幕。为此，请在我们在控制台打印成功消息后立即添加以下代码。

现在，我们将看到聊天屏幕，如下所示。

从应用程序注销

现在，我们应该能够从聊天屏幕注销，以实现应用程序中的登录功能。为此，让我们先实现注销，这将在用户按下聊天屏幕上的注销按钮时完成。让我们为 ChatVC 创建一个 action outlet 以注销。

要注销用户，Firebase 提供了 `signOut()` 方法，通过该方法我们可以退出应用程序。让我们将以下代码添加到 ChatVC 中。

这将允许我们从应用程序注销并导航回应用程序的欢迎屏幕。

登录功能

现在，我们必须实现登录功能，以便使用我们注册的凭据重新登录到应用程序。

要为登录屏幕编写代码，我们需要在 LoginVC 中为登录按钮创建 outlet。要实现登录，请将以下代码添加到 LoginVC 中。

这将允许用户登录到应用程序。但是，如果提供的凭据有误，它也会作为警报向用户显示错误，如下所示。

聊天功能

现在，我们已经完成了登录和注销功能的实现；我们可以开始实现应用程序中的聊天功能了。让我们看看 storyboard 中的 ChatVC，因为我们还没有为 tableview 添加任何 cell UI，它将显示用户之间的聊天消息。

现在，让我们添加一个 XIB 文件，它将是 UITableViewCell 的子类，并将其注册到 tableview。

要创建 XIB 文件，我们在创建 CocoaTouch Class 时需要勾选“Also Create the Xib”选项，如下所示。

这将创建 ChatTableViewCell XIB 和类。我们先配置设计。在 ChatTableViewCell 中，我们将添加一个 image view 来显示用户的个人资料图片，我们还将添加 UILabels 来显示用户的姓名和消息，如下所示。

我们需要在 ChatTableViewCell 中创建 outlet，其中将包含以下代码。

要将 XIB 文件与 tableview 注册，请在 ChatVC 的 `viewDidLoad()` 方法中添加以下代码。

现在，让我们实现 tableview 的 delegate 和 datasource 方法来在 tableview 中创建 cells。为此，请将以下代码添加到 ChatVC 中。

构建、运行并登录到应用程序后，我们将看到以下聊天屏幕，其中包含带有默认标签用户名和空白用户个人资料图片的虚拟消息。

现在，让我们创建一个 Model 类来设置自定义消息。我们的 Model 类将包含我们的消息。创建一个新的 Swift 文件 Message.swift 并将以下代码添加到其中。

让我们使用我们的实时聊天应用程序发送一些消息。到目前为止，我们一直在使用虚拟文本来显示 UI。但是，我们将使用 Firebase 数据库在应用程序中发送和检索实际消息。

在我们的应用程序中，当用户在 ChatVC 的消息文本字段中输入任何消息时，消息将被保存在我们的 Firebase 数据库中。让我们在发送按钮的操作 outlet 中实现这一点。

在添加此代码并发送任何消息后，构建并运行应用程序，我们可以检查 Firebase 控制台是否正在保存消息。

我们需要用消息填充 tableview，以显示发送的消息，而不是显示虚拟文本。

为此，让我们在 ChatVC 中创建一个 Message 对象数组。

现在，为 ChatVC 添加以下方法以检索消息。

我们也在 `getMsgs()` 方法中重新加载 tableview。我们还需要更改 tableview 的 delegate 和 dataSource 实现，以便使用 messageArr 进行数据填充。

现在，我们已经完成了实时聊天应用程序的设置。我们需要从 ChatVC 的 `viewDidLoad()` 方法调用 `getMsgs()` 方法。构建、运行并在两个不同的模拟器或设备上登录到应用程序，看看我们是否可以发送消息。

我们的 ChatVC 将包含以下代码。