[Mini/채팅] 채팅하기

[Mini/채팅] 채팅하기

대부분은 코드를 보고 이해하실 것이라 생각됩니다. 그 중 중요하다고 생각하는 것 위주로 작성하였습니다.

작업 내용

이전 게시글에서는 채팅방 접속 및 알림 생성을 구현해보았다. 이번 게시글에서는 채팅을 구현해보자.

채팅 구현하기

◆ 프론트

우선 프론트 먼저 확인해보자. message eventName을 추가하여 msg가 오면 기존 list에 concat으로 객체 형식으로 추가해주었다. 이렇게 한 이유는 me가 false인 경우 상대방, me가 true인 경우 나 임을 구분할 수 있기 때문이다. 따라서 처음 채팅을 친 경우 즉, message event를 백엔드 서버로 보낼 때는 me를 true로 하여 list에 추가해주었다. 아래 2개 코드 모두 확인해보자.

socket.on("message", msg => {
  setList(prev => prev.concat({ me: false, text: msg }));
});

<form
  onSubmit={e => {
    e.preventDefault();
    socket.emit("message", chat, roomName, () => {
      setList(prev => prev.concat({ me: true, text: chat }));
      setChat("");
    });
  }}
>
  <input value={chat} onChange={e => setChat(e.target.value)} />
</form>

위에서 설정한 me 값을 바탕으로 me가 true인 경우 textAlign: right;을 주어 오른쪽 정렬을 해주었다.

◆ 백엔드

백엔드도 간단하다. socket.io에서는 요청한 socket을 제외하고 broadcast를 하는 방법이 있다. socket.broadcast.to(룸 이름).emit(eventName, message);이렇게 실행하면 된다. 아래 적용한 코드를 확인해보자.

socket.on("message", (msg, roomName, done) => {
  done();
  socket.broadcast.to(roomName).emit("message", msg);
});

여기서 의문이 생길 수 있다. 왜 요청한 socket을 제외하고 보낼까? 만약 제외하지 않는다면 프론트 코드에서 작성한 useEffect 내의 코드 때문에 또 다시 list에 추가해주기 때문이다. 더 나은 방법이 있다면 그것을 사용해도 좋다. 아래 구현 결과를 확인해보자.

다음 작업 내용

이번 게시글에서는 채팅을 구현하였다. 다음 게시글에서는 접속한 채팅방에서 나가는 방법을 알아보도록 하자 (기능적으로 마지막 게시글).

◆ 참고자료

• 프론트 수정 코드
• 서버 수정 코드

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.