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

목록 검색(자동완성)

• UI에 표시된 채팅방 목록을 js를 통해 자동완성 기능 구현
• js에서 같은 html 요소를 가지고 있는 목록의 방 이름을 찾음
• 배열에 저장 후, 검색어와 비교하여 목록이 출력되도록 구성
• 한 글자씩 작성과 동시에 비교하기 위해서 oninput 처리

//검색 자동완성 기능
document.getElementById('searchInput').oninput = searchMem;
function searchMem() {
   let input = document.getElementById('searchInput').value.toLowerCase().replace(/\s+/g, '');
   let chatItems = document.getElementsByClassName('chatItem');
   for (let i = 0; i < chatItems.length; i++) {
      let chatName = chatItems[i].getElementsByTagName('p')[0].innerText.toLowerCase().replace(/\s+/g, '');
      chatItems[i].style.display = chatName.includes(input) ? "" : "none";
  }
}

상단 고정

• 원하는 채팅방을 상단 고정하기 위해 3가지를 고려
• 첫 번째, 리로드가 되어도 상단 고정이 되어야 함
• 두 번째, 실시간으로 생성되는 채팅방은 상단 고정 바로 아래 최신 순으로 정렬되어야 함
• 세 번째, 고정이 여러 개인 경우에 고정된 목록들끼리 최신 순 정렬이 가능해야 함
  
  

구성

• 테이블에 채팅방 번호와 참여자 번호, 고정 상태와 고정된 시간을 구성
• 고정할 채팅방 클릭하여 채팅방 번호를 가지고 서버 서비스쪽으로 이동
• 현재 로그인한 사용자 번호와 채팅방 번호를 통해 고정 상태와 시간(update)을 UPDATE 수정함
• 채팅방 목록 SELECT문에서 고정 상태가 있을 경우, 고정 상태 최신으로 정렬함
• 고정상태가 여러 개이면, 최신순으로 정렬
• 그리고 현재 html에서 채팅방 목록 고정 pin이 노출된 경우에 그 마지막 요소 아래 생성되도록 구성

//채팅방 목록을 가지고 오는 쿼리문(고정 우선)
<select id="selectChatList" parameterType="java.lang.Long" resultType="com.fiveLink.linkOffice.chat.domain.ChatMemberDto">
    SELECT cm.*
    FROM fl_chat_member cm
    LEFT JOIN (
    SELECT cm.chat_room_no, MAX(cmsg.chat_message_create_date) AS recent_message_date
    FROM fl_chat_member cm
    JOIN fl_chat_message cmsg ON cm.chat_room_no = cmsg.chat_room_no
    WHERE cm.member_no = #{memberNo}
    GROUP BY cm.chat_room_no
    ) AS rm ON cm.chat_room_no = rm.chat_room_no
    JOIN fl_chat_room cr ON cm.chat_room_no = cr.chat_room_no
    WHERE cm.member_no = #{memberNo}
    AND cm.chat_member_par = 0
    ORDER BY
    cm.chat_member_pin DESC,
    CASE
    WHEN cm.chat_member_pin = 0 THEN
    COALESCE(rm.recent_message_date, cm.chat_member_join_date)
    END DESC,
    cm.chat_member_no DESC;
</select>

트러블 슈팅

• 채팅방 실시간 생성과 함께 html에 고정부분을 고려하여 목록을 정렬해야 하는 점에서 랜덤으로 생기는 오류 발생
• js에서 div id="chatRooom"을 실시간 생성하는 부분에서 오류 발생
• 디비에서 목록을 조회에서 가져오면 html 형식대로 가져오지만, 실시간 생성은 목록이 없을 경우에 그 형식을 지키기 않고 생성되어 랜덤 생성의 원인이 됨
• html 구조 생성하는 방식을 실시간과 목록 출력과 동일하게 구성하여 오류 해결