[Mini/채팅] 채팅방 접속하기 / 알림

 

[Mini/채팅] 채팅방 접속하기 / 알림

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

작업 내용

이전 게시글에서는 채팅방 중복 생성 방지를 구현해보았다. 이번 게시글에서는 채팅방에 접속하고, 접속하였으면 알림을 띄워주는 것을 구현해보자.

◆ 채팅방 접속

채팅방 접속을 구현하려고 보니 코드를 나도 모르게 짜놓았다. onJoin 함수를 사용하면 된다. 프론트는 이정도로 끝이다. 이것에 맞게 백엔드 코드도 구현하였다. 아래 코드를 확인해보자.

socket.on("join-room", (roomName, done) => {
  socket.join(roomName);
  done();
  socket
    .to(roomName)
    .emit("join-msg", `${socket["nickname"]}님께서 입장하셨습니다. !!!`);
});

room에 접속하는 방법은 socket.join(룸 이름); 이다. 이것 역시 socket.io package에 다 구현이 되어 있기 때문에 굉장히 쉽게 사용할 수 있다. join을 한 후 해당 room에 join-msg eventName으로 ~~님께서 입장하셨습니다. message를 보내는 것을 확인할 수 있다. 이것을 위해 nickname을 socket에 넣어두고 있던 것이다. 그렇다면 이제 프론트에서 기존에 있던 방에 ~~님께서 입장하셨습니다. 메시지를 띄워주어야 한다. 빠르게 알아보자.

◆ 채팅방 접속 알림

Chat 컴포넌트에서 구현해주었다. Chat 컴포넌트가 사실상 채팅방이기 때문이다. 그리고 이전 구현 방법과 다르게 이번에는 socket을 props로 받아서 처리해주었다. useEffect에 join-msg 이벤트를 넣어주어 message를 alert으로 출력해주었다. 아주 간단하게 구현할 수 있었다. 아래 코드를 확인해보자.

useEffect(() => {
  socket.on("join-msg", msg => {
    alert(msg);
  });
}, [socket]);

이제 정상적으로 동작하는 결과를 확인해보자.

다음 작업 내용

이번 게시글에서는 채팅방 접속 및 알림 생성을 구현하였다. 다음 게시글에서는 접속한 채팅방에서 채팅하는 방법을 알아보도록 하자.

◆ 참고자료

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

마지막

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