随着互联网技术的不断发展，有越来越多的 Web 应用采用“实时”交互的方式来提升用户体验。GraphQL 的 subscriptions 功能便是为了满足这样的需求而生的。本文将介绍 GraphQL 的 subscriptions 功能及其实现方法，以及如何运用它来实现实时数据交互。
GraphQL 的 subscriptions 功能
GraphQL 的 subscriptions 功能能够让客户端订阅服务器的特定事件，并在事件发生时实时地接收到相关数据。这种实时数据交互方式相比传统的轮询方式更加高效和可靠。具体来说，GraphQL 的 subscriptions 可以支持多种事件类型，如新增、删除与更新等。例如，对于一个聊天应用，当有新的消息产生时，客户端可以通过 subscriptions 功能来获取新消息的内容并实时展示给用户。
GraphQL subscriptions 的实现
GraphQL 的 subscriptions 功能是通过 WebSocket 协议来实现的。客户端在订阅需要的事件之后，会与服务器建立 WebSocket 连接，并持续监听服务器端的事件。当服务器端有相关事件产生时，它会将数据推送给客户端，客户端在接收到数据后可以根据需要进行处理。同时，客户端可以随时发送取消订阅的请求来终止当前的订阅。
下面是一个基于 GraphQL subscriptions 功能的简单实现，该实现基于 Node.js 平台，并使用了 graphql-yoga 作为服务器解决方案：
-- -------------------- ---- -------
----- - -------------- ------ - - ------------------------
-- -- ------ ------------
----- ------ - --- ---------
-- -- ------- ------
----- -------- - -
---- ----- -
------ ------
-
---- -------- -
---------------------- ---- -------- --------- ------
-
---- ------------ -
--------------------- ----- ------
-
--
-- -- ---------
----- --------- - -
------ -
------ -- -- ------ -------
--
--------- -
------------ -------- ----- -------- ----- -- -
-- ----------- --------- ----
-------------------------- ------------------- --------------
-
--
------------- -
----------- -
-- ---------
---------- -------- ----- -------- ----- -- -
------ -------------------------------- --------------------
-
-
-
--
-- -- ------- ---
----- ------ - --- ---------------
---------
----------
---
-- -----
----- ------- - -
----- -----
--------- -----------
-------------- -----------------
----------- --------------
--
--------------------- -- ---- -- -- ------------------- -- ------- -- ----------------------------代码中定义了一个简单的 GraphQL schema，包含了 Query、Mutation 和 Subscription 三个类型。其中，Mutation 类型定义了一个 sendMessage 的方法，用于发送聊天消息。Subscription 类型定义了 newMessage 事件，并通过 subscribe 方法进行订阅。当 sendMessage 方法发送了新的聊天消息时，相应的订阅者就会收到这条消息，并进行相应的处理。
如何运用 GraphQL subscriptions 实现实时数据交互
利用 GraphQL subscriptions 实现实时数据交互非常简单，只需要遵循以下几个步骤：
- 在后端实现 subscriptions 功能，包括定义相应的 GraphQL schema、创建 PubSub 实例、定义相应的 trigger 函数等。
- 在前端实现 WebSocket 的连接与订阅功能，当需要订阅某个事件时，向后端发送 Subscription 操作。
- 接收后端推送的数据，并进行相应的展示和处理。
下面是一个简单的示例代码，用于演示如何利用 GraphQL subscriptions 实现实时数据交互：
-- -------------------- ---- -------
------ - ------------------ - ---- -----------------------------
------ - --- - ---- ---------------
------ ------------ ---- ----------------
------ - ------------- - ---- ------------------------
-- -- ------------------ ----- --------- --
----- -------- - --- ------------------------------------------------------- - ---------- ---- ---
-- -- ------------ --
----- ------ - --- --------------
----- ---------
------ --- ----------------
---
-- ------
----- ------------ - ----
------------ ---------------------- ---- -
--------------------- -----------
-
--
-- ----
----- --- - ------------------ ------ ------------- ---------- - ---------- ----- - --------------
----- -- ---- -- -- -
-----------------------------
-- ---------------
-
---代码中首先创建了一个 SubscriptionClient 实例，该实例会与后端建立 WebSocket 连接。接着，创建了一个 ApolloClient 实例，并使用 SubscriptionClient 实例作为了其 link。最后，通过调用 ApolloClient 的 subscribe 方法进行订阅操作，并在相应事件产生时进行相应的操作。
总结
GraphQL 的 subscriptions 功能为实时数据交互提供了一种高效可靠的实现方式，同时也非常容易上手。我们可以通过 WebSocket 协议建立客户端与服务器的实时连接，并通过 GraphQL schema 以及相应的 trigger 函数实现订阅和推送消息。同时，在前端我们可以利用 ApolloClient 等 GraphQL 客户端库快速实现 WebSocket 的连接与订阅功能，从而实现实时数据交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e69dd3f6b2d6eab31fa342