Reconnecting all the sockets back after refreshing the browser

[UdayMahajan1]

So I'm developing a Chat app as a project where I have the mentioned problem.
When I refresh the browser all the socket connections are lost and all the users need to reconnect to chat again.
I want the user who refreshed the browser to get automatically reconnected to the room after the browser has finished refreshing and not redirect him to the main page to login again.

This is my websockets.js :

const ejs = require('ejs');
const path = require('path');

function createWebSocketServer(server) {

    const socketUsernameMap = new Map();
    
    const io = new Server(server);
    
    io.on('connection', (socket) => {

        var username = socket.handshake.query.username;
        const roomName = socket.handshake.query.roomName;

        socketUsernameMap.set(socket.id, username);

        socket.join(roomName);
        
        socket.broadcast.to(roomName).emit('Welcome', 'A new just joined the room !');

        var roomSockets = io.sockets.adapter.rooms.get(roomName);

        let userList = [];

        console.log(roomSockets);
        roomSockets.forEach(onlineUsers);

        function onlineUsers (roomSocket) {
            var user = socketUsernameMap.get(roomSocket);
            if(user !== undefined) {
                userList.push(`<li class="list-group-item">${user}</li>`);
            } else {}
        }

        io.to(roomName).emit('Online Users', userList);

        socket.on('chat message', async function (message) {

            var aligner = "left";
            var renderedChat = await ejs.renderFile(path.join(__dirname + '/../' + 'views/' + 'chatbox.ejs'), { message: message, username: username, aligner: aligner });
            const html = renderedChat.toString();
            socket.broadcast.to(roomName).emit('chat message', renderedChat);
            aligner = "right";
            username = "You";
            renderedChat = await ejs.renderFile(path.join(__dirname + '/../' + 'views/' + 'chatbox.ejs'), { message: message, username: username, aligner: aligner });
            io.to(socket.id).emit('chat message', renderedChat);

        });

        socket.on('is typing', () => {
            username = socket.handshake.query.username;
            socket.broadcast.to(roomName).emit('is typing', username);
        });

        socket.on('done typing', () => {
            socket.broadcast.to(roomName).emit('done typing');
        });

        socket.on('log out request', () => {
            socket.disconnect();
            console.log(`${socket.id} has disconnected`, roomSockets);
            socketUsernameMap.delete(socket.id);
            userList = [];
            roomSockets.forEach(onlineUsers);
            io.to(roomName).emit('Online Users', userList);
        });
    });

    return io;
}

module.exports = createWebSocketServer;

This is my chat.js :

var username = localStorage.getItem('username');
var roomName = localStorage.getItem('roomName');

var socket = io({
  query: { username: username, roomName: roomName }
});

var form = document.getElementById('form');
var input = document.getElementById('input');

socket.on('Online Users', (html) => {
  $('#onlineUsers').empty();
  html.forEach((item) => {
    $('#onlineUsers').append(item);
  });
});

let timeout = null;

$('#input').on('input', () => {
  clearTimeout(timeout);
  socket.emit('is typing');

  timeout = setTimeout(() => {
    socket.emit('done typing');
  }, 2000);
});

form.addEventListener('submit', function (e) {
  e.preventDefault();
  if (input.value) {
    socket.emit('chat message', input.value);
    input.value = '';
  }
});

$("#log-out").on('click', () => {
  socket.emit('log out request');
  fetch('/logOut', {
    method: 'POST',
    mode: 'cors',
    redirect: 'follow'
  })
    .then(response => {
      if(response.redirected) {
        window.location.replace(response.url);
      }
    })
    .catch(err => console.log(err));
});

socket.on('Welcome', (msg) => {
  console.log(msg);
  $(".alert").removeClass("hide");
  setTimeout(function () {
    $('.alert').fadeOut(1000);
  }, 4000);
  setTimeout(() => {
    $('.alert').addClass("hide");
  }, 1000);
});

socket.on('is typing', (user) => {
  $('#input').attr('placeholder', `${user} is typing...`);
});

socket.on('done typing', () => {
  $('#input').removeAttr('placeholder');
});

socket.on('chat message', function (renderedChat) {
  $('#messages').append(renderedChat);
  window.scrollTo(0, document.body.scrollHeight);
});

PS : I also tried using the connectionStateRecovery but I wasn't able to get the desired result.
If you need any additional information to resolve my error please ask.
Thank you.