Could not connect to websocket endpoint

Question

Running an express server with apollo and trying to add subscriptions, but I keep running into this error on the playground Could not connect to websocket endpoint ws://localhost:4000/graphql. Please check if the endpoint url is correct.. I'm not sure what I'm missing. Here's the server code:

const { ApolloServer, PubSub } = require('apollo-server-express');
const mongoose = require('mongoose');
const app = require('./app');

const resolvers = require('./graphql/resolvers');
const typeDefs = require('./graphql/typeDefs');

const pubsub = new PubSub();
const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: ({ req }) => ({ req, pubsub }),
});

const port = process.env.PORT || 4000;
server.applyMiddleware({ app });

mongoose
  .connect(process.env.DB_URI_DEV, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useCreateIndex: true,
  })
  .then(() => {
    console.log('DB Connected');
    return app.listen(port);
  })
  .then(() => {
    console.log(`We live now boys at ${port}`);
  })
  .catch((error) => {
    console.log(error);
  });

Answer 1

Ok, got it to work. To enable subscriptions I had make a server via http's createServer and pass the instance into installSubscriptionHandlers. Working code:

const pubsub = new PubSub();
  const server = new ApolloServer({
    typeDefs,
    resolvers,
    context: ({ req, connection }) => ({ req, pubsub, connection }),
  });

  const httpServer = http.createServer(app);

  const PORT = 4000;
  await server.start();
  server.applyMiddleware({ app });
  server.installSubscriptionHandlers(httpServer);

  try {
    httpServer.listen(PORT);
    console.log(`server ==> Look alive boys`);
  } catch (error) {
    console.log('Apollo server error');
    throw new Error(error);
  }

  try {
    await mongoose.connect(process.env.DB_URI_DEV, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
      useCreateIndex: true,
    });
    console.log('server ===> DB Connected');
  } catch (error) {
    console.log('DB error');
    throw new Error(error);
  }