在 GraphQL 中使用 Subscription 实现实时数据推送-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言，它提供了一种更高效、更强大的方式来获取和更新数据。除了查询和变更之外，GraphQL 还提供了 Subscription，用于实现实时数据推送。本文将介绍如何在 GraphQL 中使用 Subscription 实现实时数据推送，并提供示例代码和指导意义。

Subscription 概述

Subscription 是 GraphQL 中的一种类型，它允许客户端订阅某个数据源的变更，并在数据源发生变化时实时接收更新。与传统的轮询方式相比，Subscription 更加高效、实时和可靠。

在 GraphQL 中，Subscription 通常由以下三个部分组成：

Subscription 类型定义：定义 Subscription 的名称、参数和返回值类型等信息。
Subscription Resolver：处理 Subscription 的逻辑，通常包括订阅数据源和发送更新消息。
Subscription 客户端：在客户端发起订阅请求，并接收实时更新消息。

使用 Subscription 实现实时数据推送

下面我们将介绍如何在 GraphQL 中使用 Subscription 实现实时数据推送。假设我们有一个聊天应用，需要实时推送新消息给客户端。

1. 定义 Subscription 类型

首先，我们需要定义一个名为 newMessage 的 Subscription 类型，用于订阅新消息的推送。该 Subscription 需要两个参数：roomId 表示房间号，userId 表示用户 ID。返回值类型为 Message，表示新消息的内容。

type Subscription {
  newMessage(roomId: ID!, userId: ID!): Message!
}

2. 实现 Subscription Resolver

接下来，我们需要实现 newMessage 的 Subscription Resolver。该 Resolver 需要订阅一个名为 messageAdded 的事件，并在事件触发时发送新消息给客户端。

// javascriptcn.com 代码示例
const { PubSub } = require('graphql-subscriptions');
const pubsub = new PubSub();

const MESSAGE_ADDED = 'MESSAGE_ADDED';

const resolvers = {
  Subscription: {
    newMessage: {
      subscribe: (_, { roomId, userId }) => {
        const channel = `${roomId}-${userId}`;
        return pubsub.asyncIterator([MESSAGE_ADDED, channel]);
      },
    },
  },
  Mutation: {
    addMessage: (_, { roomId, userId, text }) => {
      const message = { id: uuid(), roomId, userId, text };
      pubsub.publish(MESSAGE_ADDED, { messageAdded: message });
      pubsub.publish(`${roomId}-${userId}`, { messageAdded: message });
      return message;
    },
  },
};

在上面的代码中，我们使用了 graphql-subscriptions 库提供的 PubSub 类来实现事件订阅和发布功能。我们定义了一个名为 MESSAGE_ADDED 的常量，用于标识新消息的事件类型。在 newMessage 的 Subscription Resolver 中，我们根据 roomId 和 userId 计算出一个唯一的频道名，然后使用 asyncIterator 方法订阅该频道的事件。在 addMessage 的 Mutation Resolver 中，我们创建一个新消息，并使用 publish 方法发送 MESSAGE_ADDED 和频道事件，以触发新消息的推送。

3. 实现 Subscription 客户端

最后，我们需要在客户端发起订阅请求，并接收实时更新消息。在使用 Subscription 的客户端中，我们通常需要使用一个类似于 WebSocket 的实时连接，以便接收实时更新消息。

// javascriptcn.com 代码示例
import { SubscriptionClient } from 'subscriptions-transport-ws';
import { gql } from '@apollo/client';

const client = new SubscriptionClient('ws://localhost:4000/graphql', {
  reconnect: true,
});

const NEW_MESSAGE = gql`
  subscription NewMessage($roomId: ID!, $userId: ID!) {
    newMessage(roomId: $roomId, userId: $userId) {
      id
      roomId
      userId
      text
    }
  }
`;

const observer = {
  next: (data) => {
    console.log(data);
  },
  error: (error) => {
    console.error(error);
  },
};

const subscription = client.request({
  query: NEW_MESSAGE,
  variables: { roomId: '1', userId: '2' },
}).subscribe(observer);

在上面的代码中，我们使用了 subscriptions-transport-ws 库提供的 SubscriptionClient 类来创建一个 WebSocket 连接。我们定义了一个名为 NEW_MESSAGE 的 Subscription，用于订阅新消息的推送。在订阅请求中，我们使用 request 方法发起订阅请求，并传递房间号和用户 ID 作为参数。最后，我们使用 subscribe 方法订阅该 Subscription，并在回调函数中处理接收到的更新消息。

总结

本文介绍了在 GraphQL 中使用 Subscription 实现实时数据推送的方法，包括定义 Subscription 类型、实现 Subscription Resolver 和 Subscription 客户端。使用 Subscription 可以大幅提高数据推送的效率和实时性，适用于需要实时更新的应用场景。希望本文对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6567ffdfd2f5e1655d0cac9a