How to solve webSocket error in GraphQL subscription server

Question

I basicely created express server and then added SubscriptionServer.

/*
*   GRAPHQL SERVER
*/

const graphqlServer = express()
graphqlServer.use(cors())
graphqlServer.use('/graphql', bodyParser.json(), graphqlExpress({ schema: schema }))
graphqlServer.get('/graphiql', graphiqlExpress({ endpointURL: '/graphql', subscriptionsEndpoint: `ws://localhost:${process.env.GRAPHQL_PORT}/subscriptions`, }))

graphqlServer.listen(process.env.GRAPHQL_PORT, () => {

  SubscriptionServer.create(
    {
      schema,
      execute,
      subscribe,
    },
    {
      server: graphqlServer,
      path: '/subscriptions',
    },
  )

  console.log(`
    - GraphQL server listening on http://localhost:${process.env.GRAPHQL_PORT}
    - GraphQL subscriptions listening on ws://localhost:${process.env.GRAPHQL_PORT}/subscriptions
    `)
})

Than when I tryied to connect on GraphQLi subscriptions server it throwed an error.

WebSocket connection to 'ws://localhost:10005/subscriptions' failed: Connection closed before receiving a handshake response

I do not know what that mean nor where is problem.

If anyone did similar project it would be super helpful to maybe send me github link :)

Thanks a lot

Answer 1

I have a TypeScript example that looks something like this:

import * as express from 'express'
import * as cors from 'cors'
import * as bodyParser from 'body-parser'
import { graphiqlExpress, graphqlExpress } from 'apollo-server-express'
import { schema } from './schema'
import { createServer } from 'http'
import { SubscriptionServer } from 'subscriptions-transport-ws'
import { execute, subscribe } from 'graphql'

const server = express()

const PORT = Number(process.env.PORT) || 3000

const GRAPHQL_ROUTE = '/graphql'
const GRAPHIQL_ROUTE = '/graphiql'
const GRAPHQL_SUBSCRIPTIONS_ROUTE = '/subscriptions'

server.use(
    '*',
    cors({
        origin: `http://localhost:${PORT}`,
    })
)

server.use(
    GRAPHQL_ROUTE,
    bodyParser.json(),
    graphqlExpress({
        schema
    })
)

server.use(
    GRAPHIQL_ROUTE,
    graphiqlExpress({
        endpointURL: GRAPHQL_ROUTE,
        subscriptionsEndpoint: `ws://localhost:${PORT}${GRAPHQL_SUBSCRIPTIONS_ROUTE}`
    })
)

const webSocketServer = createServer(server)

webSocketServer.listen(PORT, () => {
    console.log(`GraphQL api on http://localhost:${PORT}${GRAPHQL_ROUTE}`)
    console.log(`GraphiQL interface on http://localhost:${PORT}${GRAPHIQL_ROUTE}`)
    console.log(`WebSocket Server on ws://localhost:${PORT}${GRAPHQL_SUBSCRIPTIONS_ROUTE}`)

    new SubscriptionServer({
        execute,
        subscribe,
        schema
    }, {
        server: webSocketServer,
        path: GRAPHQL_SUBSCRIPTIONS_ROUTE
    })
})

The idea is: you create a webSockerServer(from 'http') and send in the express server as param.