Add Reconnection Logic to Websocket

[Alek99]

Right now there is no reconnecting logic for the websocket. After some investigation, I think we can use the visibilitychange event to re-establish a connection if there isn't one already.

One the tab is visible ie the use clicks on the tab for the reflex app we would do some check and re establish the connection.

Some short example code of how its done in another context:

document.addEventListener('visibilitychange', function() {
  // Check if the tab is now active
  if (document.visibilityState === 'visible') {
    if (!socket.connected) {
      console.log('Socket is disconnected, attempting to reconnect...');
      socket.connect();
    }
  }
});

For those interested in tackling this ticket we probably need to edit https://github.com/reflex-dev/reflex/blob/main/reflex/.templates/web/utils/state.js to incorporate this logic.

[Yummy-Yums]

hey @Alek99 , dyu mean Once the tab is visible ie the user clicks on the tab ? and by tab , you mean browser tab?

[Alek99]

hey @Alek99 , dyu mean Once the tab is visible ie the user clicks on the tab ? and by tab , you mean browser tab?

Correct on both, when the user clicks on the tab and browser tab

[Yummy-Yums]

hey @Alek99 , dyu mean Once the tab is visible ie the user clicks on the tab ? and by tab , you mean browser tab?

Correct on both, when the user clicks on the tab and browser tab

apart from the obvious impl you stated above and incorprating it in const connect in state.js , is there any thing else to account for ? I wanna work on this

[Alek99]

That pretty much it, just needs to reconnect if the tab is old an/or socket connection is lost.

I don't want to rush you on this ticket we really appreciate you wanting to contribute, but this issue is on the higher priority side for us so ideally looking to get this in for the next release if possible. I can suggest other issues if this timeline doesn't work for you, no worries.

[Yummy-Yums]

when is the next release?

[masenf]

Cut off for 0.4.3 is Thursday Feb 29; Release on March 4

If it's after the 29th, then it will go into the next release on March 11

[Yummy-Yums]

what dyu mean by a tab is old? I thought only it was only reconnecting.

this is what I had in mind, is it valid? i could raise the PR by tmr morning GMT

[Alek99]

After a while the socket loses connection with the tab, that's what I meant by old tab

[Yummy-Yums]

ohk, i'd raise the PR tmr, thanks.

After a while the socket loses connection with the tab, that's what I meant by old tab

you mean if the user spends a long time outside the "reflex tab" , the connection closes and doesn't reconnect, correct ?

[Alek99]

ohk, i'd raise the PR tmr, thanks.

After a while the socket loses connection with the tab, that's what I meant by old tab

you mean if the user spends a long time outside the "reflex tab" , the connection closes and doesn't reconnect, correct ?

Thanks! Yeah that's correct