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

실시간 1:1 채팅

• 웹소켓 연결과 동시에 모든 사용자에게 권한을 줌
• 이름, 내용, 날짜를 출력
• 하지만 실시간으로 날짜가 화면에 출력이 되지 않는 문제가 발생
• 확인은 리로드를 시켜서 값으로 확인

트러블

• 위의 설명처럼, 리로드를 시킨다는 점은 디비에 저장된 값을 불러와서 화면에 출력한다는 점이다.
• 메시지를 디비에 넣었을때 자동으로 디비에는 날짜가 입력되지만, 실시간 데이터에는 그 값을 가지고 와 화면에 출력할 수 없었음.
• 실시간으로 soket.onmessage를 통해서 js를 통해 화면에 요소를 추가하여 보여주었음
• 어떻게 해야 실시간으로 바로 날짜 정보를 찍을 수 있을지 고민함.

해결

• 채팅 핸들러에서 디비에 값을 넣음과 동시에, 해당 메시지의 pk값과 정보를 select해서 정보를 저장
• socket.onmessage를 통해 그 정보를 받아 요소마다 정보를 출력
• 이를 통해 값이 잘 노출되고, 리로드 시켜도 형식 유지 가능

아래와 같이 해당 정보들을 소켓으로 실시간 받아 표현

const messageElement = document.createElement("div");
const now = new Date();
const formattedTime = formatDateTime(now);
const memberNo = parseInt(document.getElementById("currentMember").value, 10);
const memberNoCheck = parseInt(message.chat_sender_no, 10);
if (memberNoCheck === memberNo) {
    messageElement.classList.add("my-message", "messageItem");
    messageElement.innerHTML = `
        <div class="message-ele">
          <span class="message-time">${formattedTime}</span>
          <div class="message-content">
              <p>${message.chat_content}</p>
          </div>
        </div>
   `;
} else {
		messageElement.classList.add("other-message", "messageItem");
        messageElement.innerHTML = `
            <div class="message-sender">
                <strong>${message.chat_sender_name}</strong>
            </div>
            <div class="message-ele">
                 <div class="message-content">
                      <p>${message.chat_content}</p>
                 </div>
                 <span class="message-time">${formattedTime}</span>
          </div>
       `;
}

수정 후

• 디자인 적용 후, div 분리시켜 기본 틀 구성