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

GraphQL 和 Firebase 是现代 Web 开发中非常流行的技术栈。GraphQL 是一种用于 API 的查询语言，能够让客户端精确地获取想要的数据，从而提高 Web 应用程序的性能。Firebase 是一种云服务平台，提供了实时数据库、身份验证、存储和推送等功能，能够帮助开发者快速构建 Web 应用程序。本文将介绍如何使用 GraphQL 和 Firebase 构建实时 Web 应用程序。

准备工作

在开始之前，您需要安装 Node.js 和 npm。您还需要创建一个 Firebase 账户，并在 Firebase 控制台中创建一个项目。然后，您需要安装 Firebase CLI 并使用它初始化 Firebase 项目。最后，您需要安装 Apollo Server 和 Apollo Client。

npm install -g firebase-tools
npm install apollo-server apollo-client graphql

创建实时数据库

在 Firebase 控制台中，您需要创建一个实时数据库。实时数据库是一种 NoSQL 数据库，能够实时同步数据更改。您可以使用以下命令初始化实时数据库：

firebase init database

接下来，您可以在项目目录中找到 database.rules.json 文件。这个文件定义了数据库的安全规则。您可以使用以下规则：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

这些规则将允许任何人读取和写入数据库。在生产环境中，您应该使用更严格的规则。

创建 GraphQL 服务器

接下来，您需要创建一个 GraphQL 服务器。您可以使用 Apollo Server 来创建 GraphQL 服务器。在项目目录中创建一个名为 server.js 的文件，然后添加以下代码：

// javascriptcn.com 代码示例
const { ApolloServer, gql } = require('apollo-server');
const admin = require('firebase-admin');

admin.initializeApp({
  credential: admin.credential.applicationDefault(),
  databaseURL: 'https://your-project-id.firebaseio.com',
});

const typeDefs = gql`
  type Message {
    id: ID!
    text: String!
  }

  type Query {
    messages: [Message!]!
  }

  type Mutation {
    addMessage(text: String!): Message!
  }

  type Subscription {
    messageAdded: Message!
  }
`;

const resolvers = {
  Query: {
    messages: async () => {
      const snapshot = await admin.database().ref('messages').once('value');
      return Object.values(snapshot.val() || {});
    },
  },
  Mutation: {
    addMessage: async (_, { text }) => {
      const ref = admin.database().ref('messages').push();
      const message = { id: ref.key, text };
      await ref.set(message);
      return message;
    },
  },
  Subscription: {
    messageAdded: {
      subscribe: () => {
        const channel = new BroadcastChannel('messages');
        return {
          next: () =>
            new Promise(resolve => {
              channel.onmessage = event => resolve(event.data);
            }),
        };
      },
    },
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

这个文件定义了一个 Message 类型，它有一个 id 和一个 text 属性。Query 类型定义了 messages 查询，它返回所有的消息。Mutation 类型定义了 addMessage 操作，它可以添加新的消息。Subscription 类型定义了 messageAdded 订阅，它可以订阅新的消息。

在 resolvers 对象中，您可以定义每个类型的解析器。messages 查询的解析器从实时数据库中获取所有消息。addMessage 操作的解析器将新消息添加到实时数据库中。messageAdded 订阅的解析器使用 BroadcastChannel API 来订阅新消息。

最后，您可以创建一个 Apollo Server 实例并将其启动。

创建实时客户端

接下来，您需要创建一个实时客户端。您可以使用 Apollo Client 来创建实时客户端。在项目目录中创建一个名为 client.js 的文件，然后添加以下代码：

// javascriptcn.com 代码示例
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000',
  cache: new InMemoryCache(),
});

const query = gql`
  subscription {
    messageAdded {
      id
      text
    }
  }
`;

client.subscribe({ query }).subscribe({
  next: data => console.log(data),
});

这个文件创建了一个 Apollo Client 实例，并向 http://localhost:4000 发送请求。然后，它定义了一个订阅，它订阅 messageAdded 事件。每当新消息添加到实时数据库中时，客户端将收到一个通知。

运行应用程序

最后，您可以运行应用程序。在项目目录中运行以下命令：

node server.js

这个命令将启动 GraphQL 服务器。然后，在另一个终端窗口中运行以下命令：

node client.js

这个命令将启动实时客户端。现在，您可以在 Firebase 控制台中添加新的消息。每当新消息添加到实时数据库中时，客户端将收到一个通知，并将其打印到控制台中。

总结

本文介绍了如何使用 GraphQL 和 Firebase 构建实时 Web 应用程序。您学习了如何创建实时数据库、GraphQL 服务器和实时客户端。这些技术可以帮助您构建更快、更可靠的 Web 应用程序。如果您想深入了解 GraphQL 和 Firebase，请查阅官方文档。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6571a273d2f5e1655da537f3