Hold Websocket-Connection over several pages

Question

I need an idea in designing a complex html/javascript(jQuery) system communicating with my C++-Webserver.

Until now i have a main index.html and I load Submodules by events:

$(".MainButton").click(function(){
   $("#swap").load($(this).attr('alt'));
});

The problem is now that every Submodule needs a Websocket Connection and I dont want to open a new Connection for every Submodule that I am loading.

Is it possible to open a global Websocket connection..

var ws = new WebSocket("ws://localhost:800/stream");

.. and use ws in every subpage?

Thank you very much.

Answer 1

Your question's title and content are different. As for the content, if you load HTML fragments (rather than page) by jQuery's load method, these fragments are merged into the document and only that document exists as a result. If it's your case, why don't you just open that connection on main.html by making ws a global variable of window and use it in submodules? As long as submodule's URI is same origin or cross origin with CORS, it can access and manipulate ws of main.html.

However, if you insist connection should be held over several pages including a refresh of main.html as your question's title literally, it's not possible for now unless you make use of Single-page application . For the details, see the followings:

• How to maintain a WebSockets connection between pages?
• Do Shared Web Workers persist across a single page reload, link navigation
• http://tavendo.com/blog/post/websocket-persistent-connections/