在前端开发中，我们经常需要实现一个类似于事件订阅和监听的功能，以便及时地获取一些事件的信息并做出相应的处理。GraphQL WebHooks 是一种非常好的实现方式，可以帮助我们轻松地实现事件通知功能。在这篇文章中，我们将介绍如何使用 GraphQL WebHooks 实现事件通知，并提供相应的示例代码和学习指导。
什么是 GraphQL WebHooks
GraphQL WebHooks 是指一种基于 GraphQL 的 Web 钩子机制，通过订阅一些事件，并在事件触发的时候，将相关的数据发送到指定的 URL 接口，并进行处理的一种机制。GraphQL WebHooks 可以将各种类型的事件信息（例如数据的更改、新增、删除、查询等）发送到一个指定的 URL 接口，接口可以使用 HTTP 协议进行通信，以实现事件通知的功能。
GraphQL WebHooks 拥有很多优点，例如强大的扩展性，高效的性能，统一的数据结构等。通过使用 GraphQL WebHooks，我们可以很方便地实现事件通知功能，并且提高我们的开发效率。
如何使用 GraphQL WebHooks
使用 GraphQL WebHooks 要分为两个部分，一个是服务端的 GraphQL API，另一个是客户端的 WebHook URL。服务器需要将 WebHook URL 注册到 GraphQL API 中。当事件发生时，服务器将请求相应的 WebHook URL，通知客户端事件已经发生。
接下来，我们将介绍如何在服务端和客户端上具体实现 GraphQL WebHooks。
在服务端实现 GraphQL WebHooks
在服务端，我们需要在 GraphQL API 中增加一个 WebHook 订阅类型：
type Subscription {
webhook: WebHookPayload
}
type WebHookPayload {
action: String!
data: String!
}基于上述定义，我们创建了WebHookPayload类型，这个类型包含了两个字段，action 字段代表事件类型，data 字段代表事件的具体数据内容。接下来，我们需要在服务端实现 GraphQL WebHooks 的订阅功能。
在服务端，我们使用 Apollo Server 来实现 GraphQL API。我们需要在 GraphQL Subscription 中实现 WebHook 的订阅功能。为此，我们需要实现一个 publish 函数和一个 WebHook 订阅器。
-- -------------------- ---- -------
-- ------- --------
----- ------- - -------- ----- -- -
------ -
-------- -
-------
----
-
--
--
-- ------- ------------
----- ------------------- - -
---------- -- -- --------------------------------
--publish 函数用于发送 WebHook 消息，它会将事件的类型和数据封装成 GraphQL Subscription 中的 WebHookPayload 类型，并使用 PubSub 实现异步通讯。此函数将通过 pubsub.publish('WEB_HOOK', { webhook }) 将 WebHook 事件发布到不同的 Topic，并将消息推送给相应的订阅者。
最后，我们需要在服务器中注册这个 WebHookSubscription:
-- -------------------- ---- -------
----- ------ - --- --------------
-------
-------------- -
----- -----------------
---------- -- -- ---------------------- -- -----------
------------- -- -- ------------------------- ---- -----------
--
-------- ----- -- -- -
------ -
---
--
--
---在客户端实现 GraphQL WebHooks
在客户端，我们需要一个 WebHook URL，通过这个 URL，自己的服务器就能够将订阅的事件的内容发送到这个 URL。
具体实现方式是：在客户端中使用 SubscriptionClient 来实现订阅 WebHook 事件：
-- -------------------- ---- -------
------ - ------------------ - ---- -----------------------------
------ --- ---- --------------
----- -------------- - ---------------------------------
----- ------ - --- ---------------------------------- -
---------- -----
---
----- ------------ - ----
------------ ------- -
------- -
------
----
-
-
--
------------------
------ -------------
---------- ---
--------------
----- ------ -- -------------------- -------- ------
------ ------- -- ---------------------- ------- -------
---在上面的代码中，我们使用了 Graphql-Tag 库进行 GraphQL 查询和订阅的定义，我们订阅的事件是subscription Webhook，它包含 WebHookPayload 的所有信息，我们在 SubscriptionClient 中提供了 GraphQL WebSockets URL，指定订阅的地址和参数之后，就可以开始接收来自服务器的 WebHook 事件了。
完整示例代码
服务端代码：
-- -------------------- ---- -------
------ - ------------- ------ - ---- ------------------------
------ ---- ---- -------
------ ------- ---- ----------
------ ---- ---- -------
------ - -------------------- - ---- ----------------
----- -------- - -
---- ----- -
------ -------
-
---- ------------ -
-------- --------------
-
---- -------------- -
------- -------
----- -------
-
--
----- --------- - -
------ -
------ -- -- ------ --------
--
------------- -
-------- -
---------- ------- ------ - ------ -- -- -
------ --------------------------------
--
--
--
--
----- ------ - --- ---------
----- ------ - ----------------------
---------
----------
---
----- --- - ----------
----- ------ - --- --------------
-------
-------------- -
----- -----------------
---------- -- -- ---------------------- -- -----------
------------- -- -- ------------------------- ---- -----------
--
-------- ----- -- -- -
------ -
-------
--
--
---
------------------------ --- ---
----- ---------- - -----------------------
-----------------------------------------------
------------------- ----- ---- -- -- -- -
--------------- ------ ----- -- ------------------------
--------------- ------------- ----- -- ------------------------------------
---客户端代码：
-- -------------------- ---- -------
------ - ------------------ - ---- -----------------------------
------ --- ---- --------------
----- -------------- - ---------------------------------
----- ------ - --- ---------------------------------- -
---------- -----
---
----- ------------ - ----
------------ ------- -
------- -
------
----
-
-
--
------------------
------ -------------
---------- ---
--------------
----- ------ -- -------------------- -------- ------
------ ------- -- ---------------------- ------- -------
---在启动这个项目之前，需要先安装两个依赖， npm install apollo-server-express subscriptions-transport-ws graphql-tag，之后就可以在命令行中启动服务端代码和客户端代码了，访问 http://localhost:4000/graphql 即可熔断服务端的 GraphQL API。
总结
在这篇文章中，我们介绍了什么是 GraphQL WebHooks，以及如何在服务端和客户端上实现 GraphQL WebHooks，包括代码示例和学习指导。希望这篇文章能够帮助您更好地了解 GraphQL WebHooks 并将它应用到实际的开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648e817f48841e9894cde59b