title: Socket.io code is not updating on DOM when I disconnect or when I have multiple tabs of the same user. But, when I connect, it works fine. Why?
body: <p>I will try to be as detailed as possible. I am trying to make an app where people can individually message each other and this code is to show the list of online users. So, my plan is I would append to the li when users connect(so far, that is working correctly).
  However, I am having issues when there are multiple tabs of the same user or when a user disconnects,. The DOM just isn't updating properly.</p>
  <p>What is wrong with this code? Are there any better approaches and if so, how should I manipulate the DOM? The list for active users is to remove when a user becomes inactive and add to it when a user is active. Thanks in advance</p>
  <p>Server side code:</p>
  <pre><code>let users={};
  let send=[];
  io.on(&quot;connection&quot;, async (socket)=&gt;{
      console.log(&quot;new WS connection&quot;);
      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;){
          if(users[currentSession]){
              users[currentSession].push(socket.id);
          }
          else{
              users[currentSession]=new Array();
              users[currentSession].push(socket.id);
          }
      }
       
      console.log(&quot;users dict before&quot;);
      for (const [key, value] of Object.entries(users)) {
          console.log(`${key}: ${value}`);
        }
  
      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`));
          console.log(&quot;User disconnected socket id&quot;, socket.id);
  
          arr = Array.from(io.sockets.sockets.keys());
          console.log(&quot;connected sockets&quot;, arr);
  
          let save=[];
          console.log(&quot;final&quot;);
          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(key);
  
                      }
                  }
              }
          }
          io.emit(&quot;disconnectList&quot;, await utils.getUserInfo(save));
          console.log(&quot;save&quot;, save);
  
      })
  
  })
  </code></pre>
  <p>Client side Code:</p>
  <pre><code>let chatForm=document.querySelector(&quot;#chat-form&quot;);
  let fullMessageBox=document.querySelector(&quot;.full-message-box&quot;);
  let ul=document.querySelector(&quot;.the-ul&quot;);
  let li=document.querySelectorAll(&quot;.active-people-li&quot;);
  let socket=io();
  
  socket.on(&quot;msg&quot;, message=&gt;{
      console.log(message,&quot;m&quot;);
      outputMessage(message);  //Outputs message to DOM
  
      fullMessageBox.scrollTop=fullMessageBox.scrollHeight;
  
  });
  
  socket.on(&quot;user_id&quot;, msg=&gt;{
      console.log(&quot;front end session &quot;, msg);
      socket.emit(&quot;user_connected&quot;, msg);
  });
  
  let record=[];
  socket.on(&quot;listOfUsers&quot;, msg=&gt;{
      if(!record.includes(msg.id)){
          record.push(msg.id);
          outputActiveUsers(msg);
      }
      // console.log(msg);
  })
  
  let record2=[];
  socket.on(&quot;disconnectList&quot;, msg=&gt;{
      console.log(&quot;this&quot;);
      for(let m of msg){
          outputActiveUsers(m);
      }
  })
  
  chatForm.addEventListener(&quot;submit&quot;, (event)=&gt;{
      event.preventDefault();
  
      let msgInput=document.querySelector(&quot;#msg-input&quot;).value;
      socket.emit(&quot;chatMsg&quot;, msgInput);
      document.querySelector(&quot;#msg-input&quot;).value=&quot;&quot;;
      document.querySelector(&quot;#msg-input&quot;).focus();
      
  })
  
  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>The HTML file linked to the client side code:</p>
  <pre><code>&lt;div class=&quot;active-chat-div&quot;&gt;
                      &lt;div class=&quot;active-chat-text&quot;&gt;
                          &lt;h3&gt;Active Chats&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;active-people&quot;&gt;
                          &lt;ul class=&quot;the-ul&quot;&gt;
                              &lt;!-- &lt;li class=&quot;active-people-li&quot;&gt;
  
                                  &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;Nafi&lt;/h4&gt;&lt;/a&gt;
                                          &lt;h5&gt;Hi. Is this you, bro?&lt;/h5&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                          
                              &lt;/li&gt; --&gt;
                                  
                              &lt;!-- &lt;li class=&quot;active-people-li&quot;&gt;
                                  &lt;div class=&quot;active-sidebar&quot;&gt;
                                      &lt;div&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;Nafi&lt;/h4&gt;&lt;/a&gt;
                                          &lt;h5&gt;Hi. Is this you, bro?&lt;/h5&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                          
                              &lt;/li&gt; --&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>