使用服务器发送事件（Server-sent events）和EventSource的GraphQL订阅

要使用服务器发送事件（Server-sent events）和EventSource来进行GraphQL订阅，您需要在服务器端设置一个GraphQL订阅解析器，并在客户端使用EventSource来订阅服务器发送的事件。

以下是一个使用Node.js和Apollo Server的示例，展示了如何设置服务器发送事件和EventSource订阅GraphQL订阅：

服务器端代码（使用Node.js和Apollo Server）：

const { ApolloServer, PubSub } = require('apollo-server');
const { createServer } = require('http');
const { execute, subscribe } = require('graphql');
const { SubscriptionServer } = require('subscriptions-transport-ws');
const { makeExecutableSchema } = require('@graphql-tools/schema');

// 初始化PubSub实例
const pubsub = new PubSub();

// 定义GraphQL类型和解析器
const typeDefs = `
  type Query {
    hello: String
  }

  type Subscription {
    greeting: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello World!',
  },
  Subscription: {
    greeting: {
      subscribe: () => pubsub.asyncIterator(['GREETING']),
    },
  },
};

// 创建可执行的GraphQL schema
const schema = makeExecutableSchema({ typeDefs, resolvers });

// 创建Apollo Server实例
const server = new ApolloServer({
  schema,
});

// 在HTTP服务器上安装Apollo Server
const httpServer = createServer();
server.installSubscriptionHandlers(httpServer);

// 启动HTTP服务器
httpServer.listen({ port: 4000 }, () => {
  console.log(`Server ready at http://localhost:4000${server.graphqlPath}`);
  console.log(`Subscriptions ready at ws://localhost:4000${server.subscriptionsPath}`);
});

// 创建SubscriptionServer实例，用于处理GraphQL订阅
new SubscriptionServer(
  {
    execute,
    subscribe,
    schema,
  },
  {
    server: httpServer,
    path: server.subscriptionsPath,
  }
);

客户端代码（使用JavaScript和EventSource）：

const eventSource = new EventSource('http://localhost:4000/graphql', {
  withCredentials: true,
});

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Received event:', data);
};

eventSource.onerror = () => {
  console.error('Error occurred while receiving events.');
};

eventSource.onopen = () => {
  console.log('EventSource connection established.');
};

eventSource.addEventListener('greeting', (event) => {
  const data = JSON.parse(event.data);
  console.log('Received greeting:', data);
});

在此示例中，我们使用Apollo Server设置了一个具有GraphQL订阅的服务器。在服务器端，我们定义了一个名为"greeting"的订阅字段，该字段将返回一个异步迭代器，该迭代器将在每次订阅时触发事件。在客户端，我们使用EventSource来建立与服务器的连接，并通过监听"message"事件来接收服务器发送的事件。我们还为"greeting"事件添加了一个特定的事件监听器，以便单独处理该事件。

请注意，为了让EventSource可以正常工作，您需要确保服务器允许跨域访问（CORS）。