在现代 Web 应用程序中，实时数据更新变得越来越重要。GraphQL 已成为使用实时数据的流行选择。但是，它最初使用 HTTP 协议进行数据传输，这意味着客户端应用程序必须经常轮询服务器以获取最新数据。
为了解决这个问题，GraphQL 社区引入了 WebSocket 协议。WebSocket 协议允许客户端应用程序实时获取有关更新的信息。
在这篇文章中，我们将学习如何使用 WebSocket 实现 GraphQL 中的实时更新。
WebSocket 和 GraphQL
WebSocket 是一个支持双向通信的协议，允许客户端和服务器之间实时地推送数据。GraphQL 架构允许我们定义以特定格式（即 schema）表示的类型和查询。
实时更新基于订阅和发布机制，它通过监听指定事件的方式获取信息更新。因此，将 GraphQL 和 WebSocket 结合使用时，我们必须使用订阅/发布机制来预测应该如何更新数据。
在 GraphQL 中实现订阅操作
使用 WebSocket 时，GraphQL 提供了一个 Subscription 类型。 Subscription 类型允许我们定义订阅的事件并定义客户端需要监听的事件。下面是一个示例 Subscription。
type Subscription {
newPost: Post!
}此 Subscription 定义了一个新邮件事件，当每个新邮件创建时触发此事件。
我们需要添加一个事件触发器，以在服务器接收到一个新邮件时触发“newPost”事件。以下是定义事件触发器的示例。
-- -------------------- ---- -------
----- ---------------- - ----------
----- ------ - --- ---------
----- --------- - -
------------- -
-------- -
---------- -- -- ---------------------------------------
--
--
--
-- ---------
----- ---------- - ----- ------ -- -
----- ------- - ----- ------------------
-------------------------------- - ------- ---
------ --------
-在上面的代码中，我们在 createPost 函数中定义了事件触发器。使用 PubSub 库对此进行实现。
在事件触发器中，我们聚合了订阅（通道）及其要监听的事件并将其添加到 pubsub 的 asyncIterator 中。
在 createPost 函数中，我们将新邮件发布到频道（NEW_POST_CHANNEL），从而触发事件。
现在，我们可以将这些代码组合在一起，从而在 GraphQL 中使用 WebSocket 实现实时更新。
GraphQL 和 WebSocket 实时更新的一个完整示例
以下是一个用 WebSocket 实现 GraphQL 实时更新的示例。该示例使用 Apollo GraphQL 服务器和客户端以及 GraphQL Yoga。
在服务器端，我们首先准备好使用 WebSocket 进行实时更新所需的应用程序。
-- -------------------- ---- -------
----- - ------------ - - ---------------------------------
----- - ------ - - ---------------------------------
----- - ------------ - - ----------------
----- - -------- --------- - - -------------------
----- ------- - -------------------
----- ---- - ----------------
----- ------ - --------------------
----- ------ - --- ---------
----- ---- - -----
----- -------- ------------- -
----- ------------ - --- --------------
-------
-------- -- ---- --- -- -- -- ---- ---- ------ ---
---
----- ---------------------
----- --- - ----------
----------------
------------------------------ ---- ----- ---------- ---
----- ------ - ------------------
-------------------------------------------------
------------------- -- -- -
-------------------- ------ -- --- ------- -- -----------------------------------
---
-
--------------在客户端，我们使用 Apollo, React 和 Subscription-transport-ws 来设置 WebSocket。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -------------- -------------- - ---- -----------------
------ - ------------- - ---- -------------------------
------ --- ---- --------
----- ------ - --- ---------------
---- ------------------------------
-------- -
---------- -----
--
---
----- ------ - --- --------------
----- -------
------ --- ----------------
---
----------------
------------------
--------------- ----------------
---- --
-----------------
--------------------
-------------------------------
--在这个简单示例中，我们使用 Mutation 创建了一个新邮件，然后通过订阅器实时更新邮件。在客户端，我们可以通过 Subscription 来监听 newPost 事件。
-- -------------------- ---- -------
------ - --------------- - ---- -----------------
------ - --- - ---- -----------------
----- -------- - ----
------------ -
------- -
--
-----
-------
-
-
--
-------- ----- -
----- - ----- ------ ------- - - --------------------------
-- --------- ------ -------------
-- ------- ------ ------- ------------------
------ -
-----
----- -- -
--
-----------------------------
-----------------------------
---
--
------
--
-
------ ------- ----现在，我们的示例已在使用 GraphQL 和 WebSocket 实现实时更新方面实现了基本示例。
结论
在这篇文章中，我们学习了如何将 GraphQL 和 WebSocket 结合使用，以在客户端应用程序中实现实时更新。借助事件订阅/发布机制，我们可以实现有关更新的信息。
可以看出，实现 GraphQL 和 WebSocket 的实时更新需要在 GraphQL 客户端和服务器上进行适当的配置。本文提供了一个完整的示例，供您参考并使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674fe92dfbd23cf89070d644