随着移动互联网的发展，服务端推送对于现代 Web 应用程序变得越来越重要。服务端推送可以让应用程序在没有用户交互的情况下实时更新数据，提高用户体验。在这篇文章中，我们将介绍如何使用 GraphQL 实现服务端推送，以及如何在现有的 Web 应用程序中集成 GraphQL。
GraphQL 简介
GraphQL 是一种用于 API 的查询语言。它使客户端能够明确地请求需要的数据，并且可以减少网络传输的数据量。GraphQL 还提供了一种强大的类型系统，可以帮助开发人员编写更可靠的代码。
GraphQL 的一个重要特性是可扩展性。它允许开发人员添加新的数据类型和查询字段，而不会破坏现有的代码。这使得 GraphQL 成为一种理想的选择，用于构建需要频繁更改的 Web 应用程序。
实现服务端推送
实现服务端推送的一种常见方法是使用 WebSocket。WebSocket 是一种在客户端和服务器之间建立持久连接的协议。通过 WebSocket，服务器可以向客户端发送消息，而不需要客户端发起请求。
GraphQL 本身不支持 WebSocket，但是有很多库可以将 GraphQL 和 WebSocket 结合起来使用。其中一个很受欢迎的库是 subscriptions-transport-ws。这个库可以将 GraphQL 的订阅功能与 WebSocket 结合起来，使得服务器可以向客户端发送实时更新的数据。
下面是一个使用 subscriptions-transport-ws 实现服务端推送的示例代码：
-- -------------------- ---- -------
----- - ------------------ - - --------------------------------------
----- - -------- --------- - - -------------------
----- - ------------ - - ----------------
----- ------- - -------------------
----- - ----------- - - ---------------------------
----- - -------------------- - - ---------------------------------
----- -------- - -
---- ----- -
------ ------
-
---- ------------ -
--------- ------
-
--
----- --------- - -
------ -
------ -- -- ------ --------
--
------------- -
--------- -
---------- -- -- -
--- ----- - --
------ -------------- -- -
--------
---------------------------- ------ ----------- -------- - --------- ------ ---------- - ---
-- ------
--
--
--
--
----- ------ - ---------------------- --------- --------- ---
----- --- - ----------
--------
-----------
-------------
-------
--------- -----
--
--
----- ------ - ------------------
------------------- -- -- -
---------------------- -- ---- -------
---
--------------------------
-
--------
----------
-------
--
-
-------
----- -----------------
-
--这个示例使用 Express 和 express-graphql 创建了一个 GraphQL 服务器。它定义了一个简单的查询 hello 和一个订阅 greeting。greeting 订阅每秒钟向客户端发送一条消息。在 subscribe 函数中，我们使用 setInterval 来定期发布消息。每次发布，我们都使用 SubscriptionServer.publish 发布到 greeting 主题。
在 SubscriptionServer.create 函数中，我们使用 subscriptions-transport-ws 创建了一个 WebSocket 服务器。这个服务器将 GraphQL 的订阅功能与 WebSocket 结合起来使用。我们将 WebSocket 服务器的路径设置为 /subscriptions，这意味着客户端可以通过这个路径连接到 WebSocket 服务器。
集成 GraphQL
要在现有的 Web 应用程序中集成 GraphQL，我们可以使用一些现成的库。其中一个很受欢迎的库是 apollo-client。apollo-client 提供了一种简单的方式来将 GraphQL 集成到现有的 Web 应用程序中。
下面是一个使用 apollo-client 集成 GraphQL 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -------------- -------------- - ---- -----------------
------ - ------------- - ---- -------------------------
------ - ---- --------------- - ---- -----------------
----- ------ - --- --------------
------ --- ----------------
----- --- ---------------
---- ------------------------------------
-------- -
---------- -----
--
---
---
----- --------------------- - ----
------------ -
-------- -
--------
-
-
--
-------- ----- -
----- - ----- ------- - - ---------------------------------------
-- --------- -
------ ------------------
-
------ --------------------------------
-
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--这个示例使用 React 和 @apollo/client 创建了一个 Web 应用程序。它定义了一个名为 GREETING_SUBSCRIPTION 的 GraphQL 订阅。在 App 组件中，我们使用 useSubscription 钩子来订阅 GREETING_SUBSCRIPTION。这个钩子返回订阅的数据。
我们使用 ApolloProvider 包装 App 组件，以便让 App 组件可以访问 GraphQL 客户端。
在 ApolloClient 中，我们创建了一个新的 WebSocketLink，用于连接到 GraphQL 服务器的 WebSocket 端点。我们将 WebSocket 端点设置为 ws://localhost:4000/subscriptions，这与服务器端的设置相同。
结论
在本文中，我们介绍了如何使用 GraphQL 实现服务端推送，并且展示了如何在现有的 Web 应用程序中集成 GraphQL。GraphQL 提供了一种强大的方式来查询和订阅数据，并且可以与 WebSocket 集成，实现实时的数据更新。这使得 GraphQL 成为现代 Web 应用程序的理想选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6764e893856ee0c1d42f9577