GraphQL Subscriptions 是 GraphQL 规范的一个扩展，它允许客户端订阅数据更新，从而实现实时通信。与传统的 RESTful API 不同，REST API 通常是基于轮询或长轮询的模式，而 GraphQL Subscriptions 则通过 WebSocket 协议实现了双向的持久连接，从而在数据发生变化时即时通知客户端。
GraphQL Subscriptions 的原理
在 GraphQL 中，Subscriptions 类似于 Queries 和 Mutations，但是它们用于订阅数据流而不是请求单次数据。当订阅一个资源时，客户端会持续监听这个资源的变化，一旦有变化发生，服务器就会通过 WebSocket 推送更新数据给客户端。
WebSocket 在 GraphQL Subscriptions 中的作用
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它在客户端和服务器之间建立了一个持久的连接，允许双方发送数据。在 GraphQL Subscriptions 中，WebSocket 被用来维持一个长期的连接，以便服务器可以在数据更新时主动推送给客户端。
实现 GraphQL Subscriptions
下面我们将逐步介绍如何在服务器端和客户端实现 GraphQL Subscriptions。
服务器端实现
使用 Apollo Server 和 WebSocket 来设置 GraphQL Subscriptions。
// server.js
const { ApolloServer, PubSub } = require('apollo-server-express');
const express = require('express');
const http = require('http');
const { makeExecutableSchema } = require('@graphql-tools/schema');
const { WebSocketServer } = require('ws');
const { useServer } = require('graphql-ws/lib/use/ws');const pubsub = new PubSub();const typeDefs = `type Query {message: String}type Subscription {message: String!}
`;const resolvers = {Query: {message: () => 'Hello World!',},Subscription: {message: {subscribe: () => pubsub.asyncIterator(['MESSAGE_ADDED']),},},
};const schema = makeExecutableSchema({ typeDefs, resolvers });const app = express();
const httpServer = http.createServer(app);const wsServer = new WebSocketServer({server: httpServer,path: '/graphql',
});const serverCleanup = useServer({ schema }, wsServer);const apolloServer = new ApolloServer({schema,
});apolloServer.applyMiddleware({ app });httpServer.listen({ port: 4000 }, () =>console.log(`🚀 Server ready at http://localhost:4000${apolloServer.graphqlPath}`)
);
在这个例子中，我们创建了一个简单的 GraphQL 服务器，它支持查询和订阅。我们使用 PubSub 类来管理订阅事件，当有新消息时，我们可以通过 pubsub.publish('MESSAGE_ADDED', { message: 'New Message' }) 来发布事件。
客户端实现
客户端可以使用 apollo-link-ws 或 subscriptions-transport-ws 来连接到 GraphQL Subscriptions 服务器。
// client.js
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { split } from '@apollo/client/link/core';
import { getMainDefinition } from '@apollo/client/utilities';
import { WebSocketLink } from '@apollo/client/link/ws';const httpLink = createHttpLink({uri: 'http://localhost:4000/graphql',
});const wsLink = new WebSocketLink({uri: 'ws://localhost:4000/graphql',options: {reconnect: true,},
});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(),
});client.subscribe({query: gql`subscription {message}`,
}).subscribe({next: (data) => console.log('Received data:', data),error: (err) => console.error('Subscription error:', err),
});
在客户端，我们创建了一个 ApolloClient 实例，并且使用 split 函数来决定何时使用 WebSocketLink 和何时使用 HTTP Link。这样，当执行订阅操作时，将使用 WebSocketLink；而执行查询或变异操作时，将使用 HTTP Link。
GraphQL Subscriptions 的优点
- 实时性：Subscriptions 可以实现实时数据更新，无需轮询。
- 减少带宽消耗：只有在数据变化时才发送数据，减少了不必要的网络流量。
- 更好的用户体验：用户可以立即看到数据的更新，提高了应用的响应速度和交互性。
处理多个订阅和取消订阅
在实际应用中，你可能需要处理多个订阅，以及在不需要时取消订阅。Apollo Client 和其他 GraphQL 客户端库提供了相应的机制来管理这些操作。
处理多个订阅
在客户端，你可以同时订阅多个不同的数据流。例如：
// client.js
const subscription1 = client.subscribe({query: gql`subscription {message1}`,
});const subscription2 = client.subscribe({query: gql`subscription {message2}`,
});subscription1.subscribe({next: (data) => console.log('Received data for subscription 1:', data),
});subscription2.subscribe({next: (data) => console.log('Received data for subscription 2:', data),
});
每个订阅都可以独立处理数据，并且可以有不同的回调函数。
取消订阅
当不再需要某个订阅时，你应该取消订阅，以避免不必要的数据传输和资源消耗。在 Apollo Client 中，你可以通过调用订阅返回的 unsubscribe 方法来取消订阅：
// client.js
const subscription = client.subscribe({query: gql`subscription {message}`,
}).subscribe({next: (data) => console.log('Received data:', data),complete: () => console.log('Subscription completed'),error: (error) => console.error('Subscription error:', error),
});// Later...
subscription.unsubscribe();
错误处理和重连机制
在使用 WebSocket 进行通信时，可能会遇到网络中断、服务器重启等问题。因此，错误处理和重连机制非常重要。
错误处理
在客户端订阅时，你可以提供 error 回调来处理订阅过程中发生的任何错误：
// client.js
client.subscribe({query: gql`subscription {message}`,
}).subscribe({next: (data) => console.log('Received data:', data),error: (error) => console.error('Subscription error:', error),
});
重连机制
subscriptions-transport-ws 和 apollo-link-ws 都提供了自动重连的功能，可以在 WebSocket 连接断开后尝试重新建立连接。你可以在创建 WebSocketLink 时设置 reconnect 选项：
// client.js
const wsLink = new WebSocketLink({uri: 'ws://localhost:4000/graphql',options: {reconnect: true,},
});
总结
GraphQL Subscriptions 通过 WebSocket 实现了实时数据传输，为现代 Web 应用提供了强大的实时通信能力。通过上述的服务器端和客户端示例，你可以开始在自己的项目中实现 GraphQL Subscriptions，以构建实时更新的应用程序。随着 GraphQL 生态系统的不断发展，Subscriptions 将成为构建实时应用的一个重要工具。