GraphQL 是一种新兴的 API 开发语言，它为前端开发者提供了更高效、更精细的数据查询和管理方式。与传统 RESTful API 不同，GraphQL 可以根据客户端的需求动态生成返回结果，使得 API 对前端的适配更加灵活、实用。
除此之外，GraphQL 还提供了实时数据更新的功能，这使得我们可以在服务端推送数据变化，从而实现实时更新的效果。本文将介绍如何编写带有实时功能的 GraphQL API，内容详细、有深度和学习以及指导意义。
第一步：引用相关库和包
我们首先需要引用一些必要的库和包，来确保我们能够正常开始我们的 GraphQL API 编写：
const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
const http = require('http');
const pubsub = require('./pubsub');这里的 express 是一个 Node.js 的 Web 框架，用于构建 HTTP 服务器。ApolloServer 则是 Apollo 公司开发的一个用于构建 GraphQL API 的库。http 则是用于封装 WebSocket 的 Node.js 标准库。pubsub 是我们自己编写的用于发布/订阅的库。
第二步：配置 ApolloServer
在配置 ApolloServer 之前，我们需要先定义 GraphQL 的 schema。这里我们将定义一个简单的 schema，包含一个用于获取当前时间的 Query 和一个用于实时更新时间的 Subscription：
-- -------------------- ---- -------
----- -------- - ----
---- ----- -
---- -------
-
---- ------------ -
------ -------
-
--在上述 schema 中，我们定义了一个 Query 类型，包含一个 now 字段，用于获取当前时间。同时我们还定义了一个 Subscription 类型，包含一个 clock 字段，用于实时更新时间。
接下来，我们需要实现这个 schema 的 resolvers。这里我们将通过 setInterval 来每秒推送一次新的时间戳：
-- -------------------- ---- -------
----- --------- - -
------ -
---- -- -- --- ---------------------
--
------------- -
------ -
---------- -- -- -
------ -----------------------------
--
--
--
--
-------------- -- -
---------------------- - ------ --- -------------------- ---
-- ------在上述代码中，我们首先实现了 Query 中的 now 字段，它简单地返回当前时间的 ISO 字符串。接下来我们回到 Subscription 中，在 subscribe 函数中使用 pubsub.asyncIterator 来创建一个用于订阅的迭代器，我们就可以通过这个迭代器实现实时推送数据。
最后一行代码使用 setInterval 来每秒钟推送一次新的时间戳，这样我们就可以在前端实时更新数据了。
第三步：配置 WebSocket
我们已经成功创建了一个带有实时功能的 GraphQL API，但是我们需要使用 WebSocket 来确保能够实时更新数据。
在 Express 中使用 WebSocket 技术需要使用 ws 包，它可以帮助我们创建 WebSocket 服务。这里我们需要在 Express 中使用 http 来创建我们的 HTTP 服务器，并且使用 ws 包来创建我们的 WebSocket 服务：
const app = express();
const server = http.createServer(app);
const ws = new WebSocket.Server({ server });接下来我们需要将我们的 WebSocket 服务绑定到 ApolloServer 的 executeOperation 函数，这样我们就可以在 WebSocket 中推送数据了：
-- -------------------- ---- -------
----- ------------ - --- --------------
---------
----------
-------------- -
---------- ----------------- -- ---- --- --- -- -
-- --------------------
--
------------- --- ---- ---- -- --- -- -
-- -----------
--
----- --------------------------------- -
----- - ------ ---------- ------------- - - ----------------
-- ------------------------------ --- -------- -
------ -----------------------------
-
-- -------- -
----- --- ------------ --- ----------
-
-- ------ ------ -------
----- ------ - ----- ---------
-------
--------- ------
--------------- ----------
------------- ---
--------------
---
------ -------
--
----- ----------------- ---------- -
------ ----- -----------------
---------------------
----------
-----
---- -- -
-------------- -- -- -
-- ---------
---
---------------------------------------------------- --------
-
--
--
--
---在上述代码中，onConnect 和 onDisconnect 分别是在 WebSocket 和前后端建立连接和断开连接时会执行的回调函数。我们在 executeOperation 函数中对于 clock 操作进行了特殊处理，用于实现实时推送数据，对于其他 Query 和 Mutation 操作则继续使用 Apollo 的默认执行函数 execute。
最后，我们将 ws.handleUpgrade 绑定到 ApolloServer 的 subscribe 函数上，这样我们就可以使用 WebSocket 来实现实时数据的推送和更新了。
总结
本文介绍了如何编写带有实时功能的 GraphQL API。我们首先需要引用相关库和包，然后定义 schema 和实现 resolvers，接着配置 WebSocket，最后就可以实现实时数据的推送和更新。这种实时功能可以应用于聊天室、在线游戏等多种应用场景，是前端开发中不可或缺的一项技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64716739968c7c53b0f45595