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

Question

I have a web application where a persistent connection from the server to it's clients (browser) is needed in order push news / updates to the clients in (near) real-time. This would not be so tricky if the navigation through some elements of the website would not cause complete page refreshs.

Polling (standard way or long polling) the server for news is not an option, since it results in often unnecessary request calls (because no news are available). Moreover news can rise up randomly. Therefore with the polling strategy the server would go down... For the websocket (bidirectional communication channel) the client and server have to accept the upgrade to websocket. A similar problem was discussed here, but no satisfying solution was found.

Data can survive a full page refresh by storing it in cookies or other ways:

• cookies
• window.name (www.thomasfrank.se/sessionvars.html)
• localstorage: stores the data with no expiration date. The data will not be deleted when the browser is closed. Example: Perseverance (github.com/viseztrance/perseverance)
• PersistJS: Cross Browser Client-Side Persistent Storage without cookies Storing the Javascript object is done, by serialize / deserialize the object.

Is there something that works similar for „running“ objects like websockets?

Some possibilities I thought of, are:

• An old style „solution“ would be to put the whole web application in an iFrame and add the connection to the outermost window (of the frame). This is not an option since it causes a lot of different other problems.
• Since HTML5 Share Web Workers exits, but because of the limited browser support this can also not be used.

So my question is: Is there a possibility / hack how I can keep my websocket connection open also if the page is refreshed? So that I don't have to reinitialize the connection to the server?

Answer 1

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)

Answer 2

I found an intereseting solution on https://crossbario.com/blog/Websocket-Persistent-Connections/. It can be achieved via SharedWorker. In your page you start it via:

var worker = new SharedWorker("worker.js");
 
worker.port.addEventListener("message", function(e) {
   // process messages
}, false);
 
worker.port.start();
 
worker.port.postMessage("myMessageContent");

and your worker.js part looks like this:

self.addEventListener("connect", function (e) {
   var port = e.ports[0];
   port.start();
 
   port.addEventListener("message", function (e) {
      port.postMessage("response");
   }, false);
 
}, false);

The full solution can be found on https://github.com/goeddea/scratchbox/tree/master/test_cases/shared_webworkers

Unfortunately according to https://caniuse.com/sharedworkers - SharedWorker works only in desktop versions of Chrome, Edge, Firefox and Opera.