介绍
GraphQL 是一种新兴的 API 建模语言，具有强大的数据查询和变异语法。而 Subscriptions 是 GraphQL 中的一项重要功能，使用它我们可以实现实时消息的推送，让前端应用更加灵活、响应更加及时，给用户带来更好的体验。
在本文中，我们将详细地探讨如何使用 Subscriptions 在 GraphQL 中实现消息推送。我们会从基本概念和定义开始，逐步介绍 Subscriptions 消息推送的原理和实现，最后给出一个完整的示例代码。
什么是 Subscriptions
Subscriptions 是 GraphQL 中的一种特殊类型，它与查询和变异（Mutations）一起构成了 GraphQL 的三大操作类型。Subscriptions 用于在服务器端与客户端之间建立一个 WebSocket 长连接，从而实现实时消息的推送。
我们可以通过定义一个 Subscription 类型来告诉 GraphQL 服务器，哪些数据应该被订阅并定期推送到客户端。一旦客户端建立了订阅，服务器就可以在数据更新的时候自动向客户端推送最新的数据。
在 GraphQL 中，订阅（Subscription）是一种特殊的查询（Query），因此它的查询语法和普通查询的语法基本一致。但是为了实现实时推送，订阅中通常也会包含一些特殊的字段和参数。
Subscriptions 原理和实现
Subscriptions 的原理是非常简单的，就是通过 WebSocket 建立一条长连接，在服务端有数据更新时，即时通知客户端。
在实现 Subscriptions 的时候，通常分为以下几步：
在后端实现 GraphQL 服务，并引入 WebSocket 的相关库。
在 GraphQL Schema 中定义 Subscription 类型，包含需要订阅的数据类型和字段。
在服务器上实现 Subscription 的解析器函数，用来生成订阅的数据，并通过 WebSocket 推送到客户端。
在前端使用 GraphQL 客户端建立 WebSocket 连接，并订阅相关的 Subscription。
在客户端实现处理推送数据的回调函数，在接收到推送数据时更新应用程序状态。
示例代码
下面是一个简单的示例代码，演示了如何在 GraphQL 中实现 Subscriptions。
后端代码
-- -------------------- ---- -------
----- - ------------- ---- ------ - - -------------------------
----- ------ - --- ---------
----- -------- - ----
---- ----- -
------ ------
-
---- ------------ -
--------- ------
-
--
----- --------- - -
------ -
------ -- -- ------ -------
--
------------- -
--------- -
---------- -- -- ----------------------------------
-
-
--
----- ------ - --- --------------
---------
----------
-------------- -
---------- -- -- ------------------- --------- -- ------------
------------- -- -- ------------------- ------------ ---- -----------
-
---
----------------------- ---- ---------------- -- -- -
--------------- ------ ----- -- ---------
--------------- ------------- ----- -- ----------------------
---
-------------- -- -
----- -------- - ------ -- ----- -----------------------
-------------------------- - -------- ---
-- ------上面的代码实现了一个简单的 GraphQL 服务，其中包含一个 Query 类型和一个 Subscription 类型。在 Subscription 中，我们定义了一个名为 greeting 的字段，并在解析器函数中使用 PubSub 来发布和订阅消息。服务器还设置了一个计时器，每秒钟向 pubsub.publish 发布一次 GREETING 消息。
前端代码
-- -------------------- ---- -------
------ - ---- --------------- - ---- -----------------
------ - ------------- - ---- -------------------------
------ - ----------------- - ---- ---------------------------
------ - ----- - ---- -----------------
----- ----------- - ------------------------------
----- ------ - --- ---------------
---- ------------
-------- -
---------- ----
-
---
----- --------- - ------
-- ----- -- -- -
----- ---------- - -------------------------
------ --------------- --- --------------------- -- -------------------- --- ---------------
--
-------
--------
--
----- ----------------- - ----
------------ -
--------
-
--
-------- ---------- -
----- - ---- - - -----------------------------------
------ ----------------------------
-
-------- ----- -
------ -
---- ----------------
--------- --
------
--
-
------ ------- ----上面的代码实现了一个简单的 React 应用程序，它使用 @apollo/client 客户端库来建立 WebSocket 连接和订阅。在 App 组件中，使用 useSubscription 订阅了一个名为 greeting 的 Subscription 字段，并在 Greeting 组件中展示了实时推送的 greeting 值。
结论
本文详细介绍了在 GraphQL 中使用 Subscriptions 实现消息推送的方法和原理，希望能给读者提供一定的指导和帮助。Subscriptions 提供了一种完全不同的方式来组织应用程序，并且有着强大的实时性和扩展性，可以为我们的应用程序带来更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675256ac8bd460d3ad930732