前言
现在越来越多的 Web 应用需要实时响应，因此构建实时 Web 应用变得越来越普遍。可能你之前已经提供了最简单的轮询方法，但是这样会占用大量的带宽和服务器资源。本文将介绍使用 Next.js 和 Firebase 构建实时 Web 应用的方法。
Firebase 简介
Firebase 是一种后端即服务（“BaaS”），由 Google 提供。Firebase 提供了各种功能，例如实时数据库、身份验证、文件存储、主机和 API。
在此实时 Web 应用示例中，我们将使用 Firebase 实时数据库和身份验证服务。
Next.js 简介
Next.js 是一个 React 框架，可以进行静态生成和服务器渲染。使用 Next.js 可以大大简化应用程序的开发过程。
Next.js 还提供了 getServerSideProps 和 getStaticProps，可以在加载页面之前从 API 获取数据。
现在，我们将开始创建我们的实时 Web 应用程序。
项目设置
我们将创建一个“to-do”列表，当用户输入项时，我们将通过 Firebase 实时数据库实时更新并显示列表。
创建 Firebase 帐户并启用实时数据库和身份验证服务。
然后，我们将使用 Next.js 创建一个新项目：
npx create-next-app next-firebase-todo
- 安装 Firebase 和 Firebase 官方库：
npm install --save firebase npm install --save next-firebase-auth
- 我们需要在项目中创建一个
.env.local文件，并添加 Firebase 配置信息：
FIREBASE_API_KEY = YOUR_API_KEY FIREBASE_AUTH_DOMAIN = YOUR_AUTH_DOMAIN FIREBASE_PROJECT_ID = YOUR_PROJECT_ID FIREBASE_STORAGE_BUCKET = YOUR_STORAGE_BUCKET FIREBASE_MESSAGING_SENDER_ID = YOUR_MESSAGING_SENDER_ID FIREBASE_APP_ID = YOUR_APP_ID
实现代码
准备工作
在 pages/index.js 中创建一个组件，它将包含实时更新的列表和一个输入框。
-- -------------------- ---- -------
------ - -------- - ---- --------
------ -------- ---- ---------------
------ --------------------
------ ----------------
------ - ----------- - ---- ---------------------
------ ------- -------- ------ -
----- ------- --------- - -------------
----- ------------ -------------- - -------------
----- -------- - --------------
------ -
-----
-------- ---------
------------ -- -
-----
----- ------------------------
------ ----------- ------------------ ----------------------- --
------- ----------------- -------------
-------
----
----------------- -- -
--- ------------------------------
---
-----
------
--
------------- -- ----------- ---- ---------
------
--
-在此代码中，我们导入了 Firebase 和 next-firebase-auth 库。使用 useState 生成状态，其中 todos 用于存储所有添加的任务，并在用户添加时更新。inputValue 用于实时记录输入的任务名称。
authUser 是使用 next-firebase-auth 库获取的当前用户对象。最后，我们在 return 语句中返回一个视图，包含一个输入框和一个包含任务列表和表单的 div 元素。
添加 Todo
我们需要使用户输入的任务与 Firebase 实时数据库相对应。为此，我们创建一个新的 firebase 对象，该对象负责与 Firebase 数据库进行通信。
在 handleSubmit 函数中，我们使用 push() 函数将新任务添加到实时数据库中。在 useEffect 钩子中，我们使用 on('value') 响应函数实时监听 Firebase 数据库，以更新本地任务状态。
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
------ -------- ---- ---------------
------ --------------------
------ ----------------
------ - ----------- - ---- ---------------------
------ ------- -------- ------ -
----- ------- --------- - -------------
----- ------------ -------------- - -------------
----- -------- - --------------
------------ -- -
-- ------------- -
----- -------- - ------------------------------------------------
-------------------- ---------- -- -
----- ---- - ---------------
-- ------ -
----- -------- - --------------------------- -- --
--- ----
----- ----------
----
-------------------
- ---- -
-------------
-
---
-
-- ------------
----- ------------ - ------- -- -
-----------------------
----- - ---- ------ - - ---------
----- ---------- - --------------------------------------------------
---------------------------
------------------
--
----- ------------ - ------- -- -
----------------------------------
--
------ -
-----
-------- ---------
------------ -- -
-----
----- ------------------------
------
-----------
------------------
-----------------------
--
------- ----------------- -------------
-------
----
----------------- -- -
--- ------------------------------
---
-----
------
--
------------- -- ----------- ---- ---------
------
--
-在 handleChange 函数中，我们让每次用户输入增量更新输入值。在 handleSubmit 函数中，我们生成包含任务的新 Firebase 引用，并使用 set() 函数将 inputValue 更新为 Firebase 引用的值。最后，我们使用 setInputValue 清空 inputValue。
添加身份验证
我们现在将添加身份验证。身份验证是使用 FirebaseAuth 官方库完成的。
我们需要在 pages/api/auth/[...nextauth].js 中创建身份验证端点。
-- -------------------- ---- -------
------ -------- ---- ------------
------ --------- ---- ----------------------
------ ------- ----------
---------- -
------------------
--------- ----------------------
------------- --------------------------
---
--
---我们现在将修改 pages/index.js 以显示当前用户。
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
------ -------- ---- ---------------
------ --------------------
------ ----------------
------ - ------------ ------------ - ---- ---------------------
----- ----- - -- -- -
----- ------- --------- - -------------
----- ------------ -------------- - -------------
----- -------- - --------------
------------ -- -
-- ------------- -
----- -------- - ------------------------------------------------
-------------------- ---------- -- -
----- ---- - ---------------
-- ------ -
----- -------- - --------------------------- -- --
--- ----
----- ----------
----
-------------------
- ---- -
-------------
-
---
-
-- ------------
----- ------------ - ------- -- -
-----------------------
----- - ---- ------ - - ---------
----- ---------- - --------------------------------------------------
---------------------------
------------------
--
----- ------------ - ------- -- -
----------------------------------
--
------ -
-----
-------- ---------
------------ -- -
-----
---------- ----- --------------------
----- ------------------------
------
-----------
------------------
-----------------------
--
------- ----------------- -------------
-------
----
----------------- -- -
--- ------------------------------
---
-----
------
--
------------- -- ----------- ---- ---------
------
--
--
------ ------- ----------------------在此代码中，我们使用 useAuthUser 钩子获取应用程序中的当前用户。在 return 语句中，我们将 authUser.email 显示为当前用户。
最后，我们需要在 .env.local 文件中添加 Google OAuth 安全凭据：
GOOGLE_ID = YOUR_CLIENT_ID GOOGLE_SECRET = YOUR_CLIENT_SECRET
结论
现在，我们已经学习了使用 Next.js 和 Firebase 构建实时 Web 应用的方法。我们的示例 “to-do” 列表包括带有 Firebase 实时数据库的身份验证功能，可以动态更新并在客户端渲染。
使用 Firebase 和 Next.js，我们可以轻松创建实时 Web 应用程序。我们希望这篇文章可以帮助你开始构建你自己的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67728fb96d66e0f9aadaac2d