GraphQL 和 RESTful API 相比，其优势之一便是支持实时的数据推送。这是通过 GraphQL subscription 实现的。本文将带你了解 GraphQL subscription 的原理以及如何使用它。
Subscription 的原理
GraphQL subscription 可以让客户端实时地接收到一个事件的所有更新。这就意味着客户端可以在不断开连接的情况下接收到服务器端发送的消息。所有这些都是通过 WebSockets 协议实现的。
在传统的 RESTful API 中，数据的获取随时都是通过 HTTP 请求发起的。但是这种方式的缺点是客户端需要不断地发起请求，这不仅增加了服务器的负载，而且也浪费了带宽和数据资源。
GraphQL subscription 则不同，它会在客户端和服务器之间建立一个长时间的连接，这样服务器就可以在有新数据时主动将其推送给客户端。由于是双工的连接，因此服务器也可以向客户端询问数据。这就提高了应用程序的效率，节省了服务器资源，并降低了时间延迟。
订阅示例
接下来将演示一个简单的订阅功能。假设我们要实时获取一个商品的价格变化。在我们的服务器中，我们有一个查询返回该商品的最新价格，然后我们可以使用 subscription 实时通知客户端有关数据的变化。
首先，我们需要引用 graphql-subscription 库，它是一个轻量级的库，用于管理服务器和客户端之间的 WebSockets 连接。启动一个 websocket 服务器并将其封装在 GraphQL API 中，可以使用如下代码：
-- -------------------- ---- -------
------ ------- ---- ----------
------ - ------------ - ---- -------
------ - ------------------ - ---- -----------------------------
------ - -------- --------- - ---- ----------
------ - -------------------- - ---- ----------------
----- --- - ----------
--- ------------ - ---
----- -------- - -
---- ----- -
------ ------
-
---- ------------ -
--------- ------
-
------ -
------ -----
------------- ------------
-
--
----- --------- - -
------ -
------ -- -- -------------
--
------------- -
--------- -
---------- -------- ----- ---- ----- -- -
------ --------------------------
--
--
--
--
----- ------ - ----------------------
---------
----------
---
----- ------------- - ------------------
--------------------------
-
-------
--------
----------
--
-
------- --------------
----- -----------
-
--
-------------------------- -- -- -
-------------------- ------ -- --- ------- -- --------------------------------
---
-------------- -- -
------------ - ------------- - ----
-- ------在这个例子中，我们创建了一个 Schema，其中包含了一个查询操作 price 和一个订阅操作 newPrice。订阅操作会监听我们的 asyncIterator('newPrice')，asyncIterator 函数随着我们向数据源推送新数据而产生变化。
下面是客户端代码，它使用 apollo-client 和 subscriptions-transport-ws 库，并使用 React 作为视图层。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------------ - ---- -----------------------------
------ - -------------- - ---- ----------------------
------ - ------------ - ---- ----------------
------ - ------------- - ---- ------------------------
------ - -------- - ---- -------------------
------ - ------------- - ---- -----------------
------ - ----- - ---- --------------
------ - ----------------- - ---- -------------------
------ - --- - ---- ---------------
----- ---------------- - ------------------------------
----- -------- - --- ----------
---- --------------------------------
---
----- ------ - --- --------------
--- ------------------------------------ -
---------- -----
--
--
----- ---- - ------
-- ----- -- -- -
----- - ----- --------- - - -------------------------
------ ---- --- --------------------- -- --------- --- ---------------
--
-------
--------
--
----- ------ - --- --------------
------ --- ----------------
-----
---
----- ---------------------- - ----
------------ -------- -
--------
-
--
-------- ----- -
----- ------- --------- - --------------------
----- - -------- ------ ---- - - ----------------------------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
-----
---------- --------------------
------
--
-
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--在客户端代码中，我们使用 apollo-client 和 subscriptions-transport-ws 库来建立与服务器之间的连接。我们也创建了一个包含了订阅操作 newPrice 的 GraphQL 查询语句。随后，我们在组件中调用 useSubscription hook 实现对订阅数据的自动更新。最后，我们渲染价格的变化。
总结
GraphQL subscription 让实时的数据更新变得容易。以简单的方式设置一个 subscription 只需要一些配置即可，不需要额外的代码。
WebSockets 不仅适用于实时的页面更新，它们也为输入/输出的应用程序提供了强大的基础设施和更好的性能。
通过理解 GraphQL subscription 的原理以及如何使用它，我们可以极大地提高应用程序的效率，减少服务器资源的浪费。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3cab448841e98940308ca