client.js

import "babel-polyfill"
import { execute, makePromise } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import gql from 'graphql-tag';
import { WebSocketLink } from 'apollo-link-ws';

import { split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';

const uri = 'http://localhost:4040/graphql';
const httpLink = new HttpLink({ uri });

// Set up subscription
const wsLink = new WebSocketLink({
    uri: `ws://localhost:4000/graphql`,
    options: {
        reconnect: true
    }
});

console.log(wsLink.subscriptionClient)

wsLink.subscriptionClient.on("connecting", () => {
    console.log("connecting");
});

wsLink.subscriptionClient.on("connected", () => {
    console.log("connected");
});

wsLink.subscriptionClient.on("reconnecting", () => {
    console.log("reconnecting");
});

wsLink.subscriptionClient.on("reconnected", () => {
    console.log("reconnected");
});

wsLink.subscriptionClient.on("disconnected", () => {
    console.log("disconnected");
});

wsLink.subscriptionClient.maxConnectTimeGenerator.duration = () => wsLink.subscriptionClient.maxConnectTimeGenerator.max;

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const link = split(
    // split based on operation type
    ({ query }) => {
        const { kind, operation } = getMainDefinition(query);
        return kind === 'OperationDefinition' && operation === 'subscription';
    },
    wsLink,
    httpLink,
);

const httpOperation = {
    query: gql`query { 
        hello 
    }`,
};

const wsOperation = {
    query: gql`subscription{
        newMessage
      }`,
};

// execute returns an Observable so it can be subscribed to
execute(link, wsOperation)
    .subscribe({
        next: data => console.log(`received ws data: ${JSON.stringify(data, null, 2)}`),
        error: error => console.log(`received error ${error}`),
        complete: () => console.log(`complete`),
    })

// For single execution operations, a Promise can be used
makePromise(execute(link, httpOperation))
    .then(data => console.log(`received data ${JSON.stringify(data, null, 2)}`))
    .catch(error => console.log(`received error ${error}`))

server.js

const { ApolloServer, gql, PubSub } = require('apollo-server');

const pubsub = new PubSub();
const SOMETHING_CHANGED_TOPIC = 'something_changed';

const typeDefs = gql`
  type Query {
    hello: String
  }
  type Subscription {
    newMessage: String
  }
`;

const resolvers = {
    Query: {
        hello: () => 'hello',
    },
    Subscription: {
        newMessage: {
            subscribe: () => pubsub.asyncIterator(SOMETHING_CHANGED_TOPIC),
        },
    },
};

const server = new ApolloServer({
    typeDefs,
    resolvers,
});

server.listen().then(({ url }) => {
    console.log(`Server ready at ${url}`);
});

//publish events every second
setInterval(
    () => {
        const message = {
            newMessage: new Date().toString(),
        }

        pubsub.publish(SOMETHING_CHANGED_TOPIC, message)
        console.log("Send", message)
    },
    1000,
);