When refreshing the web page, if keep the Socket unchanged?

Question

I am currently working on a web version of the chat system. When the user logs in, the socket will be connected, and the backend will save the socket at this time, and then communicate. But if the webpage is refreshed at this point, the socket connection will be lost. How can I keep the socket unchanged even after refreshing the web page?

export class SocketConnectionService {
  socket: io.Socket;
  
constructor() {
   this.socket = io.io(`http://localhost:3000/`);
   //How to keep this.socket unchanged after refreshed
     }
}

keep this.socket unchanged after refreshed

Answer 1

It's impossible. You cannot keep the same socket.io or webSocket client connection when the page is changed or refreshed. The browser simply does not do that. When a new page is loaded or the current page is refreshed, all resources from the previous page are closed and freed by the browser, including socket.io/webSocket connections.

So, your server has to expect a new socket.io connection from the newly loaded page. If you use cookies or a server-side session object, you can identify, on the server, when a connection is coming from a client that you have previously seen and the server can then act accordingly to realize that this is just a previous client reconnecting on a new page.

So you could restore connection to backend with the use of token authentication (e.g JWT from localStorage), though it will be technically new instance regardless.