How to Maintain a Websockets Connection Between Pages

How to maintain a WebSockets connection between pages?

The global scope you mentioned is always related to the JavaScript Context, and a Context is created for each windows (and destroyed when the document is unloaded from the memory). Therefore, your effort are useless: you can't keep a connection opened if the user change page.
Of course you can have your webapp as "single page" application, where all the data are loaded using XMLHttpRequest / ajax / WebSocket. So, leaving the page means leaving / shutdown the application, and makes sense close the socket.

Another old approach could be put your pages in a frame, where the user navigate only in the frame (even if it takes the whole size of the window). In that way, you can create your WebSocket in the top most window, that is never changed (that also means the URL showed in the location bar will be always the same).

Said that, I agreed with @dystroy: your application should be always able to handle this scenario - the user could have some network problem and lost the connection for a moment, even if it doesn't leave the page.

How to make persistent web socket connection across page refresh in a secure way in ReactJS?

I am not sure if this works because it would be kind of a security breach to be able to let the user connected even though he is not on your page. (Because as you are refreshing, you leave the page and re-enter it).

Your best bet maybe something with a service worker that can run in the background :)

Since you are using Web Sockets it would be a good idea to use a SharedWorker to create a new thread for your Web Sockets. The difference between a normal WebWorker and a SharedWorker is that the web worker will create a new session in each tab or browser when loading the page, whereas the shared worker will use the same session in each tab. So all of your tabs or windows will have the same worker and same Web Socket connection to work with.

I quoted from this answer which will probably point you to the right direction: https://stackoverflow.com/a/61866896/11665341

How keep a Websocket connection persistent, even after page refresh?

Simple answer - best solution is to change your server part, so it can handle connection lost and recovery (And use cookies to keep "session id" or something else).

As I cannot see any requirement to achive this literally. And even more - you can loose connection not because of referesh but because of connection problems (But you can figure out which of them happened)

Reusing websockets between pages?

The answer is no.

Even if the socket is not explicitly closed by calling mySocket.close();, the socket will be closed by the browser on reload.

I tried storing the Web Socket object in local storage and using it to retrieve data again. The object returned is valid, but the connection in not there anymore. Because, when the page reloads, the socket is ungracefully terminated.

Message at server side says:

[Errno 10053] An established connection was aborted by the software in your host machine

There you go...

Websocket across pages JavaScript

You can do this by opening the WebSocket connection from a shared background Web worker.

The WebSocket connection will stay open when at least one tab is still active to the given origin (of the shared Web worker).

I know that Chrome and IE11 support opening WebSocket connections from dedicated Web workers. Firefox does not currently. I don't know which browsers support WebSocket connection from shared Web workers (which is what you'd need).

Websocket: maintain user session after page reloading

To eliminate the need to authenticate a WebSocket connection upon each new connection establishment you can use cookies.

Authenticate the WebSocket connection upon first time, set cookie on the WebSocket connection, and recheck the cookie upon a new connection.

This requires a WebSocket server that allows to read and set cookies on a WebSocket connection.

If the WebSocket connection is served from the same origin as the HTML page containing the JavaScript that opens the WebSocket connection, you could also use a "normal" HTML form based login plus cookie procedure:

1. User opens "login.html", which contains a HTML form for login
2. User enters username/password, which submits the HTML form via HTTP/POST to some URL
3. The server checks the credentials, and when successful, generates a random cookie, stores the cookie, and sets the cookie on the HTML page returned from the HTTP/POST
4. This latter returned page then opens a WebSocket connection to the server (which is on same origin, and hence the previously set cookie is set)
5. The WebSocket server in the opening handshake checks if there is a cookie, and if the cookie is stored in the DB for logged-in users
6. If so, the WebSocket connection succeeds. If not, the WebSocket server does not establish a connection, but redirects the user to 1.

Trying to keep socket.io connection same between pages. Is there a framework that would allow me to do this?

I won't go into detail on the html and css files as that's not necessary. The main page, or parent page (index.html) just needs this javascript file to make the socket.io-client connection.

var io = io();

function get_socket() {
    console.log("Return socket connection to iframe page");
    return io;
}

// handles server telling client to change page url in iframe
io.on("page", (page) => {
    $("#iframepage").attr("src", page);
    console.log("Page change: " + page);
});

In the html file I include jQuery and the socket.io-client.

When the iframe loads up the javascript files they can call the parent page for the socket connection just as simple as:

var socket = parent.get_socket();

When the iframe is changed then all the .on commands are refreshed. This is great for a single page application and logging in as when the tab/browser or app is closed even the server can catch the disconnect event.

---

Related Topics