Web 应用程序的实时性是现代 Web 开发的重要领域之一。在这个领域中，Express.js 和 Firebase 是两个最热门的工具。在本文中，我们将使用 Express.js 和 Firebase 来开发实时 Web 应用程序。我们将详细介绍这两个工具的使用，以及如何将它们结合起来进行实时 Web 应用程序开发。
什么是实时 Web 应用程序？
实时 Web 应用程序是指可以实时向客户机发送数据，以及实时获取客户机的数据的 Web 应用程序。这种应用程序可以使用 WebSockets，Server-Sent Events 或轮询等技术来实现客户机和服务器之间的实时通信，但是每个技术都有其优缺点。
在本文中，我们将使用 Firebase 来实现实时 Web 应用程序。Firebase 是 Google 公司开发的一种实时数据库解决方案，可以轻松处理 WebSocket 和长轮询等技术。Firebase 还提供了丰富的后端功能，例如身份验证，云函数等。在本文中，我们将使用 Firebase 的实时数据库以及身份验证功能。
步骤 1：安装和设置 Firebase SDK
首先，我们需要安装 Firebase SDK。可以使用 npm 包管理器安装 Firebase。打开终端并输入以下命令：
--- ------- --------
安装完成后，我们需要通过 Firebase 控制台创建一个项目，并获取我们的项目的凭据。我们可以通过以下链接访问 Firebase 控制台：https://console.firebase.google.com/。在 Firebase 控制台中创建一个新项目并获取凭据。
步骤 2：安装 Express.js 并创建 Express 应用
接下来，我们需要安装 Express.js 并创建一个 Express 应用程序。可以使用以下命令安装 Express.js：
--- ------- -------
然后，我们需要在项目目录中创建一个名为 server.js 的文件，并使用以下代码创建一个 Express 应用程序：
----- ------- - ------------------ ----- --- - --------- ---------------- -- -- ------------------- ------- -- ---- -------
步骤 3：连接 Firebase 实时数据库
我们已经创建了 Express 应用程序，现在需要连接 Firebase 实时数据库。可以使用以下代码连接 Firebase 实时数据库：
----- -------- - ------------------- ----- -------------- - - -- ----- -------- -- - --------------------------------------
需要在上述代码中添加凭据。凭据包括通过 Firebase 控制台获取的项目 ID、API 密钥和数据库 URL。这些凭据将被用于初始化 Firebase SDK。
步骤 4：身份验证和安全性
现在，我们需要设置身份验证和安全性。我们要确保只有经过身份验证的用户才能访问我们的实时数据库。可以使用以下代码设置身份验证和安全性：
----- -------- - -------------------
----- -------------- - -
-- ----- -------- --
-
--------------------------------------
----- ---- - ---------------
----- -------- - -------------------
------------- ---- ----- -- -
----- --------- - ---------------------------------------- -----
-- ----------- -
-----------------------------
------------ -- -
-------- - ----
------
--
--------- -- ---------------------- ------ -------------- ---
- ---- -
---------------------- ------ -------------- --
-
--需要在上述代码中添加 Firebase 实例，以便我们可以使用 Firebase 身份验证和 Firebase 数据库。在身份验证中，我们首先检查是否传递了身份验证标头。如果标头不存在，则返回 "未经授权" 错误。如果标头存在，则使用 Firebase 验证 ID 令牌验证用户，如果验证成功，则将用户存储在请求对象中，以供以后使用。
步骤 5：在 Firebase 实时数据库中设置数据
现在，我们已经设置了 Firebase 实时数据库的身份验证和安全性，接下来，我们需要向 Firebase 实时数据库添加一些数据。可以使用以下代码添加数据：
----- -------- - -------------------
----- -------------- - -
-- ----- -------- --
-
--------------------------------------
----- ---- - ---------------
----- -------- - -------------------
------------- ---- ----- -- -
----- --------- - ---------------------------------------- -----
-- ----------- -
-----------------------------
------------ -- -
-------- - ----
------
--
--------- -- ---------------------- ------ -------------- ---
- ---- -
---------------------- ------ -------------- --
-
--
--------------------- ----- ---- -- -
----- - ---- - - --------
----- ------- - -
--- --------------------------------------------
-----
------- -------------
---------- ----------
-
---------------------------------------------------
---------------------- ------- --
--在上述代码中，我们已经添加了一个 Post 请求处理程序，用于将消息添加到 Firebase 实时数据库。我们使用 Firebase 实时数据库 API 将 message 对象存储在 Firebase 实时数据库中。我们还存储了消息的时间戳和用户 ID。
步骤 6：将 Firebase 实时数据库中的数据与 Web 应用程序集成
现在，我们已经将数据添加到 Firebase 实时数据库中，接下来，我们需要将数据与 Web 应用程序集成。可以使用以下代码将 Express 应用程序与 Firebase 实时数据库集成：
----- -------- - -------------------
----- -------------- - -
-- ----- -------- --
-
--------------------------------------
----- ---- - ---------------
----- -------- - -------------------
------------- ---- ----- -- -
----- --------- - ---------------------------------------- -----
-- ----------- -
-----------------------------
------------ -- -
-------- - ----
------
--
--------- -- ---------------------- ------ -------------- ---
- ---- -
---------------------- ------ -------------- --
-
--
--------------------- ----- ---- -- -
----- - ---- - - --------
----- ------- - -
--- --------------------------------------------
-----
------- -------------
---------- ----------
-
---------------------------------------------------
---------------------- ------- --
--
-------------------- ----- ----- ---- -- -
----- -------- - ----- --------------------------------------
----- -------- - -------------- -- --
---------------------- -------- --
--在上述代码中，我们添加了一个 Get 请求处理程序，用于从 Firebase 实时数据库获取所有消息。我们使用 Firebase 实时数据库 API 获取所有消息，并将它们包装在一个 JSON 中，以便在响应中发送给客户机。
步骤 7：创建客户端应用程序
最后，我们需要创建一个客户端应用程序来显示 Firebase 实时数据库中的数据。可以使用以下代码创建一个简单的客户端应用程序：
--------- -----
------
------
--------------- --- -------------------
-------
------
---- --------------------
----- ------------------
------ ----------- ------------------ --
------- ---------------------------
-------
------- ------------------------------------------------------------------------
------- -----------------------------------------------------------------------------
--------
----- -------------- - -
-- ----- -------- --
-
--------------------------------------
----- -------- - -------------------
----- ----------------- - -----------------------------------
----- ----------- - ---------------------------------------
----- ------------ - ----------------------------------------
-------------------------------------- ------- -- -
----------------------
----- ---- - ------------------
-- ------ -
--------------------- - ----
------------------ -
------- -------
-------- -
--------------- -------------------
---------------- ------- -------------------------------------
--
----- ---------------- ---- --
--
---------------- -- ----------------
-------- -- -
--------------------- - -----
------------------ - --
--
-
--
----------------------------------------- -- -
-- ------ -
---------------------
----------------- -- -
--------------------------------- ----------
--
-
--
------------------------------------ ---------- -- -
----- -------- - -------------- -- --
--------------------------- - --
----------------------------------------- -- -
----- -------------- - -----------------------------
------------------------ - -
--------------------------
-------- -----------------
-------- ----- -----------------------------------------
-
---------------------------------------------
--
--
---------
-------
-------在上述代码中，我们创建了一个 HTML 文件，并使用 Firebase Web SDK 从 Firebase 实时数据库集成所需的库。我们还创建了一个简单的表单，用于通过 POST 请求向 Firebase 实时数据库添加消息。我们还添加了一个 Get 请求，用于从 Firebase 实时数据库获取消息，以便在客户端应用程序中显示消息。
结论
在本文中，我们使用 Express.js 和 Firebase 来开发实时 Web 应用程序。我们详细介绍了这两个工具的使用，并提供了代码示例和指导意义。通过本文，你可以了解如何集成 Express.js 和 Firebase，并使用它们来开发实时 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67154560ad1e889fe2173ebc