how to handle page reload in socket.io client chat applications

Question

I was implementing a chat application. I am not in server and the page which contains javascript file can be any html page on file system with the embeded javascript/socket.io in it.

Now the problem is page reload by definition will always trigger a new request resulting in new socket.

$(document).ready(function() {

var messages = [];
socket = io.connect(connectionString);
///next code sequence
});

what I want to achive is even after page reload my session should persist. now the classic way to implement is.

1) I can keep a classic implementation. fire disconnect; once done I can actually keep the previous sessionid and from database could refetch the previous session/ chats and continue.

but the above approach is very clumsy and time consuming.

is there anything better that can be done ????

Answer 1

webSockets will disconnect and reconnect anytime a page is reloaded or anytime the user navigated. As it sounds like you know, that is just how they work.

If you want a persistent session for the user, then you can simply do the same thing that any web page would do to identify a session or user using a cookie. If your site has user login, when a user connects, you grab that user's identify from their login cookie and use that as a persistent user identifier for any webSocket connection. Since any webSocket connection starts with an http request, that cookie will always be there.

If/when the user reloads or navigates to another page on the site, the webSocket will disconnect and when it reconnects, the user login cookie will again be there.

---

If you don't already have a user login cookie, then you can detect that there is no user identifying cookie when the user first connects and you can set such a cookie so that it is there for future reconnects. The identifier in this cookie will then be a key into your database so you can correlate a browser with a given user's data.

If your server needs to know when a user is actually gone, then you can implement some sort of server-side timeout and when a user remains disconnected for some period of time (e.g. some number of minutes), then it is clear that the user is not just momentarily navigating between pages and you can mark them as logged out now. But, on a normal reload or page navigation, the user will always reconnect within a few seconds of the disconnect, so your server won't log them out.

---

If you have data that is truly client-side only, you can also store that in local storage in the browser to improve efficiency when going from page to page (so they data can be stored and then read locally rather than getting it from the server), but that makes the data only available in that specific browser on that specific computer which is often not what you want if the data is tied to a user login and you want the data available to that user no matter which browser or computer they login on.