Remaking websocket connections

Question

I'm a little concerned with the way that I am currently making connections to my websocket.

In one page of my app I have:

var socket = io.connect('http://my.ip.address' + ':' + '80' + namespace);
socket.on('connect', function () {
            socket.emit('join', { room: 'venue_' + venue_id });
        });

After this I receive some data through the socket and then move to another page. After this second page runs, I once again return to the first page where the socket code above runs again.

I am wondering if this is going to cause any kinds of issues? Should I try and connect at an earlier stage so the connection is not made multiple times? If so, is it possible to pass the socket variable through javascript?

I am using flask-socketio on the server.

Thanks for your help.

Answer 1

webSocket connections do not and cannot survive from one page to the next. When the browser moves to a new page, any webSocket connections in that original page are closed.

So, there is no way to pass a webSocket connection from one page to the page that replaces it.

Thus, it is a perfectly normal way to use a webSocket connection is to just create the socket when the page loads. Creating a webSocket connection is not a heavy weight operation. It's only sightly more overhead to initially connect the webSocket than one Ajax connection. Of course, after it is connected, it is very efficient to send data over it (more efficient than making a new Ajax request to send the same data).

Now, as for your specific questions:

I am wondering if this is going to cause any kinds of issues?

No, it will not cause issues. Connecting whenever the page loads is a normal way of using webSockets.

Should I try and connect at an earlier stage so the connection is not made multiple times?

No, you cannot pass a connection from one page to the page that replaces it.

If so, is it possible to pass the socket variable through javascript?

It can be passed via Javascript to other functions within the same page, but it cannot be passed to the page that will replace this one.

Answer 2

It is expected that each page creates its own socket connections, there is actually no way around that, as @jfriend00 explains in his answer.

While this will not cause any issues, one of the main reasons to use WebSocket and Socket.IO is to have low latency and low overhead exchanges between the server and the client. If your application is designed in a way that it requires to load new pages often, then these benefits will be partially shadowed by the delays and overhead of having to often throw away an existing connection only to re-establish it when the next page loads. My recommendation is that you evaluate if the single-page application model might be a better option for your application. With this model, the whole application loads with the initial page and then will not need to redirect to other pages, thus allowing you to keep your Socket.IO connection through the entire life of the application.

Good luck!