GraphQL 是一种用于 API 的查询语言，其具有明确定义的类型系统，使得数据查询变得更加高效与可靠。而 Websocket 是一种实现了双向通信的协议，能够在服务器和客户端之间建立长连接，为实时通信提供了更好的能力。在使用 GraphQL 进行实时数据推送时，Websocket 可以成为实现方案之一。本文将介绍如何在 GraphQL 中使用 Websocket 来实现实时通信。
基础知识
在开始使用 Websocket 之前，需要了解一些基础知识：
WebSocket API: Websocket API 是指在 HTML5 中新增的一组 JavaScript API，用于在客户端与服务器之间建立 Websocket 连接。
GraphQL subscriptions: subscriptions 是 GraphQL 操作之一，用于订阅服务器上的实时事件和更新。它们允许客户端接收有关服务器状态更改的推送通知。
Apollo-Client: Apollo-Client 是一个用于连接客户端和 GraphQL 服务器的 JavaScript 库，其中包含许多开箱即用的功能，如查询缓存和 subscriptions。
使用 Apollo-Client
下面我们将使用 Apollo-Client 来订阅服务器上的实时事件。在使用 Apollo-Client 之前，需要先安装它：
npm install apollo-client apollo-link-ws apollo-cache-inmemory subscriptions-transport-ws graphql-tag
客户端配置
在客户端中配置 Apollo-Client 时，需要创建一个 WebSocketLink，并将其添加到 HttpLink 的链中。例如：
-- -------------------- ---- -------
------ -------------- ---- ----------------
------ --------------- ---- -----------------
------ ---------- ---- -------------------
------ --------------- ---- ------------------------
------ ------- ---- --------------
------ ------------------- ---- ------------------
----- -------- - --- ----------
---- -------------------------------
---
----- ------ - --- ---------------
---- ------------------------------ -- ----- ---- ---- ------
-------- -
---------- ----
-
---
----- ---- - ------
--------- -- -
----- ---------- - -------------------------
------ -
--------------- --- --------------------- --
-------------------- --- --------------
--
--
-------
--------
--
----- ------ - --- --------------
-----
------ --- ---------------
---这里在配置 Apollo-Client 时创建了一个分裂链接 split link，用于在订阅操作时切换到 WebsocketLink。需要注意的一点是，WebsocketLink 的 uri 不是使用 HTTP 协议，而是使用 WS 协议。
订阅数据
使用 Apollo-Client 进行订阅时，需要在 gql 中定义订阅类型的操作。例如：
-- -------------------- ---- -------
------ --- ---- -------------
------ -------------- ---- ---------------
----- ------------------------ - ----
------------ ---------- -
---------- -
--
-------
-
-
--
----- ------------------- - -- -- -
-------------
---------------------------------------
---------------------------------------- -- -
----------------------------------
--
-
----------- ------- -- -
-- ------- ------ ----------- ---------------
-- --------- ------ ----------------------
------ ---- ---
--
---------------
--这里定义了一个名为 NEW_MESSAGE_SUBSCRIPTION 的 subscription，并在 Subscription 组件中订阅它。当数据被推送到客户端时，onSubscriptionData 可以接收到新的数据。
服务端配置
在服务端可以使用 Apollo-Server 来支持 GraphQL subscriptions。例如：
-- -------------------- ---- -------
------ - ------------- --- - ---- ----------------
------ - ------ - ---- ------------------------
------ - ------------ - ---- -------
------ - -------- --------- - ---- ----------
------ - ------------------ - ---- -----------------------------
-- ---- ------ ------------
----- ------ - --- ---------
----- ----------------- - --------------------
-- -------- --------
----- -------- - ----
---- ----- -
--------- ----------
-
---- -------- -
------------------ -------------- -------
-
---- ------------ -
----------- -------
-
----- ------------ -
-------- -------
------- -------
-
---- ------- -
--- ---
-------- -------
------- -------
-
--
----- --------- - -
------ -
--------- ----- -- -- - --- -
--
--------- -
------------ ----- --- - ----- -- -- - --- -
--
------------- -
----------- -
---------- -- -- -----------------------------------------
-
-
-
-- -- --------------------- --------- --
----- ------ - ------------------
------------------- -- -- -
------------------- -- ------- -- -------------------------------
--- --------------------
--------
----------
-------
---------- ------------------ ---------- -------- -- -
------------------- ------------ ------------
--
------------- ----------- -------- -- -
------------------- ------------ ---------------
-
-- -
------- -------
----- -----------
---
---
----- ------ - --- --------------
---------
----------
-------------- -
----- -----------
---------- ------------------ ---------- -------- -- -
------------------- ------------ ------------
--
------------- ----------- -------- -- -
------------------- ------------ ---------------
--
--
---这里定义了名为 pubsub 的 PubSub 实例，并通过该实例发布和订阅 NEW_MESSAGE_EVENT 事件。在 Subscriptions 中，将订阅器的 subscribe 函数绑定到事件上，即可实现当事件被发布时，subscriptions 服务等待与之关联的客户端。在服务端使用 SubscriptionServer 添加 Websocket 连接。
结论
使用 Apollo-Client 可以很容易地实现 GraphQL subscriptions。在使用 Websocket 建立连接时，需要注意协议要使用 ws 而非 HTTP。在服务端可以使用 Apollo-Server 来支持 GraphQL subscriptions。通过对相关代码的分析，我们可以更好地使用 Websocket 和 GraphQL 进行实时通信。
参考资料：
GraphQL Subscriptions with Apollo
GraphQL Subscriptions for Real-Time Communication
How to use GraphQL subscriptions with Apollo Client
GraphQL Subscriptions with NodeJS and Apollo Server
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6705c43cd91dce0dc854e39a