title: Private chat using MERN stack and socket.io
body: <p>I'm developing a private chat application using MERN stack and socket.io.</p>
  <p>I'm able to send a private message to a specific user successfully but not able to include the message sender to show to both the users.</p>
  <p><strong>Client</strong></p>
  <pre><code>export default function Chat({ users }) {
      const [activeUser, setActiveUser] = useState('');
      const [currentUser, setCurrentUser] = useState(null);
      const [filteredList, setFilteredList] = useState([]);
      const [message, setMessage] = useState('');
      const [chats, setChats] = useState([]);
  
      useEffect(() =&gt; {
          const jwt = isAuthenticated().user;
          setCurrentUser(jwt);
          config.socket;
          config.socket.on('isOnline', (data) =&gt; {
              console.log(data);
          });
      }, []);
  
      useEffect(() =&gt; {
          const list = users.filter(user =&gt; currentUser ? user._id !== currentUser._id : user._id);
          setFilteredList(list);
      }, [currentUser]);
  
      useEffect(() =&gt; {
          config.socket.on('chat', (data) =&gt; {
              setChats([...chats, data]);
          });
      }, []);
  
      const changeActiveUser = (e, user) =&gt; {
          e.preventDefault();
          console.log(`changeActiveUser ${JSON.stringify(user)}`);
          setActiveUser(user);
      };
  
      const handleClick = e =&gt; {
          e.preventDefault();
          const msg = {
              socketId: activeUser.socketId,
              to: activeUser._id,
              toUser: activeUser.username,
              message: message,
              from: currentUser._id
          }
          // config.socket.emit('join', {id: activeUser.socketId, username: activeUser.username})
          console.log(`Private MSG ${JSON.stringify(msg)}`);
          config.socket.emit('private', msg);
          setMessage('');
      }
  
  
      return (
          &lt;&gt;
              &lt;div className='container'&gt;
                  &lt;div className='row'&gt;
                      &lt;div className='col-3 leftSide'&gt;
                          {filteredList.map((user) =&gt; (
                              &lt;li key={user._id} className={`list ${user._id === activeUser._id ? 'active' : ''}`} onClick={e =&gt; changeActiveUser(e, user)}&gt;
                                  &lt;img className='userImg' src={user.gender === 'Female' ? '/female.jpg' : '/male.jpg'} /&gt; {user.name} &lt;small&gt;&amp;nbsp;({user.username})&amp;nbsp;&lt;span&gt;{user.online ? 'online' : 'offline'}&lt;/span&gt;&lt;/small&gt;
                              &lt;/li&gt;
                          ))}
                      &lt;/div&gt;
                      &lt;div className='col-9 rightSide'&gt;
                          &lt;div className='row'&gt;
                              &lt;div className='col rightTop'&gt;
                                  &lt;h1&gt;{activeUser.username ? `${activeUser.username} (${activeUser._id})` : 'Start a chat!'}&lt;/h1&gt;
                                  &lt;ul&gt;
                                      {chats &amp;&amp; chats.map((chat, i) =&gt; (
                                          &lt;li key={i}&gt;
                                              &lt;span&gt;{activeUser._id === chat.from ? &lt;span style={{ float: 'left' }}&gt;{`${activeUser.username}: ${chat.message}`}&lt;/span&gt; : &lt;span style={{ float: 'right' }}&gt;{`Me: ${chat.message}`}&lt;/span&gt;}&lt;/span&gt;
                                              {/* &lt;div&gt;{activeUser._id === chat.to ? &lt;div style={{ float: 'right' }}&gt;{`Me: ${chat.message}`}&lt;/div&gt; : ''}&lt;/div&gt; */}
                                          &lt;/li&gt;
                                      ))}
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;hr /&gt;
                          {activeUser &amp;&amp; (
                              &lt;div className='row rightBottomContainer'&gt;
                                  &lt;div className='rightBottomInput'&gt;
                                      &lt;input value={message} type='text' onChange={(e) =&gt; setMessage(e.target.value)} placeholder=' Enter your chat...' /&gt;
                                  &lt;/div&gt;
                                  &lt;div className='rightBottomButton'&gt;
                                      &lt;button onClick={(e) =&gt; handleClick(e)} type='submit'&gt;Send&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          )}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/&gt;
      );
  }
  </code></pre>
  <p><strong>Server</strong></p>
  <pre><code>const users = {};
  
  io.on('connection', (socket) =&gt; {
    console.log(`${socket.id} connected`);
  
    socket.on('signin', (data) =&gt; {
      users[data.username] = data.socketId;
      socket.emit('isOnline', { userId: data.userId, online: true });
    });
  
    console.log(`USERS: ${JSON.stringify(users)}`);
  
    // socket.on('join', (data) =&gt; {
    //   console.log(`JOIN: ${JSON.stringify(data)}`);
    //   socket.join(data.id);
    // });
  
    socket.on('private', (msg) =&gt; {
      console.log(`users[msg.toUser] ${users[msg.toUser]} === msg.socketId ${msg.socketId}`);
      if (users[msg.toUser] === msg.socketId) {
        console.log(msg);
        io.to(msg.socketId).emit('chat', msg);
      }
    });
  
    socket.on('disconnect', () =&gt; {
      console.log(`${socket.id} disconnected`);
    });
  });
  </code></pre>
  <p>I need help to include the sender along with the message to show to both the users. And I also want to append the messages properly since the above code is overriding the previous message.</p>