title: SocketIO Leave Room and join new Room Logic
body: <p>I want to know how can I leave the Room when I clicked new Room</p>
  
  <p>My Page is look like this.</p>
  
  <p><a href="https://i.stack.imgur.com/vuwv0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vuwv0.png" alt="enter image description here"></a></p>
  
  <p>List of the left side are from the MySQL Server and it gets list of my chats. And each Room name has id value which is room name. And it also has onclick function to use function in client side.</p>
  
  <p>I thought when I clicked each Room name and run the joinChat() function and Inside the joinChat() Function </p>
  
  <ol>
  <li>Use JoinRoom Socket</li>
  <li>In Server Side Run <code>socket.leave(`${data.joinedRoomName}`);</code></li>
  <li>And then join new Clicked Room with <code>socket.join(`${data.joinedRoomName}`);</code> Code</li>
  </ol>
  
  <p>But I don't know How can I pass the current room name when I click the new room. So there's problem from step 2.</p>
  
  <p>So it's look like this.</p>
  
  <pre><code>&lt;a href="#" onclick="joinChat()"&gt;
  &lt;h5 id="sangumee-Quarterican-KJ"&gt;sangumee&lt;/h5&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>[Client Side Code] </p>
  
  <pre><code>var socket = io.connect('http://118.35.126.220:3001');
  function joinChat() {
      let joinedRoomName = window.event.target.id;    // Get clicked id (ROOM NAME)
      $('.msg_history').empty();  // to Remove Previous Chats
      socket.emit('JoinRoom', {
          joinedRoomName: joinedRoomName
      });
      console.log(`Joined : ${joinedRoomName}`);
      $('#chat').on('submit', function (e) {  // Submit Event
          var msg = $('#message').val();  // Get entered Message
          e.preventDefault(); // Prevent reload the page
          if (!msg) return; // If no Message return
          $('#message').val('')   // To clean chat input
          socket.emit('send:message', {
              message: msg,
              userId: userId,
              loginedId: loginedId,
              joinedRoomName: joinedRoomName
          });
          // Draw to Outgoing side Chat (Send by me)
          $('.msg_history').append(`&lt;div class="outgoing_msg"&gt;&lt;div class="sent_msg"&gt;&lt;p&gt;${msg}&lt;/p&gt;&lt;span class="time_date"&gt; 11:01 AM    |    June 9&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;`);
      });
  }
  
  socket.on('receive:message', function (data) {
      console.log(`${data.userId} : ${userId}`)
      if (data.userId != userId) {
          // Draw to Incoming Side Chat (Send by another person)
          $('.msg_history').append(`&lt;div class="incoming_msg"&gt;&lt;div class="incoming_msg_img"&gt;&lt;img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"&gt;&lt;/div&gt;&lt;div class="received_msg"&gt;&lt;div class="received_withd_msg"&gt;&lt;p&gt;${data.message}&lt;/p&gt;&lt;span class="time_date"&gt; 11:01 AM    |    June 9&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;`);
      }
  });
  </code></pre>
  
  <p>[Server Side Code]</p>
  
  <pre><code>/* MyPage User Chat Room */
  router.get(`/:userId/admin/contact`, function (req, res, next) {
    let userId = req.params.userId;
    let loginedId = req.user.login;
    db.query(`SELECT * FROM chatRoom WHERE chatReceiver=? OR chatSender=?`, [userId, userId], function (error, room) {
      if (error) {
        throw `Error From /:userId/admin/contact ROUTER \n ERROR : ${error}`;
      }
      console.log(`Room : ${room}`);
      res.render('mypage/contact', {
        userId: userId,
        loginedId: loginedId,
        room: room
        // contactArray: contactArray
      })
    });
  });
  
  // Socket IO 
  io.on('connection', function (socket) {
    // Join Room
    socket.on('JoinRoom', function (data) {
      socket.leave(`${data.joinedRoomName}`);
      console.log(`DATA : ${data.joinedRoomName}`)
      socket.join(`${data.joinedRoomName}`);
      console.log(`NEW JOIN IN ${data.joinedRoomName}`)
    })
    socket.on('send:message', function (data) {
      io.sockets.to(`${data.joinedRoomName}`).emit('receive:message', data);
      console.log(`Message Send to : ${data.joinedRoomName}`)
      console.log(`Message Content : ${data.userId} : ${data.message}`);
      // Save Message In DB
      db.query(`INSERT INTO chatData (roomName, chatSender, chatMessage) VALUES (?,?,?)`,[data.joinedRoomName, data.userId, data.message])
    });
  });
  </code></pre>