Using subscriptions with express on the same port

The current docs have a example on how to do this here of importance there is a note that says:

// ⚠️ Pay attention to the fact that we are calling `listen` on the http server variable, and not on `app`.
httpServer.listen(PORT, () => {
  console.log(`🚀 Server ready at http://localhost:${PORT}${server.graphqlPath}`)
  console.log(`🚀 Subscriptions ready at ws://localhost:${PORT}${server.subscriptionsPath}`)
})

Unfortunately using the httpServer to listen on a port disables all the express routing on that port.

I’ve been getting around this by doing something like:

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

app.listen(differentPort, () => console.log(`listening on http://localhost:${port}`));

But this isn’t really ideal, is there a way to get the subscriptions and the express application to work on the same port?

Additional Information

I found what appears to be older documentation setting up the apollo-server to do this exact thing:

import express from 'express';
import bodyParser from 'body-parser';
import { graphqlExpress } from 'apollo-server-express';
import { createServer } from 'http';
import { execute, subscribe } from 'graphql';
import { PubSub } from 'graphql-subscriptions';
import { SubscriptionServer } from 'subscriptions-transport-ws';
import { myGraphQLSchema } from './my-schema';

const PORT = 3000;
const app = express();

app.use('/graphql', bodyParser.json(), graphqlExpress({ schema: myGraphQLSchema }));

const pubsub = new PubSub();
const server = createServer(app);

server.listen(PORT, () => {
    new SubscriptionServer({
      execute,
      subscribe,
      schema: myGraphQLSchema,
    }, {
      server: server,
      path: '/subscriptions',
    });
});

However, the apollo-server-express package no longer exports a graphqlExpress module and instead only has ApolloServer, ServerRegistration, registerServer. So far I’ve only used ApolloServer with installSubscriptionHandlers to setup basic subscriptions and haven’t looked at the other methods. Is there a way to setup subscriptions on the same port as the express application or am I just chasing a dead end?

[Elfayer]

Solution here: https://www.apollographql.com/docs/apollo-server/features/subscriptions.html#middleware

const http = require('http');
const { ApolloServer } = require('apollo-server-express');
const express = require('express');

const PORT = 4000;
const app = express();
const server = new ApolloServer({ typeDefs, resolvers });

server.applyMiddleware({app})

const httpServer = http.createServer(app);
server.installSubscriptionHandlers(httpServer);

// ⚠️ Pay attention to the fact that we are calling `listen` on the http server variable, and not on `app`.
httpServer.listen(PORT, () => {
  console.log(`🚀 Server ready at http://localhost:${PORT}${server.graphqlPath}`)
  console.log(`🚀 Subscriptions ready at ws://localhost:${PORT}${server.subscriptionsPath}`)
})

[gforge]

As part of debugging a similar issue I wrote a minimal Express + Apollo server app with subscriptions, you can find it here: https://github.com/gforge/subscription_example It seems to work with shared port. Hope it helps!