GraphQL 是一种用于构建 API 的查询语言，它可以通过单个请求获取多个资源，并且可以根据客户端的需求灵活地返回数据。在 GraphQL 应用中，Subscriptions 是一种强大的实时数据推送机制，可以让客户端实时获取数据更新，而不必轮询服务器。
在本文中，我们将介绍如何在 GraphQL 应用中使用 Subscriptions，包括如何定义和使用 Subscriptions，以及如何在客户端和服务器端实现实时数据推送。
Subscriptions 的定义和使用
Subscriptions 是一种 GraphQL 查询类型，它允许客户端订阅服务器端的实时数据更新。与查询和变异不同，Subscriptions 是一种持久连接，可以在客户端和服务器端之间保持打开状态，以便在数据更新时立即推送数据。
定义 Subscriptions 的语法与定义查询和变异的语法类似，例如：
subscription {
newPost {
id
title
content
}
}这个 Subscriptions 查询将订阅服务器端的 newPost 事件，并在每次新的帖子发布时返回帖子的 id、title 和 content。
在客户端中，可以使用 subscribe 函数来订阅 Subscriptions，例如：
-- -------------------- ---- -------
----- ------------ - ----
------------ -
------- -
--
-----
-------
-
-
--
----- -------- - ------------------ ------ ------------ ---
--------------------
---------- -
------------------
--
------------ -
---------------------
-
---在这个示例中，我们使用 gql 函数定义了 Subscriptions 查询，并使用 client.subscribe 函数订阅了这个查询。然后，我们使用 observer.subscribe 函数来监听数据更新，并在每次更新时打印数据到控制台。
实现实时数据推送
在 GraphQL 应用中，实现实时数据推送需要在服务器端和客户端之间建立 WebSocket 连接，并在数据更新时使用 WebSocket 推送数据。
在服务器端，可以使用 GraphQL Subscriptions 库来实现 Subscriptions 功能。例如，以下是一个使用 GraphQL Subscriptions 实现实时数据推送的示例：
-- -------------------- ---- -------
----- - ------------- ------ - - -------------------------
----- - ----------------- - - -------------------
----- - ---- - - ----------------------------
----- ------ - --- ---------
----- -------- - -----------
----- -------- - -
------ ----
---- ---- -
--- ---
------ -------
-------- -------
---------- -----
-
---- ----- -
--------- --------
-
---- -------- -
----------------- -------- -------- --------- -----
-
---- ------------ -
-------- -----
-
--
----- --------- - -
----- --- -------------------
----- -------
------------ ----- ------ ------ ------
----------------- -
------ --- ------------
--
---------------- -
------ ----------------
--
----------------- -
-- --------- --- --------- -
------ ------------------- ----
-
------ -----
-
---
------ -
---------- -
-- ------ --- -----
-
--
--------- -
------------- - ------ ------- -- -
----- ---- - - --- ---- ------ -------- ---------- --- ------ --
------------------------ - -------- ---- ---
------ -----
-
--
------------- -
-------- -
---------- -- -- --------------------------------
-
-
--
----- ------ - --- --------------
---------
----------
-------------- -
----- ----------------
-
---
----------------------- ---- ---------------- -- -- -
------------------- ----- -- ---------
-------------------------- ----- -- ----------------------
---在这个示例中，我们使用 PubSub 类来创建一个实例，然后定义了一个 NEW_POST 常量来表示新帖子事件。然后，我们定义了一个 Subscription 类型的 Subscriptions，它将订阅 newPost 事件，并在每次新的帖子发布时返回帖子对象。在 Mutation 类型的 createPost 操作中，我们在发布新帖子时使用 pubsub.publish 函数将数据推送到客户端。
在客户端中，我们需要使用 WebSocket 来建立连接，并在数据更新时使用 WebSocket 推送数据。以下是一个使用 Apollo Client 和 WebSocket 实现实时数据推送的示例：
-- -------------------- ---- -------
------ - ------------- -------------- ---- ----- - ---- -----------------
------ - ------------- - ---- -------------------------
------ - ----------------- - ---- ---------------------------
----- ------ - --- ---------------
---- ------------------------------------
-------- -
---------- ----
-
---
----- -------- - ----------------
---- -------------------------------
---
----- --------- - ------
-- ----- -- -- -
----- ---------- - -------------------------
------ --------------- --- --------------------- -- -------------------- --- ---------------
--
-------
--------
--
----- ------ - --- --------------
----- ----------
------ --- ---------------
---
----- ------------ - ----
------------ -
------- -
--
-----
-------
-
-
--
----- -------- - ------------------ ------ ------------ ---
--------------------
---------- -
------------------
--
------------ -
---------------------
-
---在这个示例中，我们使用 WebSocketLink 类创建一个 WebSocket 连接，然后使用 split 函数将 HTTP 和 WebSocket 连接分离。在订阅 Subscriptions 时，我们使用 client.subscribe 函数订阅 Subscriptions 查询，并在每次更新时打印数据到控制台。
总结
在本文中，我们介绍了如何在 GraphQL 应用中使用 Subscriptions，包括如何定义和使用 Subscriptions，以及如何在客户端和服务器端实现实时数据推送。通过使用 Subscriptions，我们可以让客户端实时获取数据更新，提高应用的实时性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65754bbcd2f5e1655de74526