ApolloServer集成WebSocket获取上下文方法

珍惜时间，勤奋学习！今天给大家带来《Apollo Server 集成 WebSocket 获取 Context 方法》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

本文档旨在指导开发者在使用 Apollo Server 搭建 GraphQL 服务时，如何通过 WebSocket 连接获取请求的 Context 信息，包括身份验证 Token 等。我们将详细介绍配置步骤，并提供示例代码，帮助你理解如何在 WebSocket 环境下正确地传递和使用 Context。

WebSocket 上下文配置

在使用 Apollo Server 构建 GraphQL 服务时，如果需要通过 WebSocket 来处理订阅（Subscription）等实时数据，获取请求上下文（Context）的方式与传统的 HTTP 请求有所不同。以下将介绍如何在 WebSocket 环境下正确配置和获取 Context。

服务端配置 (server.js)

首先，需要确保正确配置了 WebSocket 服务器和 Apollo Server。以下是一个示例配置：

import { ApolloServer } from '@apollo/server';
import { createServer } from 'http';
import { expressMiddleware } from '@apollo/server/express4';
import express from 'express';
import { ApolloServerPluginDrainHttpServer } from '@apollo/server/plugin/drainHttpServer';
import { makeExecutableSchema } from '@graphql-tools/schema';
import { WebSocketServer } from 'ws';
import { useServer } from 'graphql-ws/lib/use/ws';
import { resolvers, typeDefs } from './src/graphql/modules/index.js';
import jwt from 'jsonwebtoken';
import cors from 'cors';
import bodyParser from 'body-parser';
import { PubSub } from 'graphql-subscriptions';

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

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

const wsServer = new WebSocketServer({
  server: httpServer,
  path: '/graphql',
});

const pub = new PubSub();

const serverCleanup = useServer(
  { schema,
    context: async (ctx, msg, args) => {
      // 从 WebSocket 连接的 headers 中获取 token
      const token = ctx.extra.request.headers.authorization?.split(' ')[1];
      let currentUser = null;

      if (token) {
        try {
          currentUser = jwt.decode(token, process.env.SECRET);
        } catch (e) {
          console.error('Token decoding error:', e);
        }
      }

      return { currentUser, pub };
    }
  },
  wsServer
);

const server = new ApolloServer({
  schema,
  plugins: [
    ApolloServerPluginDrainHttpServer({ httpServer }),
    {
      async serverWillStart() {
        return {
          async drainServer() {
            await serverCleanup.dispose();
          },
        };
      },
    },
  ],
});

await server.start();

// 使用 expressMiddleware 处理 HTTP 请求，并注入 context
app.use(
  '/graphql',
  cors(),
  bodyParser.json(),
  expressMiddleware(server, {
    context: async ({ req }) => {
      const token = req.headers.authorization?.split(' ')[1];
      let currentUser = null;

      if (token) {
        try {
          currentUser = jwt.decode(token, process.env.SECRET);
        } catch (e) {
          console.error('Token decoding error:', e);
        }
      }

      return { currentUser };
    },
  })
);

httpServer.listen(4000, () => {
  console.log('Server is running on port 4000');
});

代码解释：

1. WebSocket 服务器配置: 使用 ws 库创建 WebSocket 服务器，并指定路径 /graphql。
2. useServer 配置: 使用 graphql-ws 库的 useServer 函数将 WebSocket 服务器与 GraphQL schema 关联。
3. Context 函数: 在 useServer 的配置中，定义 context 函数，该函数会在每次 WebSocket 连接建立时执行。通过 ctx.extra.request.headers 可以访问到客户端发送的请求头信息，从中提取 Authorization 字段，获取 Token。
4. Token 解析: 使用 jwt.decode 函数解析 Token，获取用户信息。
5. Context 返回: 将解析后的用户信息 (currentUser) 和 PubSub 实例 (pub) 作为 Context 返回。
6. Express Middleware 配置: 使用 expressMiddleware 处理 HTTP 请求，并在 context 函数中解析 HTTP 请求的 Authorization 头，将解析后的用户信息注入到 context 中。

解析器配置 (resolver.js)

在解析器中，可以通过 contextValue 参数访问 Context 中的数据。

const resolvers = {
  Query: {
    notificacoesUsuario(_, args, contextValue) {
      // 从 contextValue 中获取 currentUser
      const { currentUser } = contextValue;

      if (!currentUser) {
        throw new GraphQLError('User is not authenticated', {
          extensions: {
            code: 'UNAUTHENTICATED',
            http: { status: 401 },
          },
        });
      }

      return notificacaoDb.getByReceptor(currentUser.id);
    },

    visualizarNotificacao(_, { id }) {
      return notificacaoDb.visualizarNotificacao(id);
    },
  },

  Notificacao: {
    data(args) {
      return args.data.toISOString();
    },
  },

  Subscription: {
    notificacaoCriada: {
      subscribe: (_, {}, context) => context.pub.asyncIterator(['NOTIFICACAO_CRIADA']),
    },
  },
};

export default { resolvers };

代码解释：

1. notificacoesUsuario 解析器: 从 contextValue 中获取 currentUser 对象，如果用户未认证，则抛出错误。
2. Subscription 解析器: 从 context 中获取 pub 实例，用于订阅通知。

客户端配置

客户端需要确保在建立 WebSocket 连接时，将 Token 通过 Authorization 头传递给服务器。例如：

import { createClient } from 'graphql-ws';

const client = createClient({
  url: 'ws://localhost:4000/graphql',
  connectionParams: {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`,
    },
  },
});

代码解释：

1. connectionParams 配置: 在 createClient 的配置中，使用 connectionParams 选项传递连接参数。
2. headers 配置: 在 connectionParams 中，配置 headers 选项，将 Token 添加到 Authorization 头中。

注意事项

• 安全性: 确保 Token 的安全存储和传输，避免泄露。
• 错误处理: 在解析 Token 时，需要进行错误处理，避免程序崩溃。
• Context 共享: 确保 HTTP 请求和 WebSocket 连接共享相同的 Context 数据结构，方便在解析器中统一处理。

总结

本文档介绍了在使用 Apollo Server 搭建 GraphQL 服务时，如何通过 WebSocket 连接获取请求的 Context 信息。通过正确配置 WebSocket 服务器和 Apollo Server，并合理使用 useServer 函数，可以轻松地在 WebSocket 环境下获取和使用 Context 信息，实现身份验证和权限控制等功能。

本篇关于《ApolloServer集成WebSocket获取上下文方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！