Make socket auto disconnect on page hide optional

[majeed-platogo]

The block below is useful for handling autoconnection/disconnection when users leave or enter the tab

if (phxWindow && phxWindow.addEventListener) {
      phxWindow.addEventListener("pagehide", (_e) => {
        if (this.conn) {
          this.disconnect();
          awaitingConnectionOnPageShow = this.connectClock;
        }
      });
      phxWindow.addEventListener("pageshow", (_e) => {
        if (awaitingConnectionOnPageShow === this.connectClock) {
          awaitingConnectionOnPageShow = null;
          this.connect();
        }
      });
    }

But in our case, It clashes with our own listener that does this among other things. That's why we're introducing disableWindowEventListeners to make this optional

[SteffenDE]

If we add this, I'd rather call it something like disableAutoDisconnectOnPageHide to be explicit. LiveView passes unknown options to Phoenix and uses a lot of window event listeners, so this might be confusing.

cc @chrismccord

[majeed-platogo]

Thank you for the feedback @SteffenDE. I've renamed the boolean

[SteffenDE]

Nice! One question: since this is the first time someone needs to adjust this, did you try just registering your pagehide / pageshow listener before you create your Socket and call stopImmediatePropagation in there?

window.addEventListener("pagehide", (e) => {
  // prevent Phoenix from handling pagehide
  e.stopImmediatePropagation();

  // Custom code
  ...
});

const socket = new Socket(...);

As that might be enough already?

I'd also be interested in what kind of stuff you do in pagehide, probably push some extra events?

[majeed-platogo]

Hello @SteffenDE , No, I didn't do this.

This looks like a really good idea but I'm concerned that if there's some other package somewhere also listening for the pagehide event then this might cause some unexpected behaviour, right?

We do a bunch of tracking and also do some computations to determine the UI state when the user returns