使用 GraphQL 进行实时通信:Subscriptions 的使用方法

阅读时长 6 分钟读完

前言

GraphQL 是一种新兴的数据查询语言,它可以帮助你轻松地获取 API 中需要的数据。GraphQL 还提供了 Subscriptions,这是一种用于实现实时通信的机制。在这篇文章中,我们将学习使用 Subscriptions 进行实时通信的方法。

什么是 Subscriptions?

Subscriptions 是与 GraphQL 查询和变更请求不同的另一种 GraphQL 操作类型。它允许用户订阅特定事件,一旦发生,服务端就会推送通知给客户端。

Subscriptions 可以用于处理实时功能,例如聊天应用程序、即时通信、实时竞价应用程序等。使用 Subscriptions,开发人员可以更轻松地实现这些特定于实时应用程序的功能。

Subscriptions 在 GraphQL 中的使用方法

以下是使用 Subscriptions 的一般流程:

  1. 定义 Subscription 类型:定义可以被订阅的事件及其返回值。
  2. 在GraphQL Schema 中声明 Subscription 类型。
  3. 在 GraphQL 服务器端实现 Subscription 类型。
  4. 在客户端订阅,通过 WebSocket 连接来接收实时更新。

让我们更详细地了解这些步骤。

第一步:在 GraphQL Schema 中定义 Subscription 类型

定义 Subscription 类型的语法与定义 Query 和 Mutation 类型的语法非常相似,例如:

以上的 Subscription 类型定义了一个新的订阅事件 newMessage,当有新消息时,服务端将推送更新给客户端。

第二步:在 GraphQL Schema 中声明 Subscription 类型

在 GraphQL Schema 中声明 Subscription 类型,与声明 Query 和 Mutation 类型十分相似:

第三步:在 GraphQL 服务器端实现 Subscription 类型

实现 GraphQL 的 Subscription 类型需要在服务器端实现 GraphQLSubscriptionResolver 接口。

-- -------------------- ---- -------
----- - ---- ------ - - -------------------------
----- ------ - --- ---------
 
----- -------- - ----
  ---- ------------ -
    ----------- ------
  -
--
 
----- --------- - -
  ------------- -
    ----------- -
      ---------- -- -- --------------------------------------
    --
  --
--

-- ------- --- ------- -----
-------------- -- -
  ----------------------------- - ----------- ------ ------- ---
-- ------

----- ------ - --- --------------
  ---------
  ----------
  -------------- -
    ----- -----------------
    ---------- ------------------ ---------- -------- -- -
      ------------------- ------------
    --
    ------------- ----------- -------- -- -
      ------------------- ---------------
    --
  --
---

在上面的例子中,我们使用了 Apollo Server 和 PubSub 来实现 subscriptions。我们定义了一个 Subscription 类型,并在实现的 Resolver 中使用 PubSub 将新消息发布到 NEW_MESSAGE 频道。

第四步:在客户端订阅

最后一步是在客户端代码中订阅更新。通常,客户端使用 WebSocket 来通过一个长期存在的连接来接收实时更新。

-- -------------------- ---- -------
------ - ------------- --------- -------------- ----- - ---- -----------------
------ - ----------------- - ---- ---------------------------
------ - ------------- - ---- -------------------------
 
----- -------- - --- ---------- ---- ---------- ---
 
----- ------ - --------------- - --- ---------------
  ---- ---------------------------------------------
  -------- -
    ---------- -----
  --
-- - -----
 
----- ---- - ------
  - ------
      -- ----- -- -- -
        ----- ---------- - -------------------------
        ------ -
          --------------- --- --------------------- -- -------------------- --- --------------
        --
      --
      -------
      ---------
    -
  - ---------
 
----- ------ - --- --------------
  -----
  ------ --- ----------------
---
 
----- ----- - ----
  ------------ -
    ----------
  -
--
 
----- ------------ - ------------------ ----- ---
 
------------------------
  ----- ------ -- ------------------
  ------ ------- -- -------------------
---

在客户端,我们使用了 @apollo/client 库来订阅 Subscription。我们创建了一个 WebSocket 连接来监听订阅更新。一旦订阅更新到达客户端,next 回调函数就会被调用。

结论

在本文中,我们学习了使用 GraphQL Subscriptions 进行实时通信的方法。我们定义了 Subscription 类型,实现了 Subscription 类型的 Resolver 并在客户端订阅更新。这一过程展示了 GraphQL 的实时通信特征,并提供了字段选择,可减少通信量的好处。希望本文对您有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6735b05d0bc820c5824fe576

纠错
反馈