title: Socket.io list for active users is working well but old tab does not update when a user disconnects and that user connects back again. Why?
body: <p>I will try to be as detailed as possible. I am trying to make an app where friends can message each other personally. This code is for the list of users who are online.</p>
  <p>The code is working fine but old tab(with user logged in) stops updating a user that had left but has rejoined back in. It works fine for the first time but when the user leaves and rejoins back in, old users do not record it but the new tab does get everything right.</p>
  <p>So basically, when I make a connected user log out and rejoin back through the same user, the list of other users(who were the first to log in) fail to update although it had updated the first time that user had logged in.</p>
  <p>Server side code:</p>
  <pre><code>let users={};
  let send=[];
  io.on(&quot;connection&quot;, async (socket)=&gt;{
      socket.on(&quot;login&quot;, async function(user_id){
          socket.handshake.session.user_id = user_id;
          socket.handshake.session.save();
          
      });
      socket.on(&quot;logout&quot;, function(user_id){
          if(socket.handshake.session.user_id){
              delete socket.handshake.session.user_id;
              socket.handshake.session.save();
          }
      });
      let currentSession=socket.handshake.session.user_id;
      if(typeof currentSession !== &quot;undefined&quot; &amp;&amp; typeof socket.id !== &quot;undefined&quot;){
          users[currentSession]=new Array();
          users[currentSession].push(socket.id);
      }
  
      let arr = Array.from(io.sockets.sockets.keys()); //connected sockets
  
      for (const [key, value] of Object.entries(users)) {
          for(let v of value){
              if(arr.includes(v)){
                  io.emit(&quot;listOfUsers&quot;, await utils.getUserInfo(key));
              }
          }
      }
      send=[];
      socket.on(&quot;disconnect&quot;, async ()=&gt;{
          let userLeft=await utils.getUserInfo(socket.handshake.session.user_id);
          io.emit(&quot;msg&quot;, utils.formatMessage(&quot;Bot&quot;, `${userLeft} has left the chat`));
  
          arr = Array.from(io.sockets.sockets.keys());
  
          let save=[];
          for(let [key, value] of Object.entries(users)){
              for(let i=0; i&lt;value.length; i++){
                  for(let a of arr){
                      if(a === value[i]){
                          if(!save.includes(key)) save.push(await utils.getUserInfo(key));
                      }
                  }
              }
          }
          io.emit(&quot;disconnectList&quot;, save);
      })
  
  })
  </code></pre>
  <p>Client side:</p>
  <pre><code>let record=[];
  socket.on(&quot;listOfUsers&quot;, msg=&gt;{
      if(!record.includes(msg.id)){
          record.push(msg.id);
          outputActiveUsers(msg);
      }
  })
  
  let record2=[];
  socket.on(&quot;disconnectList&quot;, msg=&gt;{
      document.querySelector(&quot;.the-ul&quot;).remove();
      let ul2=document.createElement(&quot;ul&quot;);
      ul2.classList.add(&quot;the-ul&quot;);
      div2.append(ul2);
  
      for(let m of msg){
          if(!record2.includes(m.id)){
              record2.push(m.id);
              outputActiveUsers(m);
          }
          
      }
      record2=[];
  })
  
  async function outputMessage(msg){
      let div=document.createElement(&quot;div&quot;);
      div.classList.add(&quot;msg-wrapper&quot;);
       div.innerHTML=`&lt;div class=&quot;msg-wrapper&quot;&gt;
                          &lt;div class=&quot;msg&quot;&gt;
                              &lt;p&gt;${msg.text}&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;span id=&quot;you-time&quot; class=&quot;time&quot;&gt;${msg.time}&lt;/span&gt;
                      &lt;/div&gt;`;
      document.querySelector(&quot;.msg-wrapper&quot;).appendChild(div);
  
  }
  
  function outputActiveUsers(msg){
      let li=document.createElement(&quot;li&quot;);
      li.classList.add(&quot;active-people-li&quot;);
      li.innerHTML= `&lt;div class=&quot;active-sidebar&quot;&gt;
                          &lt;div class=&quot;div-of-img&quot;&gt;
                              &lt;img src=&quot;../files/profile.png&quot; alt=&quot;&quot; class=&quot;active-profile-img&quot;&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;a href=&quot;&quot;&gt;&lt;h4&gt;${msg.name}&lt;/h4&gt;&lt;/a&gt;
                              &lt;h5&gt;Hi. Is this you, bro?&lt;/h5&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;`;
      document.querySelector(&quot;.the-ul&quot;).appendChild(li);
  }
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;active-people&quot;&gt;
      &lt;ul class=&quot;the-ul&quot;&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  </code></pre>