Konfigurowanie serwera Apollo z subskrypcjami-transport-ws?

Question

Wygląda na to, że mam skonfigurowany serwer zgodnie z dokumentacją Apollo pod numerem http://dev.apollodata.com/tools/apollo-server/setup.html. W moim serwerze pliku/main.js:

//SET UP APOLLO INCLUDING APOLLO PUBSUB 
const executableSchema = makeExecutableSchema({ 
    typeDefs: Schema, 
    resolvers: Resolvers, 
    connectors: Connectors, 
    logger: console, 
}); 

const GRAPHQL_PORT = 8080; 
const graphQLServer = express(); 

// `context` must be an object and can't be undefined when using connectors 
graphQLServer.use('/graphql', bodyParser.json(), apolloExpress({ 
    schema: executableSchema, 
    context: {}, //at least(!) an empty object 
})); 

graphQLServer.use('/graphiql', graphiqlExpress({ 
    endpointURL: '/graphql', 
})); 

graphQLServer.listen(GRAPHQL_PORT,() => console.log(
    `GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}/graphql` 
)); 
//SET UP APOLLO INCLUDING APOLLO PUBSUB 

wypisze „GraphQL Server jest teraz działa na http://localhost:8080/graphql” do terminala dzienniku wskazujący, że serwer został pomyślnie zainicjowany.

Ale na szczycie mojej składnika main_layout, kiedy uruchomić ten kod:

import { Client } from 'subscriptions-transport-ws'; 
const wsClient = new Client('ws://localhost:8080'); 

... I ten komunikat konsoli:

websocket połączenie „WS: // localhost : 8080/"nie powiodło się: połączenie zostało zamknięte przed odebraniem odpowiedzi na potwierdzenie uścisku dłoni

Czego mi brakuje?

Answer 1

Musisz utworzyć dedykowany serwer sieci web. Będzie działał na innym porcie, a kod, który można skonfigurować, znajduje się w pakiecie subscriptions-transport-ws.

Spójrz na poniższy kod z przykładu GitHunt-API: https://github.com/apollostack/GitHunt-API/blob/master/api/index.js#L101-L134

również można zobaczyć, że ten kod jest zależna od klasy o nazwie SubscriptionManager. Jest to klasa z pakietu o nazwie graphql-subscriptions również przez zespół Apollo, można znaleźć przykład, jak go używać tutaj: https://github.com/apollostack/GitHunt-API/blob/master/api/subscriptions.js

Answer 2

Oto demo na temat korzystania Apollo GraphQL, React & HAPI: https://github.com/evolastech/todo-react. To mniej niż GitHunt przytłoczony reagują & GitHunt-API

Answer 3

TL; DR:graphql-up można użyć, aby szybko uzyskać z serwera GraphQL subskrypcje obsługiwać i gotowe. Oto więcej detailed tutorial na temat korzystania z tego w połączeniu z Apollo i klientem websocket subscriptions-transport-ws.

Uzyskanie Server GraphQL jednym kliknięciem

Powiedzmy, że chcemy zbudować Twitter klon na podstawie tego GraphQL Schema in IDL syntax:

type Tweet { 
    id: ID! 
    title: String! 
    author: User! @relation(name: "Tweets") 
} 

type User { 
    id: ID! 
    name: String! 
    tweets: [Tweet!]! @relation(name: "Tweets") 
} 

Kliknij ten przycisk, aby otrzymać swój własny GraphQL API a następnie otwórz Playground, gdzie możesz dodawać tweety, sprawdzać wszystkie tweety, a także testować subskrypcje.

Prosty w użyciu API

Najpierw utworzyć użytkownika, który będzie autorem wszystkich nadchodzących tweets.Uruchomić tę mutację w Playground:

mutation createUser { 
    createUser(name: "Tweety") { 
    id # copy this id for future mutations! 
    } 
} 

Oto jak kwerendy wszystkich tweets i ich autorów przechowywanych na serwerze GraphQL:

query allTweets { 
    allTweets { 
    id 
    title 
    createdAt 
    author { 
     id 
     name 
    } 
    } 
} 

wsparcia Subskrypcja korzystających WebSocket

Przejdźmy teraz zapisz się do nowych tweets z "Tweety". Jest to składnia:

subscription createdTweets { 
    Message(filter: { 
    mutation_in: [CREATED] 
    node: { 
     author: { 
     name: "Tweety" 
     } 
    } 
    }) { 
    node { 
     id 
     text 
     createdAt 
     sentBy { 
     id 
     name 
     } 
    } 
    } 
} 

teraz utworzyć nową zakładkę na placu zabaw i utworzyć nowy tweet:

mutation createTweet { 
    createTweet(
    title: "#GraphQL Subscriptions are awesome!" 
    authorId: "<id-from-above>" 
) { 
    id 
    } 
} 

powinien pojawić się nowy event pojawiały się w drugiej zakładce gdzie zapisałeś wcześniej.

Answer 4

Wygląda na to, że tak naprawdę nie tworzysz serwera websocket. użyj SubscriptionServer. Pamiętaj, że absolutnie NIE jest prawdą, że musisz mieć dedykowany port websocket (myślałem o tym raz), jak mówi davidyaha. Mam zarówno moje normalne zapytania i subskrybcje na tym samym porcie.

import { createServer } from 'http'; 
import { SubscriptionServer } from 'subscriptions-transport-ws'; 
import { execute, subscribe } from 'graphql'; 
import { schema } from './my-schema'; 

// All your graphQLServer.use() etc setup goes here, MINUS the graphQLServer.listen(), 
// you'll do that with websocketServer: 

// Create WebSocket listener server 
const websocketServer = createServer(graphQLServer); 

// Bind it to port and start listening 
websocketServer.listen(3000,() => console.log(
    `Server is now running on http://localhost:3000` 
)); 

const subscriptionServer = SubscriptionServer.create(
    { 
    schema, 
    execute, 
    subscribe, 
    }, 
    { 
    server: websocketServer, 
    path: '/subscriptions', 
    }, 
);