채팅 기능 구현하기

프런트에서는 서버에서 보내는 채팅 데이터를 받을 소켓 이벤트리스너가 필요합니다. 

 

chat.html 파일에추가합니다.

 

socket에 chat 이벤트 리스너를 추가했습니다. 

chat 이벤트는 채팅 메시지가 웹 소켓으로 전송될 때 호출됩니다. 

채팅 메시지 발송자(data.user)에 따라 내 메시지(mine 클래스)인지 남의 메시지 (other 클래스)인지 확인한 후 그에 맞게 렌더링합니다. 

채팅을 전송하는 폼에 submit 이벤트 리 스너도 추가했습니다.
채팅은 여러 가지 방식으로 구현할 수 있습니다. 

현재 GIF 채팅방의 경우에는 채팅 내용을 데이 터베이스에 저장하므로 라우터를 거치도록 설계했습니다.
이제 방에 접속하는 부분과 채팅을 하는 부분을 만들어보겠습니다.

 

 

 

 

 

먼저 enterRoom 컨트롤러에서 방 접속 시 기존 채팅 내역을 불러오도록 수정합니다.

방에 접속할 때는 DB로 부터 채팅 내역을 가져오고, 접속 후에는 웹 소켓으로 새로운 채팅 메시지를 받습니다.

 

POST /room/: id/chat 라우터를 새로 생성합니다. 채팅을 데이터베이스에 저장한 후 

io.0f(/ chat'). to(방 아이디). emit으로 같은 방에 들어 있는 소켓들에 메시지 데이터를 전송합니다.
이제 채팅을 할 수 있습니다. 채팅을 할 때마다 채팅 내용이 POST /room/: id/chat 라우터로 전송 되고, 

라우터에서 다시 웹 소켓으로 메시지를 보냅니다.