How can I inform my user if a GraphQLWsLink is disconnected?

I have multiple subscriptions in my angular app in a service like this:

getNewHouses(name: String): Observable<Partial<House>[] | void> {
return this.apollo.subscribe<{ onNewHouses: RemoteHouse[] }>({
query: newHousesSubscription,
fetchPolicy: "no-cache",
variables: {
name: name,
}
}).pipe(map((result) => {
console.log("onNewHouses", result);
if (result.data) {
return result.data.onNewHouses.map(House.partialFromRemote);
}
}), catchError(this.errorHandler.catchGraphQLErrors));
}`



And this on my GraphQLWsLink:

on: {
connected: (socket) => {
console.log('Connected to websocket');
this.maxRetries = 20;
this.retryLock = false;
activeSocket = socket as WebSocket;
},
ping: (received) => {
if (!received)
// sent
timedOut = window.setTimeout(() => {
if (activeSocket.readyState === WebSocket.OPEN) {
console.log('Closing websocket due to timeout');
activeSocket.close(4408, 'Request Timeout');
}
}, 5000); // wait 5 seconds for the pong and then close the connection
},
pong: (received) => {
if (received) clearTimeout(timedOut);// pong is received, clear connection close timeout
},


How can I inform my user that the websocket is timed out? I would like to use the subscribe on the service and maintain my architecture. I would like to know if I can for example send a message into my subscribers like "closed" or an error while the retries of the websocket are going. So I can display a message to my users. Any help would be appreciated!

In the meanwhile I made a service that's like this:

import { Injectable } from '@angular/core'; import {BehaviorSubject} from "rxjs";

@Injectable({
providedIn: 'root'
})
export class WebsocketStateManager {

public websocketStateSubject = new BehaviorSubject<boolean>(true);
constructor() { }

/**
* Updates the websocket state to the provided boolean, true for connected, false for disconnected
* @param state boolean value to update the websocket state
*/
updateWebsocketState(state: boolean) {
this.websocketStateSubject.next(state);
}

}


And I would call it inside the setTimeout, the thing is this is only working because I only have 1 Websocket connection if I had two this service would act like a singleton. I would like to send something like an error to the Observable and then if get that error I would show the user a message, then if with the retries the websocket starts working again I would hide it.

Continue reading...