GraphQL Subscriptions 是一种实时的数据交互方式，它用于在客户端和服务器之间建立长时间的连接，以便实现双向实时通信。这种方式适用于需要频繁更新数据的应用程序，例如聊天应用、实时博客等。
在本文中，我们将介绍如何使用 Apollo Server 和 Subscriptions-Transport-Ws 来实现 GraphQL Subscriptions，包括配置服务器和客户端，定义订阅和发布事件，以及实现实时交互功能。
安装和配置
为了使用 Apollo Server 和 Subscriptions-Transport-Ws，我们需要先安装这两个包：
npm install apollo-server graphql subscriptions-transport-ws
接下来，我们将创建一个名为 server.js 的服务器文件，并添加以下代码：
-- -------------------- ---- -------
----- - ------------ - - -------------------------
----- - -------- --------- - - -------------------
----- - ------------------ - - --------------------------------------
----- -------- - --------------------
----- --------- - -----------------------
----- ------ - --- --------------
---------
----------
-------------- -
---------- ------------------ ---------- -------- -- -
------------------- ------------
--
------------- ----------- -------- -- -
------------------- ---------------
--
--
---
----------------------- ---- ---------------- -- -- -
--------------- ------ ----- -- ---------
--------------- ------------- ----- -- ----------------------
--------------------------
-
------- --------------
--------
----------
---------- ------------------ ---------- -------- -- -
------------------- --------- -- ---------------
--
------------- ----------- -------- -- -
------------------- ------------ ---- ---------------
--
--
-
------- --------------
----- -------------------------
-
--
---在上述代码中，我们创建了一个 ApolloServer 实例并将其传递给 SubscriptionServer。我们还定义了一些 onConnect 和 onDisconnect 回调函数来处理客户端的连接和断开连接事件。
此外，我们还需要为服务器定义一个模式和解析器。这些应该存储在单独的文件中，例如 schema.js 和 resolvers.js。这里仅提供示例代码：
-- -------------------- ---- -------
-- ---------
----- - --- - - -------------------------
----- -------- - ----
---- ---- -
--- ---
------ -------
-------- -------
-
---- ----- -
------ --------
-
---- -------- -
-------------- -------- -------- --------- -----
-
---- ------------ -
---------- -----
-
--
-------------- - ---------
-- ------------
----- ----- - ---
----- --------- - -
------ -
------ -- -- ------
--
--------- -
-------- --- - ------ ------- -- -- -
----- ---- - - --- ------------ - -- ------ ------- --
-----------------
------ -----
--
--
------------- -
---------- -
---------- -- -- -----------------------------------
--
--
--
-------------- - ----------在这个模式中，我们定义了一个名为 postAdded 的订阅事件，用于在添加新帖子时更新客户端。每当添加新帖子时，服务器将触发订阅事件。
请注意，在 resolvers.js 文件中，我们导出了所有的解析器函数，以便通过服务器引入。
编写客户端
在服务器设置好后，我们可以创建一个简单的客户端来测试我们的 GraphQL Subscriptions 是否能正常工作。我们可以将其存储在名为 client.js 的文件中。这里的示例代码：
-- -------------------- ---- -------
----- --------- - --------------
----- - ------------------ - - --------------------------------------
----- --- - -----------------------
----- ------------------ - --- ------------------------------------------------- -
---------- -----
---
--------------------------------- -- -
---------------------- -- ---------
---
----------------------------------- -- -
------------------------ -- ---------
---
------------------------------------ -- -
------------------------- ---- ---------
---
----- ------------ - ----
------------ ------------ -
--------- -
--
-----
-------
-
-
--
---------------------------- ------ ------------ --------------
---------- -
---------------------------------
--
---------- -
-------------------
--
---在上述代码中，我们将向服务器发起 WebSocket 连接，并定义一组 onConnected、onReconnected 和 onDisconnected 回调函数来处理连接和断开连接事件。
此外，我们还定义了一个名为 onPostUpdate 的订阅事件，用于订阅新帖子。每当服务器触发一个新的 postAdded 事件时，客户端将收到更新的数据。
运行
通过运行以下命令，我们可以将服务器和客户端连接到一起：
node server.js node client.js
接下来，我们可以通过向服务器发送一个添加帖子的 graphql 查询来测试我们的订阅功能是否正常工作：
mutation {
addPost(title: "GraphQL Subscriptions", content: "Testing subscriptions") {
id
}
}如上，我们添加了一个新帖子，服务器将触发 postAdded 事件并更新连接的所有订阅客户端。我们在客户端控制台中看到更新的数据。
总结
在本文中，我们介绍了如何使用 Apollo Server 和 Subscriptions-Transport-Ws 构建 GraphQL Subscriptions，其中包括服务器和客户端的设置和配置、事件订阅和发布的定义，以及一个简单的测试客户端。
GraphQL Subscriptions 使用起来很容易，并且可以使你的应用程序变得非常高效和实时。在实现一些实时数据更新的应用时，值得我们去学习和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f84b0df6b2d6eab3069a9d