使用 Express.js 和 Firebase 构建实时 Web 应用程序-JavaScript中文网-JavaScript教程资源分享门户

使用 Express.js 和 Firebase 构建实时 Web 应用程序

在现代 Web 应用的开发中，实时性成为了一项非常重要的功能需求。为了满足这一需求，Firebase 可以成为我们的首选解决方案。配合 Express.js 这一流行的 Web 应用程序开发框架，我们可以轻松地构建出一个高效、可维护的实时 Web 应用程序。

本文将详细介绍如何使用 Express.js 和 Firebase 构建实时 Web 应用程序，并提供示例代码，帮助读者更好地理解本文内容。

准备工作

在开始构建之前，我们需要完成以下准备工作：

安装 Node.js 以及 npm
创建一个 Firebase 帐号
创建一个 Express.js 项目

如果你已经完成了这些准备工作，那么我们可以开始构建我们的实时 Web 应用程序了。

构建实时 Web 应用程序

安装 Firebase SDK

为了能够使用 Firebase，我们需要安装 Firebase SDK。在项目根目录下，使用以下命令进行安装：

npm install firebase-admin firebase-functions firebase-tools

创建 Firebase 实例

在项目中引入 Firebase SDK 后，我们需要创建 Firebase 实例。首先，在 Firebase 控制台中创建一个项目。然后，在你的项目中创建一个 firebase.js 文件，用来管理 Firebase 实例。

// www.javascriptcn.com code example
const admin = require('firebase-admin');

admin.initializeApp({
  credential: admin.credential.applicationDefault(),
  databaseURL: 'YOUR_DATABASE_URL'
});

const db = admin.firestore();

module.exports = { admin, db };

在这个文件中，我们首先引入 Firebase SDK，然后调用 initializeApp 方法来初始化 Firebase 实例。在这个方法中，我们需要提供一个凭证和你的数据库 URL。

添加实时功能

在 Firebase 中实时功能的实现方式是使用实时数据库。首先，我们需要在 firebase.js 文件中添加以下代码：

const ref = admin.database().ref();
const usersRef = ref.child('users');

usersRef.on('child_added', (snapshot) => {
  console.log(snapshot.key, snapshot.val());
});

在这个代码块中，我们首先创建一个数据库引用，然后选择一个子节点，并添加 child_added 事件监听。每当有新的子节点被添加到数据库中时，这个方法都会被触发。

在这个事件监听中，我们可以通过 snapshot.key 获取子节点键名，通过 snapshot.val() 获取数据。

添加 Express.js HTTP 服务

在我们的 Web 应用程序中，我们需要添加一个 HTTP 服务，以便在客户端中访问实时数据。在 Express.js 中添加 HTTP 服务非常简单。在你的项目中创建一个 app.js 文件，用来管理 HTTP 服务：

// www.javascriptcn.com code example
const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors');
const { admin, db } = require('./firebase');

const app = express();

app.use(cors());

// 首页
app.get('/', (req, res) => {
  res.send('首页');
});

// 用户列表页面
app.get('/users', (req, res) => {
  const users = [];

  admin.database().ref('users').once('value', (snapshot) => {
    snapshot.forEach((childSnapshot) => {
      users.push({
        id: childSnapshot.key,
        ...childSnapshot.val()
      });
    });

    res.json({ data: users });
  });
});

exports.app = functions.https.onRequest(app);

在这个代码块中，我们首先引入函数库和 Express.js，然后创建一个 Express 实例。我们还添加了一个 CORS 中间件，以便从客户端访问我们的 HTTP 服务。

我们也添加了两个路由：一个用来显示首页，另一个用来显示用户列表。在用户列表路由中，我们使用 Firebase SDK 来获取实时数据库中的用户数据，并将数据通过 JSON 返回给客户端。

运行本地服务器

现在，我们可以在本地服务器上运行我们的应用程序了：

firebase serve

运行此命令后，我们可以在本地环境中使用 http://localhost:5000 访问我们的应用程序。

结语

至此，我们已经成功地使用 Express.js 和 Firebase 构建出了一个实时 Web 应用程序。使用 Firebase，我们可以轻松地获得实时数据并向客户端提供它们。通过 Express.js，我们可以创建一个高效且易于维护的 HTTP 服务器。

本文提供了一些基本的指导意义，但 Firebase 和 Express.js 提供了更多高级的功能和特性，值得进一步研究。新手在使用这些工具时也需要更加小心。

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

使用 Express.js 和 Firebase 构建实时 Web 应用程序

接着读