在现代 Web 应用程序中，实时性是追求的一项重要特性。有时，我们需要在服务器和客户端之间实时传输数据，以及迅速响应用户输入和反馈。Express.js 和 Firebase 是两个强大的工具，它们组合在一起可以构建出具有实时性的 Web 应用程序。
Express.js 和 Firebase 的简介
Express.js 可能是 Node.js 中最流行和最广泛使用的 Web 框架之一。它基于 Node.js 平台，可以用于构建 Web 应用程序和 API。它是一个简单但功能强大的框架，提供了大量的中间件来帮助我们实现几乎任何类型的 Web 应用程序。
Firebase 是一个全套工具和服务的平台，它可以帮助我们将实时功能添加到我们的 Web 应用程序中。它提供了实时数据库、云存储、身份验证、推送通知等功能，而不需要我们自己搭建和维护服务器。
构建基于 Express.js 和 Firebase 的实时 Web 应用程序
现在，我们将演示如何使用 Express.js 和 Firebase 构建一个具有实时性的 Web 应用程序。以下是构建步骤：
第一步：创建 Firebase 项目
首先，我们需要在 Firebase 中创建一个新项目。访问 Firebase 控制台，单击“创建新项目”，输入项目名称并单击“创建”。
接下来，我们需要在 Firebase 控制台中创建一个实时数据库。在 Firebase 控制台的左侧导航中，选择“实时数据库”，然后单击“创建数据库”。我们将选择测试模式，并为我们的数据库选择地区。单击“启用”，我们就已经拥有了一个空的实时数据库。
第二步：设置 Express.js 项目
我们需要创建一个新的 Express.js 项目并将其连接到 Firebase 项目。假设你已经安装了 Node.js，打开终端并输入以下命令：
mkdir myapp cd myapp npm init npm install express firebase
现在，我们将创建一个新的 Express.js 应用程序，并将其连接到 Firebase 实时数据库。以下是示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- -------- - --------------------
-- --- --------
----- ------ - -
------- ---------------
----------- -------------------
------------ --------------------
--
-------------------------------
-- -- ------- ----
----- --- - ----------
-- --
------------ ----- ---- -- -
-- ----------
--------------------------------------------------------------- -- -
----- ------- - ---------------
-- ----
--------------------------------
---
---
-- ----
----- ---- - ---------------- -- -----
---------------- -- -- ---------------------- -- ---- --------------第三步：添加实时性
现在，我们已经可以将 Express.js 应用程序连接到 Firebase 数据库并从中读取数据。要添加实时性，我们需要使用 Firebase 提供的事件监听器。
以下是我们如何将 Express.js 应用程序连接到 Firebase 数据库并添加实时性：
-- -------------------- ---- -------
----- ------- - -------------------
----- -------- - --------------------
-- --- --------
----- ------ - -
------- ---------------
----------- -------------------
------------ --------------------
--
-------------------------------
-- -- ------- ----
----- --- - ----------
-- --
------------ ----- ---- -- -
-- ----------
----------------------------------------------- -------- -- -
----- ------- - ---------------
-- ----
--------------------------------
---
---
-- ----
----- ---- - ---------------- -- -----
---------------- -- -- ---------------------- -- ---- --------------现在，我们使用 on 事件监听器替换了 once 方法。当我们的数据发生变化时，on 事件监听器将自动更新页面并显示新的数据。
第四步：写入实时数据
以上代码仅仅允许我们从实时数据库中读取数据。现在，我们将演示如何向实时数据库中写入实时数据。
以下是我们如何将数据保存到实时数据库中，以及如何通过页面表单将数据插入到实时数据库中：
-- -------------------- ---- -------
----- ------- - -------------------
----- -------- - --------------------
-- --- --------
----- ------ - -
------- ---------------
----------- -------------------
------------ --------------------
--
-------------------------------
-- -- ------- ----
----- --- - ----------
-- --
------------ ----- ---- -- -
-- ----------
----------------------------------------------- -------- -- -
----- ------- - ---------------
-- ---------
----------
----- ----------------- --------------
------ ----------- ---------------
------- -----------------------------
-------
-------------------
---
---
---
-------------------- ----- ---- -- -
-- -----------
----- ------- - -----------------
-- ---------- -------
-------------------------------------------------
-- ------
------------------
---
-- ----
----- ---- - ---------------- -- -----
---------------- -- -- ---------------------- -- ---- --------------现在，我们向应用程序添加了一个表单，允许用户输入消息并将其保存到实时数据库中。上面的代码演示了如何处理 POST 请求并保存数据到实时数据库中。
总结
在本文中，我们演示了如何使用 Express.js 和 Firebase 构建具有实时性的 Web 应用程序。我们了解了如何连接 Express.js 应用程序到 Firebase 数据库，并使用 Firebase 提供的事件监听器实现实时性。我们还展示了如何将数据保存到实时数据库中，以及如何使用表单将数据插入到实时数据库中。
此外，Firebase 还提供了许多其他功能，如云存储、身份验证、推送通知等。使用 Express.js 和 Firebase，你可以构建出处理大量数据和高并发的 Web 应用程序，具有出色的实时性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e84e2df6b2d6eab33d3cd6