title: Socket.io disconnect on React client is not triggered on page refresh
body: <p>I'm having React.js + Node.js application where I'm using Socket.io to notify UI side that some changes have happened in the backend and it should pull these changes. I'm using client ID as identifier in socket, so I don't have to maintain map of users on the server side.</p>
  <p>When user login I'm establishing connection and this workflow is working fine. The problem is happening when user refreshes the page.
  In the Chrome browser on client socket side 'disconnect' doesn't get trigger and socket doesn't get reconnected.
  In the FF disconnect get triggered on the first refresh, but joinsuccess is not retrieved on the client side and notifications are not received on the client. On the second and every later refresh, disconnect is not triggered.</p>
  <p>My client code:</p>
  <pre><code>const io = require('socket.io-client');
  
  export default function () {
      const socket = io.connect(process.env.REACT_APP_BACKEND_URL);
  
      function registerDisconnectHandler(onDisconnect) {
          socket.on('disconnect', () =&gt; {
              console.log('Disconnected');
              onDisconnect();
          });
      }
      function registerJoinHandler(onJoinSuccess) {
          socket.on('joinsuccess', (msg) =&gt; {
              console.log('join success');
              onJoinSuccess(msg);
          });
      }
      function joinNotification(channel, cb) {
          console.log(`emit join for channel:${JSON.stringify(channel)}`);
          socket.emit('joinnotificationpharmacy', channel, cb);
      }
      function registerNotificationHandler(onNotificationReceived) {
          socket.on('notification', (notification) =&gt; {
              onNotificationReceived(notification);
          });
      }
      socket.on('error', (err) =&gt; {
          console.log('received socket error:');
          console.log(err);
      });
  
      return {
          registerDisconnectHandler,
          registerNotificationHandler,
          registerJoinHandler,
          joinNotification
      };
  }
  
  </code></pre>
  <p>Server side:</p>
  <pre><code>const socketIo = require('socket.io');
  
  class SocketService {
      constructor(server) {
          this.io = socketIo(server);
          this.io.on('connect', socket =&gt; {
              socket.on('joinnotificationpharmacy', function(data){
                  console.log('JOIN CLIENTID:'+data+&quot; SOCKET ID:&quot;+socket.id);
                  socket.join(data);
                  socket.emit('joinsuccess', socket.id);
              });
              socket.on('disconnect', function(){
                  console.log(&quot;client has disconnected:&quot;+socket.id);
              });
          });
          this.io.on('connect_error', function(err) {
              // handle server error here
              console.log('Error connecting to server');
          });
      }
  
      sendSocketNotification(receiver, notification){
          this.io.sockets.in(receiver).emit('notification', notification);
      }
  }
  
  module.exports = SocketService;
  
  </code></pre>
  <p>Logs on the server side indicates that one client joined server, but when refresh happens, multiple users are disconnected, which looks weird to me and looks like potential problem:</p>
  <p>server side logs:</p>
  <pre><code>JOIN CLIENT:5f6cb94d1bb5adbab7866a14 ID:p9hC0OTKztwGlalWAAAa
  client has disconnected:fJKV3MkJ4bxemZ4sAAAD
  client has disconnected:xJ7bJvSqwXBbkxOhAAAI
  client has disconnected:HkwouVqEXBeKvkHsAAAG
  client has disconnected:9dd6e8huPveN8aVjAAAe
  client has disconnected:jAZy4FXTC2oRd0a_AAAd
  client has disconnected:Doonmd-ogmIRXU7iAAAc
  client has disconnected:G-tc_RbO_99mivQyAAAb
  client has disconnected:p9hC0OTKztwGlalWAAAa
  client has disconnected:OYo2uOxuFzMeYtUEAAAW
  client has disconnected:54HLS2-KHAWJ5NmqAAAR
  client has disconnected:92veurywX4LhfK4cAAAg
  client has disconnected:Ox73Zt-lMB0rFeA-AAAf
  </code></pre>
  <p>I would appreciate some advice about how to properly handle disconnection on the client side and reinitialize connection.</p>
  <p><strong>UPDATE:</strong></p>
  <p>I've found a workaround for this problem, though if someone has some better idea, it's still welcome.
  I've added a code that identifies page reload and changes redux state which state to identify that connection doesn't exist anymore.</p>
  <pre><code>  useEffect(() =&gt; {
      if (sessionStorage.getItem('is_reloaded')) {
        console.log('Reloaded!');
        dispatch(disconnectNotificationsSocket(globalSocket, notifications.activeSocket));
      }
      sessionStorage.setItem('is_reloaded', true);
    }, []);
  </code></pre>