How to close the websocket connection from client side with apollo link

[edwardfeng-db]

Hi, I'm trying to make the websocket connection closed when the tab is idle/hidden, and make it reconnect(lazily) when the tab is active again. I'm wondering how can I do that with graphql-ws on the client side? Thanks! I'm setting up this client following Client Usage with Apollo

[enisdenjo]

Hmm, this would require a combination of a graceful restart and timing the retryWait client option. In essence, something like this:

import { createClient } from './client';

// will be reassigned once the client connects
let gracefullyRestart = () => {
  // call me when the tab loses focus
};

const client = createClient({
  url: 'wss://graceful.restart/is/a/non-fatal/close-code',
  retryWait: () =>
    new Promise((resolve) => {
      // resolve me when the tab gets focus
    }),
  on: {
    connected: (socket) => {
      gracefullyRestart = () => {
        if (socket.readyState === WebSocket.OPEN) {
          socket.close(4205, 'Client Restart');
        }
      };
    },
  },
});

// all subscriptions through `client.subscribe` will resubscribe on graceful restarts

The client resubscribes only when the socket closes with a non-fatal code, so what you are doing with the above example is performing a graceful restart and making the client retry only when the retryWait resolves (essentially when the tab gets focus).

However, I must say that I absolutely DO NOT recommend doing this! Its very hacky and messes with other types of restarts (like actual connection problems and abrupt closures).

Furthermore, I wouldnt ever close a connection just because the browser lost focus. You need the background updates to better the UX and to keep the user up-to-date as much as possible.

I must ask, out of curiosity, why would you want to close the connection when the browser tab changes? And a follow-up question, are you sure you really need this?

[enisdenjo]

I dont think that this is a smart way of reducing the load, mainly because you're sacrificing the user experience by cutting him off from real-time as soon as they put the browser in the background.

You might be better off reducing the load by being smart about your subscriptions instead (when to subscribe and for how long). By doing this you leverage the default client lazy client mode and have the client close the connection to the server as soon as there are no subscriptions running (and connect again on first new subscription). Furthermore, you're keeping the user up-to-date even if he switched briefly to Twitter to check his notifications.

About the question if I have other suggestions in achieving this - no, I'd even recommend not doing this. 😄

[edwardfeng-db]

Thanks, meanwhile, is there anyway to manually close the websocket connection? It seems like I can call client.dispose? I tried calling it but it doesn't seem to close the connection.

[enisdenjo]

Hmm, are you sure? client.dispose must close the connection. If it does not, please open an issue and provide a minimal repro or an elaborate explanation.

Also, if you want to gracefully restart you must use client.on.connection socket and close it directly (exactly as I showcased in the original answer). A client.dispose disposes the client completely and you cannot reuse it anymore. You must make a new client afterwards.

[edwardfeng-db]

@enisdenjo If the client closes the connection when there's no subscription running in lazy mode, can you update the documentation on this? Right now it says Should the connection be established immediately and persisted or after the first listener subscribed., which I think doesn't really describe this functionality accurately .

[enisdenjo]

724d3a5 should describe the functionality a bit better. 😄