How to disconnect socket.io on page refresh in React?

[ggukggukee]

When I refresh page new connection is created along side with old one.
I want to socket to disconnect socket on page refresh.

Socket.js

let socket;
export const initiateSocket = (data) => {
  socket = io('/');
  console.log(`Connecting socket...`);
  if (socket && data) socket.emit('join', data);
};

export const subscribeToUsers = (cb) => {
  if (!socket) return true;
  socket.on('users', (data) => {
    console.log('Websocket event received!');
    return cb(null, data);
  });
};

export const disconnectSocket = () => {
  console.log('Disconnecting socket...');
  if (socket) socket.disconnect();
};

React component useEffect:

useEffect(() => {
      const data = { userId: user.id, roomId: roomId };
      initiateSocket(data);

      subscribeToUsers((err, data) => {
        if (err) return;

        setUsers(data);
      });

      return () => {
        disconnectSocket();
      };
  }, []);

Server.js

io.on('connection', (socket) => {
  socket.on('join', (data) => {
    addUser(socket, data);
    const users = getUsersInRoom(data.roomId);
    io.in(data.roomId).emit('users', users);
  });

  socket.on('disconnect', () => {
    const user = getUser(socket.id);
    const removedUser = removeUser(socket, socket.id);
    const users = getUsersInRoom(user?.roomId);
    if (removedUser) {
      io.in(user.roomId).emit('users', users);
    }
  });
});

When you go back, useEffect cleanup works and socket is disconnects but on page refresh disconnect is not working.

[AndrewTate556]

Ben???