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 的文件，然后添加以下代码：
-- -------------------- ---- -------
----- - ------------- --- - - -------------------------
----- ----- - --------------------------
---------------------
----------- --------------------------------------
------------ -----------------------------------------
---
----- -------- - ----
---- ------- -
--- ---
----- -------
-
---- ----- -
--------- -----------
-
---- -------- -
---------------- --------- --------
-
---- ------------ -
------------- --------
-
--
----- --------- - -
------ -
--------- ----- -- -- -
----- -------- - ----- -----------------------------------------------
------ ---------------------------- -- ----
--
--
--------- -
----------- ----- --- - ---- -- -- -
----- --- - ----------------------------------------
----- ------- - - --- -------- ---- --
----- -----------------
------ --------
--
--
------------- -
------------- -
---------- -- -- -
----- ------- - --- -----------------------------
------ -
----- -- --
--- --------------- -- -
----------------- - ----- -- --------------------
---
--
--
--
--
--
----- ------ - --- --------------
---------
----------
---
----------------------- --- -- -- -
--------------- ------ ----- -- ---------
---这个文件定义了一个 Message 类型，它有一个 id 和一个 text 属性。Query 类型定义了 messages 查询，它返回所有的消息。Mutation 类型定义了 addMessage 操作，它可以添加新的消息。Subscription 类型定义了 messageAdded 订阅，它可以订阅新的消息。
在 resolvers 对象中，您可以定义每个类型的解析器。messages 查询的解析器从实时数据库中获取所有消息。addMessage 操作的解析器将新消息添加到实时数据库中。messageAdded 订阅的解析器使用 BroadcastChannel API 来订阅新消息。
最后，您可以创建一个 Apollo Server 实例并将其启动。
创建实时客户端
接下来，您需要创建一个实时客户端。您可以使用 Apollo Client 来创建实时客户端。在项目目录中创建一个名为 client.js 的文件，然后添加以下代码：
-- -------------------- ---- -------
------ - ------------- -------------- --- - ---- -----------------
----- ------ - --- --------------
---- ------------------------
------ --- ----------------
---
----- ----- - ----
------------ -
------------ -
--
----
-
-
--
------------------ ----- --------------
----- ---- -- ------------------
---这个文件创建了一个 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