随着现代 web 应用程序的复杂性和需求的增加，更多的应用程序开始使用实时通信解决方案。GraphQL 是一种非常流行的数据查询和操作语言，而 Socket.IO 是一种实时通信解决方案，因此这两种技术的结合可以带来非常强大的实时数据传输解决方案。
在本文中，我们将介绍 npm 包 graphql-socketio-subscriptions-transport，它是一个基于 GraphQL 和 Socket.IO 的实时订阅传输解决方案。它提供了一种简单而强大的方式来实现 GraphQL 实时订阅功能，允许客户端从服务器端接收实时更新。
环境准备
在使用 graphql-socketio-subscriptions-transport 之前，请确保你的环境已经具备以下条件：
- Node.js 6.0 或更高版本
- npm 3.0 或更高版本
- 一个支持 Socket.IO 和 GraphQL 的后端服务
安装
在开始之前，我们需要先安装和使用 graphql-socketio-subscriptions-transport。你可以使用以下命令来安装它：
npm install graphql-socketio-subscriptions-transport
使用方法
首先，你需要在你的后端服务中配置 Socket.IO 和 GraphQL。下面是一个使用 Express.js 和 GraphQL 的示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- - ----------- - - ---------------------------
----- - -------------------- - - ---------------------------------
----- - ------------------ - - ---------------------------------
----- - ------ - - ----------------
----- - -------- --------- - - -------------------
----- - ------------ - - ----------------
----- - -------------------- - - ---------------------------------
----- - ---------------------------- - - ----------------------------------------------------
----- -------- - -
---- ----- -
------ ------
-
---- ------------ -
------ ------
-
--
----- --------- - -
------ -
------ -- -- ------ --------
--
------------- -
------ -
---------- -------- ----- -------- -- -
-------------- -- -
------------------------------- --- -------------------
-- ------
------ --------------------------------------
--
--
--
--
----- ------ - ---------------------- --------- --------- ---
----- --- - ----------
----- ------ - ------------------
--------
-----------
-------------
-------
--------- -----
---
--
------------------- -- -- -
------------------- ----------
---
----- -------- - --- ---------
--------------------- -- -- -
---------------------- ------ ------- -- ---- -------
---
----- ------------------ - --------------------------
-
-------
--------
----------
--
-
------- ---------
----- -----------------
--
--
--------------------------------------------- ------ ----
-----------------------
------------------------------
-------
---------
----- -----------------
---
--在上面示例中，我们使用了 Express.js 和 GraphQL 来创建了一个简单的后端服务，其中包含了一个查询 hello 和一个订阅 timer。你需要执行 npm install express express-graphql @graphql-tools/schema graphql-subscriptions graphql-socketio-subscriptions-transport 来安装所需的依赖。
接下来，我们需要创建一个客户端，这个客户端将连接到我们的后端服务，并接收实时数据更新。
创建客户端的代码如下：
-- -------------------- ---- -------
------ -- ---- -------------------
------ - ------------------ - ---- -----------------------------
----- ------ - ----------------------------
----- -------- - --- ------------------------------------------------------- -
---------- -----
---
-------------------- -- -- -
-------------------------
---
----------------------- -- -- -
----------------------------
---
------------------------ -- -- -
---------------------- ------ ------------
---
--------------------------- -- -- -
---------------------- ------ ---------------
---
----- ---------------------- - -
---------
--
----- ------ - -
---- ----- -
------ ------
-
---- ------------ -
------ ------
-
--
------ ------- -------
------ - ----------------------- ------ --在上面的代码中，我们创建了一个 Socket.IO 和一个 SubscriptionClient，然后创建一个 subscriptionsTransport 对象，将其传递给 Apollo 的 SubscriptionClient 驱动程序来处理实时订阅。在这里，我们导出了 GraphQL 客户端将使用的 schema 和 subscriptionsTransport 对象。
接下来，我们可以使用 Apollo Client 来创建一个 GraphqlProvider，并使用创建的客户端进行实时订阅。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- -----------------
------ - ------------------ - ---- -----------------------------
------ ------- - ----------------------- ------ - ---- -----------
------ - -------------- - ---- -------------------
----- -------- - --- ------------------------------------------------------- -
---------- -----
---
----- ------ - --- --------------
---- --------------------------------
------ --- ----------------
--------------- -
----------- -
------------ --------------------
--
------ -
------------ --------------------
--
--
-------------- -----------------------
---
------ ----- --- - -- -- -
------ -
--------------- ----------------
--------------- --
-----------------
--
--
------ - --------- ------ --在上面的代码中，我们创建了一个 Apollo Client，并使用 subscriptionsTransport 对象进行实时订阅。在这里，我们导出了 WebSocket 和 Socket.IO 客户端，以便在其他组件中调用。
最后，我们可以在我们的组件中使用 graphql-hooks 实现实时订阅。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- - ---- ----------------
------ - -------- - ---- --------
----- ------------------ - -
------------ -
-----
-
--
------ ----- -------------- - -- -- -
----- - ----- ------- - - ----------------------------------- - ------- -------- ---
-- -------- -- ------ -
------ ----------------------
-
------ ------------------------
--在上面的代码中，我们使用 useSubscription 钩子来实现实时订阅。我们还指定了我们先前创建的 WebSocket 客户端作为客户端选项。
至此，我们已经完成了使用 graphql-socketio-subscriptions-transport 的实时订阅功能。
结论
graphql-socketio-subscriptions-transport 是一个非常有用的工具，可以帮助我们轻松并快速地实现 GraphQL 的实时订阅功能。它的安装和使用也非常简单，让我们可以更专注地关注应用程序的核心业务逻辑。
希望这篇文章能够为你带来帮助，并指导你如何使用 graphql-socketio-subscriptions-transport 来实现实时订阅功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664481e8991b448e2561