브로드캐스트 최적화

기존 문제점

기존의 코드는 메시지를 전송하면, 자신에게도 메시지 관련 이벤트가 전달되고, 상대에게도 전달된다는 점이다. 이렇게 해도 메시지가 화면에 출력될 수 있지만, 실제 채팅 앱은 그렇지 않다는 것을 알 수 있을 것이다.

서버에 오류가 있어서 전송이 되지 않았더라도, 상대가 아직 접속하지 않았더라도 내 메시지는 화면에 출력되어야 한다.

하지만, 서버로부터 이벤트를 받아 처리하는 경우, 내게 해당 이벤트가 전달되지 않으면 내가 입력한 메시지가 화면에 출력되지 않는 문제가 생길 수 있다.

해결 방법

내가 입력한 메시지는 입력한 즉시 화면에 보이도록 스크립트를 작성한다. 서버 측에서는 해당 이벤트를 전송한 클라이언트에게는 해당 이벤트를 다시 보내지 않도록 처리하면 된다.

클라이언트 코드

const send = () => {
  const newMessage = document.getElementById('my-message').value;
  document.getElementById('my-message').value = '';

  const chat = document.getElementById('chat-log');
  const message = document.createElement('div');
  const node = document.createTextNode(newMessage);

  message.classList.add('myMessage');
  message.appendChild(node);
  chat.appendChild(message);
  
  /* 생략 */
}

전송 버튼을 눌렀을 때 동작하도록 만든 send() 함수다. 먼저, 자신이 입력한 메시지를 입력 폼으로부터 가져온다. 이후, 해당 값을 초기화해야 한다(데이터를 가져왔으므로, 남아 있으면 안 되기 때문).

그 값을 토대로 새로운 메시지 출력 창을 만들어 바로 화면에 보일 수 있도록 한다. 이때, 기존의 채팅 로그들을 먼저 가져온 이후, 그 채팅 로그의 맨 마지막에 내 메시지를 추가한다.

/* message was sended by me */
.myMessage {
  width: 90%;
  margin: auto;
  background-color: lemonchiffon;
  border-radius: 5px;
  margin-top: 10px;
}

/* message was sended by other user */
.otherMessage {
  width: 90%;
  margin: auto;
  background-color: white;
  border-radius: 5px;
  margin-top: 10px;
}

현재 프로젝트는 메시지 창이 모두 같은 크기로 출력된다. 카카오톡이나 페이스북 메신저와 같이 내가 보낸 메시지와 상대가 보낸 메시지의 위치를 다르게 출력하지 않는다.

그래서, 해당 메시지들을 구분하기 위해 style을 다르게 적용하고 있다.

서버 코드

socket.on('message', (data) => {
  data.nickname = socket.nickname;
  socket.broadcast.emit('update', data);
});

이후 socket 객체의 broadcast 플래그를 사용한다. 이 경우, 자신에게 해당 이벤트를 보내온 클라이언트를 제외하고 남은 모두에게 해당 이벤트를 전송하는 기능을 한다.

실행 화면

자신의 메시지와 상대의 메시지를 확실히 구분할 수 있다(적용되는 색깔과 닉네임 여부).

개선할 수 있는 부분

실제 서비스되고 있는 채팅 서비스처럼 내가 보낸 메시지는 우측에, 다른 사림이 보낸 메시지는 좌측에 배치하는 방식을 채택할 수 있을 것 같다.