그룹웨어 - 채팅 구현(8)

채팅방 나가기

• 사용자 별 원하는 채팅방을 설정 목록 통해 나가기를 진행
• 개인 채팅방을 나갈 경우, 다른 사용자는 대화 내용 유지
• 그룹 채팅방을 나갈 경우, 나감 메시지 출력과 동시에 대화 내용유지
• 개인은 나감과 동시에 재초대가 불가하고, 다시 생성
• 그룹은 나감과 동시에 재초대가 가능하고, 초대된 사용자는 그 전의 내용을 확인 불가능
  
  

구성

• 채팅방을 나감과 동시에 채팅방 참여 상태를 변화
• 채팅방 목록은 이 상태를 확인 후, 사용자에게 출력
• 그룹 채팅방을 나간 후 재초대, 그 시점을 기준으로 채팅 메시지 값을 출력
• 나감과 동시에 다른 사용자들을 위해 출력 메시지를 디비에 저장

<!-- 채팅방 나가기   -->
<update id="chatRoomOut">
   UPDATE fl_chat_member SET
   chat_member_par = 1
   WHERE  chat_room_no = #{chatRoomNo}
   AND member_no = #{memberNo}
</update>

 <!-- 채팅 내용 가져오기   -->
<select id="getChatMessages" parameterType="java.util.Map" resultType="java.util.HashMap">
   SELECT
   cm.chat_message_create_date AS chatMessageCreateDate,
   cm.chat_content AS chatContent,
   m.member_name AS senderName,
   cm.chat_room_no AS roomNo,
   cm.chat_sender_no AS senderNo
   FROM fl_chat_message cm
   LEFT JOIN fl_member m ON cm.chat_sender_no = m.member_no
   JOIN fl_chat_member ctm ON cm.chat_room_no = ctm.chat_room_no
   WHERE ctm.member_no = #{memberNo}
   AND ctm.chat_member_par = 0
   AND cm.chat_message_create_date >= ctm.chat_member_join_date
   AND (cm.chat_room_no = #{roomNo}  OR cm.chat_sender_no = 0 OR (cm.chat_room_no = ctm.chat_room_no AND cm.chat_content LIKE '%초대%'))
   AND cm.chat_room_no = #{roomNo}
   GROUP BY cm.chat_content, cm.chat_sender_no, cm.chat_message_create_date, m.member_name, cm.chat_room_no
   ORDER BY cm.chat_message_create_date ASC;
</select>

• 채팅방 나가기 메시지 Handler를 통해 실시간으로 나간 사용자를 출력

// 나가기 메시지(socket)
private void saveOutMessage(String sentence, Long currentChatRoomNo) {
    String inviteMessage = sentence+"님이 나가셨습니다.";

    ChatMessageDto chatMessageDto = new ChatMessageDto();
    chatMessageDto.setChat_room_no(currentChatRoomNo);
    chatMessageDto.setChat_sender_no(0L);
    chatMessageDto.setChat_content(inviteMessage);
	chatMessageService.saveChatMessage(chatMessageDto);
}


//나가기 실시간 반영(js)
else if(message.type === "chatMemCount") {
    const count = message.data;
    const chatRoom = message.currentChatRoomNo;
    if(currentChatRoomNo === chatRoom){
      const participantCount = document.getElementById('participantCountSpan');
      participantCount.textContent = count;
      const messageElement = document.createElement('div');
      messageElement.classList.add("system-message", "messageItem");
      messageElement.innerHTML = `
         <div class="message-ele">
         <div class="system-content">
         <p>${message.outSentence}님이 나가셨습니다.</p>
         </div>
         </div>
      `;

      const chatContainer = document.getElementById('chatContent');
      chatContainer.appendChild(messageElement);
      chatContainer.scrollTop = chatContainer.scrollHeight;
    }
}

나가기 메시지 확인

• 같은 채팅방 참여자들에게 확인 가능한 메시지 출력
• 나감과 동시에 위에 사용자 수도 실시간 차감

구현하면서 들었던 생각

• 기본적으로 나감과 초대가 간단하게 상태값 변화만 진행한다고 생각
• 실시간 변화를 보여줘야 함을 넘어서 다른 사용자들에게도 변화를 보여줘야 한다는 점
• 생각했던 부분보다 더 자세한 조건이 들어가고 여러 방면에서 채팅방 접근할 수 있는 부분을 제한 걸어야 했음
• 제일 나중에 생각해서 고려했던 것이 채팅 메시지 출력
• 나가면 그 전의 내용을 확인 못하게 해야한다는 점