如何在 React 项目中使用 GraphQL subscriptions 实现实时通信

在前端开发中，实时通信变得越来越重要。在过去，我们使用轮询或者 WebSockets 来实现实时通信，但是这些方法都不是很完美。近年来，GraphQL 的出现解决了这个问题。GraphQL subscriptions 是一个实现实时通信的协议，它支持服务器向客户端发送数据的推拉方式，使得我们可以轻松实现实时通信。本文将会介绍如何在 React 项目中使用 GraphQL subscriptions 来实现实时通信。

安装依赖包

首先需要安装 graphql-subscriptions 和 subscriptions-transport-ws 两个包。使用 npm 安装：

npm install graphql-subscriptions subscriptions-transport-ws

实现 subscriptions

在开始实现 WebSocket 的订阅前，我们需要准备好一个服务端，该服务端能够处理 GraphQL subscriptions。GraphQL subscriptions 使用 WebSocket 协议实现，在服务端部分，我们可以使用 graphql-yoga，它就支持 Subscriptions。

在服务端的实现里，实时推送信息到客户端的步骤是这样的：我们需要为每个连接保存一个 Set，每当有信息推送时，遍历 Set，向所有客户端发送信息即可。

这里提供了一个例子，服务端使用 graphql-yoga 和 express，并假设现在有一个计数器应用程序。

// javascriptcn.com 代码示例
const { GraphQLServer } = require('graphql-yoga');
const express = require('express');
const { createServer } = require('http');
const { SubscriptionServer } = require('subscriptions-transport-ws');
const { makeExecutableSchema } = require('graphql-tools');
const { PubSub } = require('graphql-subscriptions');

const app = express();
const httpServer = createServer(app);

const typeDefs = `
  type Query {
    count: Int!
  }

  type Mutation {
    increment: Boolean!
  }

  type Subscription {
    countChanged: Int!
  }
`;

const pubsub = new PubSub();
const COUNT_CHANGED = 'COUNT_CHANGED';

const resolvers = {
  Query: {
    count: () => 0,
  },
  Mutation: {
    increment: () => {
      pubsub.publish(COUNT_CHANGED, { countChanged: 1 });
      return true;
    },
  },
  Subscription: {
    countChanged: {
      subscribe: () => pubsub.asyncIterator(COUNT_CHANGED),
    },
  },
};

const schema = makeExecutableSchema({ typeDefs, resolvers });

const context = (req, res) => ({ req, res });

const server = new GraphQLServer({
  schema,
  context,
});

server.start({ httpServer }, () =>
  new SubscriptionServer(
    {
      schema,
      execute,
      subscribe,
    },
    {
      server: httpServer,
      path: '/subscriptions',
    }
  )
);

这里在服务端定义了一个计数器，每次调用 increment mutation，就会向所有客户端推送计数器变化的信息。

客户端 subscriptions 的实现

我们需要使用一个 GraphQL 客户端，这里用到的是 apollo-boost，因为它已经含有了 subscriptions-transport-ws。

// javascriptcn.com 代码示例
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';

const WS_URL = 'ws://localhost:4000/subscriptions';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  clientState: {
    defaults: {
      count: 0,
    },
    resolvers: {},
  },
  headers: {
    Authorization: `Bearer ${localStorage.getItem('token')}`,
  },
  request: operation => {
    operation.setContext({
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`,
      },
    });
  },
  // 添加 ws 选项
  // gql 中添加 countChangedSubscription 查询
  // countChangedSubscription 在订阅数据更新时触发
  // 更新 clientState，同时更新 UI
  // 这里只是使用一个 div 渲染计数器
  clientState: {
    defaults: {
      count: 0,
    },
    resolvers: {},
    typeDefs: `
      type Query {
        count: Int
      }
    `,
    resolvers: {},
    typeDefs: `
      type Query {
        count: Int
      }
      type Mutation {
        increment: Boolean!
      }
      type Subscription {
        countChanged: Int!
      }
    `,
    resolvers: {
      Mutation: {
        increment: () => client.mutate({ mutation: incrementMutation }),
      },
      Subscription: {
        // 订阅数据触发时，在客户端 console 上输出日志
        countChanged: {
          subscribe: () =>
            client.subscribe({ query: countChangedSubscription }).subscribe({
              next(resp) {
                console.log(resp);
                client.cache.writeData({
                  data: { count: resp.data.countChanged },
                });
              },
            }),
        },
      },
    },
  },
  // 添加 ws 选项
  // WebSocketTransport 直接从 apollo-boost 库中引入
  // 这里的 WS_URL 要和服务端订阅服务器的 URL 一样
  // ws 可以配置页面 tab 被切换到后是否仍保持连接
  // 最后用 ApolloProvider 包裹应用
  wsLink: new WebSocketLink(new WebSocketTransport(WS_URL), { lazy: true, reconnect: true }),
});

const countChangedSubscription = gql`
  subscription {
    countChanged
  }
`;

const incrementMutation = gql`
  mutation {
    increment
  }
`;

render(
  <ApolloProvider client={client}>
    <div>
      <button type="button" onClick={() => client.mutate({ mutation: incrementMutation })}>
        点我
      </button>
      <div>
        <Query query={gql`{ count }`} client={client}>
          {({ loading, data }) => {
            if (loading) return 'loading...';
            return data.count;
          }}
        </Query>
      </div>
    </div>
  </ApolloProvider>,
  document.querySelector('#demo')
);

这里客户端可以足以支持一个简单的计数器应用。在客户端启动后，每次调用 increment mutation，服务端将会向所有客户端发送实时信息，实时更新 UI。

总结

通过这个例子我们可以看到，使用 GraphQL subscriptions 的过程既简单又过程直观。使用这个协议来实现实时通信，能够为社交应用、游戏，以及实时文本编辑器等应用程序提供更好的体验。

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