使用 GraphQL 进行实时数据订阅的基本原理和实现方法-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言，它提供了一种更高效、更强大的方式来获取和更新数据。GraphQL 还具备实时数据订阅的能力，可以让客户端实时获取服务端的数据更新，从而提高用户体验。本文将介绍 GraphQL 实时数据订阅的基本原理和实现方法，供前端开发者学习和参考。

GraphQL 实时数据订阅的基本原理

GraphQL 实时数据订阅的基本原理是通过 WebSocket 协议来建立客户端和服务端之间的实时连接，从而实现实时数据的传输和订阅。具体来说，GraphQL 实时数据订阅的流程如下：

客户端向服务端发起 WebSocket 连接请求。
服务端接受连接请求，并将连接信息存储在连接池中。
客户端向服务端发送一个 GraphQL 订阅请求，请求订阅某个数据。
服务端接收到订阅请求后，将订阅信息存储在订阅池中，并将订阅信息与连接信息进行关联。
当数据有更新时，服务端会根据订阅信息，向所有订阅该数据的客户端发送更新信息。
客户端接收到更新信息后，根据更新信息更新界面数据。

GraphQL 实时数据订阅的实现方法

GraphQL 实时数据订阅的实现方法可以分为服务端和客户端两个部分。下面将分别介绍服务端和客户端的实现方法。

服务端实现方法

服务端实现 GraphQL 实时数据订阅需要使用一个支持 WebSocket 的 GraphQL 服务器。目前比较流行的 GraphQL 服务器有 Apollo Server、Prisma、Nexus 等。这里以 Apollo Server 为例，介绍如何实现 GraphQL 实时数据订阅。

首先，需要安装 apollo-server 和 subscriptions-transport-ws 两个包：

npm install apollo-server subscriptions-transport-ws

然后，在服务端代码中添加如下代码：

// www.javascriptcn.com code example
const { ApolloServer } = require('apollo-server');
const { execute, subscribe } = require('graphql');
const { SubscriptionServer } = require('subscriptions-transport-ws');
const typeDefs = require('./schema');
const resolvers = require('./resolvers');

const server = new ApolloServer({
  typeDefs,
  resolvers,
  subscriptions: {
    onConnect: () => console.log('Client connected'),
    onDisconnect: () => console.log('Client disconnected'),
  },
});

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
  new SubscriptionServer({
    execute,
    subscribe,
    schema: server.schema,
  }, {
    server: server.httpServer,
    path: server.graphqlPath,
  });
});

上述代码中，typeDefs 和 resolvers 分别是 GraphQL 的类型定义和解析器函数，subscriptions 字段用于配置 WebSocket 连接的回调函数，onConnect 和 onDisconnect 分别在客户端连接和断开连接时触发。

客户端实现方法

客户端实现 GraphQL 实时数据订阅需要使用一个支持 WebSocket 的 GraphQL 客户端库。目前比较流行的 GraphQL 客户端库有 Apollo Client、Relay、Urql 等。这里以 Apollo Client 为例，介绍如何实现 GraphQL 实时数据订阅。

首先，需要安装 apollo-client 和 subscriptions-transport-ws 两个包：

npm install apollo-client subscriptions-transport-ws

然后，在客户端代码中添加如下代码：

// www.javascriptcn.com code example
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';
import { getMainDefinition } from '@apollo/client/utilities';
import { split } from 'apollo-link';

const wsLink = new WebSocketLink({
  uri: `ws://localhost:4000/graphql`,
  options: {
    reconnect: true,
  },
});

const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql',
});

const link = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
  },
  wsLink,
  httpLink,
);

const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
});

上述代码中，wsLink 和 httpLink 分别是 WebSocket 连接和 HTTP 连接，link 使用 split 函数将订阅请求转发到 WebSocket 连接，其他请求转发到 HTTP 连接。client 是 Apollo Client 的实例，用于发送 GraphQL 请求和接收实时更新。

GraphQL 实时数据订阅的示例代码

下面是一个简单的 GraphQL 实时数据订阅的示例代码，用于订阅一个计数器的增加和减少操作：

// www.javascriptcn.com code example
// 服务端代码
const { PubSub } = require('graphql-subscriptions');
const pubsub = new PubSub();
let count = 0;

const typeDefs = `
  type Query {
    count: Int!
  }
  type Mutation {
    increment: Int!
    decrement: Int!
  }
  type Subscription {
    countUpdated: Int!
  }
`;

const resolvers = {
  Query: {
    count: () => count,
  },
  Mutation: {
    increment: () => {
      count++;
      pubsub.publish('COUNT_UPDATED', { countUpdated: count });
      return count;
    },
    decrement: () => {
      count--;
      pubsub.publish('COUNT_UPDATED', { countUpdated: count });
      return count;
    },
  },
  Subscription: {
    countUpdated: {
      subscribe: () => pubsub.asyncIterator(['COUNT_UPDATED']),
    },
  },
};

// 客户端代码
import { gql } from '@apollo/client';

const COUNT_QUERY = gql`
  query {
    count
  }
`;

const COUNT_SUBSCRIPTION = gql`
  subscription {
    countUpdated
  }
`;

const INCREMENT_MUTATION = gql`
  mutation {
    increment
  }
`;

const DECREMENT_MUTATION = gql`
  mutation {
    decrement
  }
`;

client.watchQuery({
  query: COUNT_QUERY,
  onCompleted: ({ data }) => setCount(data.count),
});

client.subscribe({
  query: COUNT_SUBSCRIPTION,
  onSubscriptionData: ({ subscriptionData }) => setCount(subscriptionData.data.countUpdated),
});

const handleIncrement = () => client.mutate({ mutation: INCREMENT_MUTATION });
const handleDecrement = () => client.mutate({ mutation: DECREMENT_MUTATION });

上述代码中，服务端使用了 graphql-subscriptions 库实现了订阅功能，客户端使用了 Apollo Client 库实现了 GraphQL 请求和订阅功能。当客户端订阅 countUpdated 事件时，服务端会在计数器增加或减少时向客户端发送更新信息，客户端接收到更新信息后，更新界面数据。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d938c2a941bf71340c6599

使用 GraphQL 进行实时数据订阅的基本原理和实现方法

GraphQL 实时数据订阅的基本原理

GraphQL 实时数据订阅的实现方法

服务端实现方法

客户端实现方法

GraphQL 实时数据订阅的示例代码

接着读