使用 Next.js 和 Firebase 构建聊天应用程序的全面指南

阅读时长 19 分钟读完

作为前端开发人员，构建聊天应用程序是一个很有趣也很实用的项目。在本文中，我们将介绍如何使用 Next.js 和 Firebase 构建一个全栈聊天应用程序。

简介

Next.js 是一个流行的 React 框架，在构建现代 Web 应用程序方面提供了很大的帮助。Firebase 是 Google 提供的一种后端即服务 (BaaS)，用于加速 Web 应用程序的开发进程。这两个技术一起可以构建出一个出色的聊天应用程序。

在本文中，我们将涵盖以下主题：

  • 登录和身份验证：使用 Firebase 的身份验证功能可以轻松创建聊天室，并限制只有经过身份验证的用户才能访问它们。
  • 实时聊天：我们将使用 Firebase Realtime Database 作为我们的后端。该数据库提供了实时的事件推送，以确保聊天室中的消息能够及时报告。
  • 反应界面组件：我们将使用React和Next.js构建出优美且易于使用的聊天界面。

最后，我们将分享一些有关如何将此应用程序移动到生产环境的建议。

准备工作

在开始之前，我们需要确保已经装有以下软件：

  • Git
  • Node.js 8 或更高版本
  • Firebase CLI

如果尚未安装，请按照 官方文档 来安装 Firebase CLI。

创建 Next.js 应用程序

首先，我们需要创建一个基础的 Next.js 应用程序并安装所需的依赖项。

以使用 npm 初始化一个新的应用程序为例：

在项目目录中，运行以下命令来启动应用程序：

现在，您可以在 http://localhost:3000 访问应用程序，看到默认的 Next.js 页面。

连接 Firebase

在继续之前，我们需要连接 Firebase 客户端 SDK 和 Firebase 服务。在您的项目目录中，使用以下命令添加 Firebase 依赖项：

现在，我们可以在项目中初始化 Firebase。

首先，在 Firebase 控制台 上创建一个新项目。

接下来，安装 Firebase CLI 并使用以下命令登录 Firebase 帐户：

接着，使用以下命令将 Firebase 项目添加到您的代码库：

此命令将进入交互式模式，让您选择使用哪些 Firebase 功能。选择“Database”与“Hosting”并使用期间默认选项。然后，它将为您的应用程序创建一个 firebase.json 文件和一个 public/ 目录。

现在，我们需要将 Firebase 配置加载到我们的 Next.js 应用程序中。在项目根目录下创建一个新文件 .env.local，并将以下行添加到其中：

把下面这个换成上面 Firebase 中对应的键的值，其中 YOUR_XXX 分别代表在 Firebase 控制台上的相应项目值：

  • YOUR_API_KEY
  • YOUR_AUTH_DOMAIN
  • YOUR_DATABASE_URL
  • YOUR_PROJECT_ID
  • YOUR_STORAGE_BUCKET
  • YOUR_MESSAGING_SENDER_ID
  • YOUR_APP_ID
  • YOUR_MEASUREMENT_ID

需要将这些 Firebase 配置作为环境变量在我们的 Next.js 应用程序中使用。介于环境变量是公开的，我们使用 NEXT_PUBLIC_ 前缀将其设置为客户端可见的。

最后，更新 pages/_app.js 文件中 const firebaseConfig = {...} 中的配置对象以从环境变量获取 Firebase 配置。

-- -------------------- ---- -------
-- -------------
------ -------- ---- ---------------
------ ----------------
------ --------------------
------ ---------------------

----- -------------- - -
  ------- -----------------------------------------
  ----------- ---------------------------------------------
  ------------ ----------------------------------------------
  ---------- --------------------------------------------
  -------------- ------------------------------------------------
  ------------------ -----------------------------------------------------
  ------ ----------------------------------------
  -------------- ------------------------------------------------
--

-- ----------------------- -
  ---------------------------------------
-

------ ------- -------- ------- ---------- --------- -- -
  ------ ---------- -------------- ---
-

我们现在已经连接了 Firebase 并在我们的 Next.js 应用程序中初始化了 Firebase 客户端 SDK。

用户身份验证

在设置实时聊天之前，我们需要确保只有身份验证的用户才能访问我们的聊天室。Firebase 身份验证提供了多种身份验证方法，包括电子邮件/密码、Google 登录、Facebook 登录、Twitter 登录、Github 登录等。

现在，我们将使用电子邮件/密码身份验证方法。

邮箱/密码身份验证

要启用电子邮件/密码身份验证方法，请在 Firebase 控制台中按照以下步骤操作：

  1. 转到“身份验证”部分并选择“注册方法”选项卡。
  2. 启用“电子邮件/密码”注册选项。

现在，用户可以使用其电子邮件和密码进行身份验证。

登录注册表单

首先，我们将在 components/auth 目录中创建一个名为 login.js 的新组件。

-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ---------------
------ ----------------

----- --------- - -- -- -
  ----- ------- --------- - -------------
  ----- ---------- ------------ - -------------

  ----- ----------- - ----- ------- -- -
    -----------------------
    --- -
      ----- ------------------------------------------------- ----------
    - ----- ------- -
      ---------------------
    -
  --

  ----- ------------ - ----- ------- -- -
    -----------------------
    --- -
      ----- ----------------------------------------------------- ----------
    - ----- ------- -
      ---------------------
    -
  --

  ------ -
    ------
      ------
        ------------
        -------------
        ------------- -- -------------------------
        -------------------
      --
      ------
        ---------------
        ------------------
        ----------------
        ------------- -- ----------------------------
        ----------------------
      --
      -----
        ------- --------------------- --------------
          --
        ---------
        ------- ---------------------- --------------
          --
        ---------
      ------
    -------
  --
--

------ ------- ----------

这个组件包含一个登录表格和一些有用的函数。

  • handleLogin 处理用户登录。
  • handleSignup 处理用户注册。

现在，我们将使用 LoginForm 组件将其添加到我们的 pages/index.js 文件中：

-- -------------------- ---- -------
------ --------- ---- ---------------------------

----- ---- - -- -- -
  ------ -
    -----
      ---------- --
    ------
  --
--

------ ------- -----

现在我们有了一个简单的登录/注册组件，可以使用它让用户通过电子邮件/密码身份验证方法访问我们的聊天室。

实时聊天

使用 Firebase，我们既可以存储数据，也可以使用它的实时功能。

在这个例子中，我们将使用 Firebase Realtime Database 存储聊天消息。

集成 Firebase Realtime Database

Firebase Realtime Database 是一个实时的、异步的并且是在云端的 NoSQL 数据库。它使用 WebSocket 连接到客户端库，以确保数据在实时性和协作方面的准确性。

首先，让我们安装 Firebase Realtime Database 依赖项：

在 Firebase 控制台中，转到“项目设置”，找到“服务帐号”选项卡，并为您的 Firebase 项目生成一个新的私钥。稍后，我们将需要将其下载并保存为 JSON 文件。

接下来，创建一个名为 chat.js 的新组件，并将以下代码添加到其中：

-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ -------- ---- ---------------
------ --------------------

----- -------- - -- -- -
  ----- ---------- ------------ - -------------
  ----- --------- ----------- - -------------
  ----- ------ -------- - ---------------
  ----- --------- ----------- - ----------------

  ------------ -- -
    ----------------------------------------- -- -
      -- ------ -
        --------------
        -----------------

        ----- ------- - --------------------------------
        ------------------- ---------- -- -
          ----- -------- - ---------------
          ----- ---- - ---
          --- ---- -- -- --------- -
            ----------- --- --------------- ---
          -
          ------------------
        ---
      - ---- -
        --------------
        -----------------
      -
    ---
  -- ----

  ----- ------------ - ----- ------- -- -
    -----------------------
    -- ----------------- -------
    ----- --------------------------------------
      --------
      ------- ---------
      ---------- -----------
    ---
    ---------------
  --

  ------ ------- - -
    -----
      ---------------- - - --
        ---------------------- -- -
          ---- -----------------
            ------------------------
          ------
        ---
      ----- ------------------------
        ------
          -----------
          ---------------
          ------------- -- ---------------------------
          ----------------- ---- ------- ----
        --
        ------- -------------------------
      -------
    ------
  - - -
    -----------------
  --
--

------ ------- ---------

实时监测聊天房间变化

这个新创建的组件包含以下内容：

  • 一个名为 chatData 的状态来存储聊天数据列表。
  • 一个名为 message 的状态来存储用户输入的消息。
  • 一个名为 user 的状态来存储当前用户。
  • 一个名为 isReady 的状态来存储 Firebase 是否已准备好。

这个组件使用 useEffect 钩子来查询 Firebase 上的聊天消息并更新 chatData 状态。

Firebase 的 onAuthStateChanged 函数将同步更新当前用户状态，以便防止未经身份验证的用户访问聊天室。

在 handleSubmit 函数中，该组件将用户输入的消息推送到 chat 数据库中。

添加聊天组件

现在，我们将在我们的 pages/index.js 文件中使用聊天组件。添加以下内容：

-- -------------------- ---- -------
------ --------- ---- ---------------------------
------ -------- ---- ---------------------

----- ---- - -- -- -
  ----- ------ -------- - ---------------

  ------------ -- -
    ----------------------------------------- -- -
      -- ------ -
        --------------
      - ---- -
        --------------
      -
    ---
  -- ----

  ------ -
    -----
      ----- - --------- -- - ---------- ---
    ------
  --
--

------ ------- -----

在 Home 组件中，使用 useEffect 钩子来监听当前用户是否已被身份验证。如果用户已登录，则显示聊天室组件。如果不是，显示登录表格。

反应界面组件

要构建一个出色、易于使用的聊天界面，我们将使用 React 和 Next.js 来创建界面组件。

消息组件

我们创建一个新组件 Message.js，用于渲染聊天消息。

-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- --------------------

----- --------- - -----------
  -------- -----
  ----------- ----

  ------- -
    ------- -----
    ------ -----
    -------------- ----
    ------------- -----
  -

  -------- -
    -------- -----
    --------------- -------
    ---------------- -------------

    -------- -
      ----------------- --------
      -------- ----
      -------------- -----
      ---------- ----
    -

    --------- -
      ---------- -----
      ------------ -----
    -
  -
--

----- ------- - -- ------- -- -- -
  ------ -
    -----------
      ---- ------------------ --
      ---- --------------------
        ---- -------------------------------------------
        ---- -------------------------------------------
      ------
    ------------
  --
--

------ ------- --------

这个组件将显示每条聊天消息的头像、内容和发送时间戳。

聊天组件

接下来，我们将创建一个名为 Chat.js 的新组件，该组件将使用上述 Message 组件和在上面 chat.js 文件中实时查询的聊天数据。

-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ------ ---- --------------------
------ -------- ---- ---------------
------ --------------------

------ ------- ---- ------------

----- --------- - -----------
  ---------- -----
  ------- -----
  -------- -----
  --------------- -------
  -------- -----
  ----------- -------
  ----------------- ------
--

----- ---- - -- ---- -- -- -
  ----- ---------- ------------ - -------------
  ----- --------- ----------- - -------------

  ------------ -- -
    ----- ------- - --------------------------------
    ------------------- ---------- -- -
      ----- -------- - ---------------
      ----- ---- - ---
      --- ---- -- -- --------- -
        ----------- --- --------------- ---
      -
      ------------------
    ---
  -- ----

  ----- ------------ - ----- ------- -- -
    -----------------------
    -- ----------------- -------
    ----- --------------------------------------
      -------- --------
      ------- --- ----------------------------
      ------- ---------
      ---------- -----------
    ---
    ---------------
  --

  ------ -
    -----------
      ---------------- - - --
        ---------------------- -- -------- ---------------- ----------------- ----
      ----- ------------------------
        ------
          -----------
          ---------------
          ------------- -- ---------------------------
          ----------------- ---- ------- ----
        --
        ------- -------------------------
      -------
    ------------
  --
--

------ ------- -----

现在，我们已经创建了一个简单且易于使用的聊天界面。

部署应用程序

最后，我们可以使用 Firebase Hosting 将应用程序部署到生产环境中。

在项目根目录中运行以下命令：

在交互式命令行中，将选项选择为“Hosting”，然后选择创建一个新的 Hosting 站点。之后，使用默认选项完成配置过程。

接下来，运行以下命令，将您的应用程序构建到 /out 文件夹中：

最后，运行以下命令将应用程序上传到 Firebase Hosting：

访问 Firebase 控制台上的“Hosting”标签页，查看您的主机名称，即可浏览上线的应用程序。

结论

在这篇文章中，我们已经学习了如何使用 Next.js 和

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6704c0c5d91dce0dc8501a85

纠错
反馈
相关推荐
精选内容