Как создать клиент basi c для использования подписок GraphQL через веб-сокеты - PullRequest
Новая
       78

Как создать клиент basi c для использования подписок GraphQL через веб-сокеты

0 голосов
/ 17 марта 2020

Я пытаюсь создать базовое c приложение, похожее на чат, просто для изучения нескольких вещей.

Я настроил базовый c сервер Graphql для обработки подключения пользователя и позвольте им добавить сообщение. Сейчас я пытаюсь добавить некоторый механизм, чтобы каждый пользователь мог видеть сообщения друг друга, добавленные в режиме реального времени. Я новичок в GraphQL, но, похоже, я должен использовать подписки.

Вот мой сервер index.ts: 

import { createServer } from 'http';
import jwt from 'jsonwebtoken';
import mongoose from 'mongoose';
import resolvers from 'modules/resolvers';
import typeDefs from 'modules/type-defs';
import { ApolloServer } from 'apollo-server-express';
import cookieParser from 'cookie-parser';
import express from 'express';
import cors from 'cors';

const PORT = 4000;

const getUser = (token: string) => {
  // ...
};

const server = new ApolloServer({
  context: ({ req, res }) => {
    const token = req.cookies.jwt;
    const currentUser = getUser(token);

    return { currentUser, req, res };
  },
  resolvers,
  subscriptions: {
    onConnect: async (connectionParams, webSocket, context) => {
      console.log(`Subscription client connected using Apollo server's built-in SubscriptionServer.`)
    },
    onDisconnect: async (webSocket, context) => {
      console.log(`Subscription client disconnected.`)
    },
  },
  typeDefs,
});

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

app.use(cors({ credentials: true, origin: 'http://localhost:3000' }));
app.use(cookieParser());

server.applyMiddleware({ app, cors: false });
server.installSubscriptionHandlers(httpServer);

httpServer.listen(PORT, () => {
  console.log(`Server ready at http://localhost:${PORT}${server.graphqlPath}`);
  console.log(`Subscriptions ready at ws://localhost:${PORT}${server.subscriptionsPath}`);
});

mongoose.connect('mongodb://127.0.0.1:27017/irc', {
  useCreateIndex: true,
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

Я пытаюсь что-то настроить настолько простой, насколько это возможно, на стороне клиента (javascript / реагировать) без необходимости полагаться на библиотеку типа apollo-client. Мне удалось использовать простые вызовы извлечения для отправки запросов / мутаций, и я ожидал, что смогу использовать подписки также «простым» способом. Apollo-client кажется слишком сложным для того, что я пытаюсь сделать, и я хотел бы понять, как это на самом деле работает - но каждый учебник по подпискам, похоже, использует эту библиотеку ...

Я не очень понять, что на самом деле делает мой сервер в отношении подписок, и я подумал, что настроил его на прослушивание подключений к веб-сокетам, но я больше не уверен в этом. что произойдет: 

const ws = new WebSocket('ws://localhost:4000/graphql');$
ws.onopen = event => {
  ws.send('Lorem ipsum dolor sit amet.');
};

... но, несмотря на то, что моя вкладка сети chrome показывает, что все прошло нормально, мой сервер, похоже, не заботится о моем сообщении, поскольку ничего не регистрируется.

Может кто-нибудь объяснить, можно ли использовать веб-сокеты basi c для использования подписок на сервер apollo? И как?

Спасибо

1 Ответ

1 голос
/ 17 марта 2020

Сервер Apollo и клиент Apollo оба используют subscription-transport-ws для защиты подписок. subscriptions-transport-ws использует WebSocket как транспорт для обмена сообщениями между сервером и клиентом. Эти сообщения имеют определенный c формат, используемый библиотекой - чтобы использовать на клиентской стороне только WebSocket, вам нужно будет отправлять сообщения такого же типа.

Вы можете проверить исходный код, чтобы определить, какие сообщения отправляются и когда. Однако лучшим вариантом было бы создать экземпляр SubscriptionClient и использовать его методы. Поскольку использование библиотеки не очень хорошо документировано, вам придется столкнуться с трудностями, но это должно быть возможно.

Если вы новичок в GraphQL, вы должны придерживаться Apollo Client, так как его документация довольно хорошая (см. здесь ), и подписки могут быть довольно сложными в настройке, особенно после добавления аутентификации.

...