Sockets Stop When Navigating to a Page Using Browser Back Button

Hi.
We have a page (A) which has socket element in NodeJS SPA.
If I click on some link on page (B) to go to A, the socket connection is established and everything works well.
Now, if I navigate to another page from A to say C, sockets stop working. Which is good.
Next, if I press browser back button while on C, page A loads but socket connection is not established. Breaking the page.

What am I missing in this setup here?

Disclaimer: I’ve never used websockets

  1. Is the socket connection HTML tag inside the fragment being loaded?
  1. Is the socket connection HTML tag inside the fragment being loaded?

My theory says “Yes” on point 1, and “No” on point 2 - did I guess right? It’s just a theory though :stuck_out_tongue:

Under the hood these are not page loads, but rather fragment loads

I am a bit confused on the context of your points. So here’s what you might be looking for:
Page A - has socket component.
Page B - no socket stuff.
Page C - no socket stuff.

Yes. But not sure if that is the reason for this issue.
B -> A is fragment load, where socket connects.
A -> C is another fragment load, where socket gets disconnected.
C -> A is not a fragment load, since browser is just showing previous page from cache or something (not entirely sure)… which is why socket connection is not invoked again.

Does page A and page B uses the same base template?

Interesting. So, just to confirm, from page B to A it’s an internal/SPA link?

Ok, correct it’s not a fragment load, but it’s still handled by Wappler’s framework as this is not a browser-native behaviour (Wappler’s SPA is using pushstate and popstate)

If you answered Yes to the 1st question open a bug report

Yes.

Yes.

Did not know that.

I just wanted to check if my config is incorrect somehow, so used How To category.

Bump. @patrick

Bump.

Might be related to this:

From what I understand, the behaviour of sockets disconnecting on navigation is ok. Which is what is happenning in the linked post.
But, in this case, the problem is that when navigating back to the page, socket does not automatically reconnect.

1 Like

Does it only happen with the back button, what if you normally navigate from page C back to page A?

Normal navigation is a forward navigation, right? Using browser.goto or anchor link - that works fine. Socket gets connected again.

I think it has to do with the bfcache of the browser, it should normally not do this when there is a websocket connection open. When it uses the bfcache it restores the page from a local cache instead of reloading it.

Browser Back/Forward Button History Navigation Cache (bfcache) - CodingShower

I’m not sure what exactly can be done against it, have to do some more research for this.

Thanks for the info.
Its not a major inconvenience at the moment, because of low number of active users, but still a problem. Hope you can find a solution for this.

Minor bump to research this @patrick. :grin:

@patrick Any update on this?

Another bump. @patrick

Bump.

javascript - Getting socket.io to reconnect when re-entering the page with the back button - Stack Overflow

You could try the answer given there. I know it has to do with the bfcache of the browser but don’t have a direct solution for it.