在现代 web 应用程序中，实时更新已经成为了一个不可或缺的功能，因为它可以让用户更好地与应用程序交互，并且提高了用户体验。在前端开发中，Fastify 和 GraphQL Yoga 是两个非常流行的工具，它们可以帮助我们实现实时更新功能。在本文中，我们将介绍如何使用 Fastify 和 GraphQL Yoga 进行实时更新，并提供示例代码和指导意义。
Fastify
Fastify 是一个快速和低开销的 web 框架，它可以帮助我们构建高效的 web 应用程序。它是 Node.js 生态系统中最快的 web 框架之一，它具有非常低的内存占用和高性能。使用 Fastify，我们可以轻松地构建快速和可扩展的 web 应用程序。
GraphQL Yoga
GraphQL Yoga 是一个基于 Express 和 GraphQL 的 web 框架，它可以帮助我们构建可扩展的 GraphQL API。它具有非常简单的 API，可以轻松地与其他 Node.js 库集成。使用 GraphQL Yoga，我们可以轻松地构建强大的 GraphQL API，并实现实时更新功能。
实现实时更新
要实现实时更新，我们需要使用 GraphQL subscriptions。GraphQL subscriptions 是一种用于实时更新的特殊类型的 GraphQL 查询。使用 subscriptions，我们可以订阅特定的事件，并在事件发生时接收通知。在本文中，我们将使用 subscriptions 实现实时更新。
步骤 1：安装依赖项
首先，我们需要安装 Fastify 和 GraphQL Yoga 的依赖项。我们可以使用以下命令来安装它们：
npm install fastify fastify-autoload fastify-cors graphql-yoga
步骤 2：创建 GraphQL schema
接下来，我们需要创建一个 GraphQL schema，它将定义我们的数据模型和查询。我们可以使用以下代码创建一个简单的 GraphQL schema：
-- -------------------- ---- -------
----- - --- - - ------------------------
----- -------- - ----
---- ----- -
------ -------
-
---- ------------ -
------ ----
-
--
-------------- - ---------在上面的代码中，我们定义了一个 Query 类型和一个 Subscription 类型。Query 类型定义了一个名为 hello 的查询，它将返回一个字符串。Subscription 类型定义了一个名为 count 的订阅，它将返回一个整数。
步骤 3：创建 GraphQL resolvers
接下来，我们需要创建 GraphQL resolvers，它将处理我们的查询和订阅。我们可以使用以下代码创建一个简单的 GraphQL resolver：
-- -------------------- ---- -------
----- --------- - -
------ -
------ -- -- ------ --------
--
------------- -
------ -
---------- -------- ----- - ------ -- -- -
----- ------- - --------------------------------------- ----
-------------- -- ----------------------- - ------ ------------------------ - ---- --- ------
------ ------------------------------
--
--
--
--
-------------- - ----------在上面的代码中，我们定义了一个 hello 查询的 resolver，它将返回一个字符串。我们还定义了一个 count 订阅的 resolver，它将返回一个随机整数。在 count 订阅的 resolver 中，我们使用 pubsub 对象发布和订阅事件。我们使用 setInterval 函数每秒发布一个新的随机整数。
步骤 4：创建 Fastify 应用程序
接下来，我们需要创建一个 Fastify 应用程序，它将使用 GraphQL Yoga 中间件来处理 GraphQL 请求。我们可以使用以下代码创建一个 Fastify 应用程序：
-- -------------------- ---- -------
----- ------- - -------------------- ------- ---- ---
----- - ------ - - ------------------------
----- -------- - --------------------
----- --------- - -----------------------
----- ------ - --- ---------
----------------------------------------- ----
--------------------------------------------- -
---- ------------
---
---------------------------------------- -
------- ---------
----------
--------- -----
-------- - ------ --
---
----- ----- - ----- -- -- -
--- -
----- ---------------------
------------------------ --------- -- -----------------------------------
- ----- ----- -
-----------------------
----------------
-
--
--------在上面的代码中，我们创建了一个 Fastify 应用程序，并注册了 fastify-cors 和 fastify-autoload 插件。我们还注册了 fastify-gql 插件，它将使用我们的 GraphQL schema 和 resolvers 处理 GraphQL 请求。我们将 pubsub 对象传递给 context 对象，以便我们可以在 resolvers 中使用它。
步骤 5：启动应用程序
最后，我们需要启动我们的应用程序。我们可以使用以下命令来启动它：
node index.js
现在，我们已经成功地创建了一个实现实时更新的 web 应用程序。我们可以使用以下代码测试它：
-- -------------------- ---- -------
----- - ------------------ - - --------------------------------------
----- - -------- --------- - - -------------------
----- ----- - ----------------------
----- ------ - --- ------------------------------------------------- -
---------- -----
---
----- ----- - -
------------ -
-----
-
--
----- --------- - -
------
---------- ---
--
----------------- ----------------------
----- ------ -- ------------------
------ ------- -- -------------------
--------- -- -- --------------------
---在上面的代码中，我们使用 subscriptions-transport-ws 库创建了一个 WebSocket 客户端，以便我们可以订阅 count 事件。我们使用 graphql 库执行我们的查询，并使用 node-fetch 库将其发送到服务器。我们将查询作为参数传递给 subscribe 函数，并在每次接收到数据时打印它。
结论
在本文中，我们介绍了如何使用 Fastify 和 GraphQL Yoga 实现实时更新功能。我们使用 GraphQL subscriptions 订阅了 count 事件，并在每次事件发生时接收通知。我们还提供了示例代码和指导意义，以帮助您更好地了解如何实现实时更新功能。现在，您可以使用这些工具来构建快速和可扩展的 web 应用程序，并实现实时更新功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6743cdd2f3dd65303298b80f