Socket could not reconnect after IOS app comeback from background

[sonnd08]

Hi, we are using graphql-ws in an app using react-native-webview. It actually work quite well untill we switch to another app or put the app in background mode.

Expected Behaviour

1. The socket should keep reconnect or at least try to re-connect/re-init if needed.
2. In case re-connect/re-init, we would like to run a specific function to resync data after connect successfully.

Actual Behaviour
All subscription stop working and could not work even when we tried to resubscibe.
We got this after reopen the app.

WebSocket connection to 'wss://my-domain.com/subscription' failed: The operation couldn’t be completed. (kNWErrorDomainPOSIX error 53 - Software caused connection abort)

TCL: -> Socket closed -> code: – 1006

Further Information

• Seem like IOS will kill socket connection when app is in background state.
• I have read about the issue with safari and tried using ping/pong with client.terminate() and it is not working because the socket connection is completely shutdown, not in pending state.
• We managed to re-init socket when reopen app by detect close_code === 1006 then re-register all previous subscription like bellow but feel like it should be a cleaner, better and easier way to do this.
  I think we should have a method allow re-init all socket connection and subscriptions when needed. Any ideas?

this.client = createClientWithOnReconnected({
      ...options,
      keepAlive: 5000, // send ping message every 5s
      retryWait: () => 2000,
      retryAttempts: 30,
      on: {
        connecting: () => console.log("Connecting to WebSocket"),
        connected: (socket) => {
          console.log("Connected to WebSocket server", socket);
        },
        error: (code, reason) => {
          console.log(`Socket error:`, { code, reason });
        },
        closed: ({ code, reason }) => {
          console.log(`Connection closed:`, { code, reason });
          if (code === 1006) {
            // this unsubscribe all existing subscription and resubscribe them
            // when asking new subscription and no subscriptions existed, it will try to create new socket connection
            reRegisterAllSubsciption()
          }
        },
      },
    });

    this.client.onReconnected(() => {
      console.log("Socket: onReconnected");
      refreshData()
    });

[enisdenjo]

hey there, this feels like an react-native/ios specific issue.

The socket should keep reconnect or at least try to re-connect/re-init if needed.

It doesn't? You can control the reconnection mechanisms with the various retry properties in the client options.

In case re-connect/re-init, we would like to run a specific function to resync data after connect successfully.

You can simply hook into the on.connected event and perform whatever action.

All subscription stop working and could not work even when we tried to resubscibe.
We got this after reopen the app.

Close code 1006 is a WebSocket spec close code which is used for abrupt and unhandled closures - it can mean many things.

I have read about the #290 and tried using ping/pong with client.terminate() and it is not working because the socket connection is completely shutdown, not in pending state.

Well if the socket connection does not exist in the first place, there is nothing to close/terminate. The terminate method is for stuck connections.

I think we should have a method allow re-init all socket connection and subscriptions when needed. Any ideas?

The client already does this. All active subscriptions will re-subscribe when the client reconnects automatically. Does this not happen?

P.S. I've also noticed that you're not using the retryWait option correctly. You're supposed to time the returned promise as a wait signal, not return a number.

- retryWait: () => 2000,
+ retryWait: () => new Promise((resolve) => setTimeout(resolve, 2000)),

[sonnd08]

It doesn't? You can control the reconnection mechanisms with the various retry properties in the client options.

Yes it does not trying to reconnect in this case.

The same thing happens when trying on safari (mac), subscribe something then disconnect the internet and wait a while, after reconnect old socket closed with code 1006 and it won't try open new socket connection.
(But It works fine in chrome)

WebSocket connection to 'wss://mydomain/subscription' failed: The operation couldn’t be completed. (kNWErrorDomainPOSIX error 60 - Operation timed out)

[Log] Socket error: – {code: Event, reason: undefined}
{code: Event, reason: undefined}Objectcode: Event {isTrusted: true, type: "error", target: WebSocket, currentTarget: null, eventPhase: 0, …}Eventreason: undefinedObject Prototype
[Log] Connection closed: – {code: 1006, reason: ""}
[Log] TCL: -> Socket closed -> code: – 1006

My old code to reproduce issue in mac safari

let socketInstance;
    let pingTimeout;
    this.client = createClientWithOnReconnected({
      ...options,
      keepAlive: 5000, // send ping message every 5s
      retryWait: () => new Promise((resolve) => setTimeout(resolve, 2000)),
      retryAttempts: Infinity, // already tested others number like 30, 300, 3000
      on: {
        connecting: () => console.log("Connecting to WebSocket"),
        connected: (socket) => {
          console.log("Connected to WebSocket server", socket);
          socketInstance = socket;
        },
        error: (code, reason) => {
          console.log(`Socket error:`, { code, reason });
        },
        closed: ({ code, reason }) => {
          console.log(`Connection closed:`, { code, reason });
        },
        ping: (fromServer) => {
          if (fromServer) return; 
          
          console.log(`TCL: -> Ping send`);
          pingTimeout = setTimeout(() => {
            if (socketInstance.readyState === WebSocket.OPEN) {
              console.log(
                `TCL: -> WebSocketLink -> pingTimeout -> close socket`
              );
              socketInstance.close(4408, "Request Timeout");
            }
          }, 2000); // wait 2 seconds for the pong and then close the connection
        },
        pong: (fromServer) => {
          if (fromServer) {
            console.log(`TCL: -> Pong received`);
            clearTimeout(pingTimeout);
          }
        },
      },
    });

[enisdenjo]

As you already mentioned, this is a known Safari issue. Have you tried the "Client usage with abrupt termination on pong timeout" recipe?

[sonnd08]

I tried with client.terminate()and it does not working. Still the same issue.

[enisdenjo]

Can you please make me a repro repository/codesandbox that I can clone and test?

[sonnd08]

Yes, I will do this in weekend or next weeks