在 Apollo Server 中使用 WebSocket 获取 Context-js教程-PHP中文网

在 Apollo Server 中使用 WebSocket 获取 Context

霞舞

发布： 2025-10-01 09:04:02

原创

319人浏览过

在 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');
});

登录后复制

代码解释：

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

登录后复制

代码解释：

notificacoesUsuario 解析器: 从 contextValue 中获取 currentUser 对象，如果用户未认证，则抛出错误。
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')}`,
    },
  },
});

登录后复制

代码解释：

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

注意事项

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

总结

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

以上就是在 Apollo Server 中使用 WebSocket 获取 Context的详细内容，更多请关注php中文网其它相关文章！