채팅방 생성
매칭 단계에서 상호 '좋아요'가 성립되면 채팅방이 생성됩니다.
해당 유저들에게 매칭 성공 알림이 전송되며, 채팅방 목록 페이지에서 새롭게 생성된 채팅방을 확인할 수 있습니다.
새롭게 생성된 채팅방
채팅방 목록
채팅방 목록 페이지에서는 자신과 매칭된 유저와의 채팅방을 확인할 수 있습니다.
목록에는 매칭된 유저의 닉네임, 프로필 사진, 최근 메시지 및 메시지 시간이 표시되며, 최근 메시지 순으로 정렬됩니다.
채팅방 목록을 클릭하면 해당 채팅방에 접속할 수 있습니다.
채팅방
채팅방에 접속하면 상대방과 채팅을 시작할 수 있습니다.
1.
채팅방 메시지 표시 및 이전 채팅 불러오기: 상대방과의 이전 채팅 내역이 표시되며, 메시지를 전송하면 해당 메시지가 화면에 표시됩니다.
2.
메시지 보내기: 클릭하거나 엔터 키를 눌러 메시지를 보낼 수 있으며, 채팅방에 접속하거나 메시지를 전송한 후에는 메시지 입력란에 자동으로 포커스가 맞춰집니다.
3.
채팅방 목록으로 돌아가기: 클릭 시 채팅방 목록 페이지로 이동합니다.
4.
상대방과의 연결 해제: 연결 해제를 선택하면 확인 창이 나타나며, 수락 시 채팅방이 삭제됩니다
Background Task
Socket IO를 통한 실시간 채팅을 구현하였습니다.
•
JWT 토큰 인증
소켓 연결 시 클라이언트로부터 전달받은 JWT 토큰을 게이트웨이에서 검사하여, 유효하지 않은 유저는 소켓 서버에 접속하지 못하도록 차단합니다. 또한, 토큰의 payload에 포함된 userId를 통해 필요한 데이터를 조회하여 socket.data에 저장합니다.
소켓 연결 시 클라이언트는 JWT 토큰을 전달하며, 로드밸런서 환경에서 원활한 연결을 위해 transports는 'websocket' 방식으로 설정합니다.
•
채팅방 입장
채팅방 목록에서 채팅방을 클릭하면 roomId가 URL로 전달되고, 소켓 이벤트를 통해 서버로 전송됩니다. 서버는 해당 roomId로 소켓을 룸에 연결한 후, 이전 채팅 내역을 포함하여 해당 룸에 브로드캐스팅합니다. 클라이언트는 수신한 이전 채팅 내역을 채팅방에 표시합니다.
클라이언트에서 Join 소켓 이벤트 생성
서버는 해당 유저가 채팅방에 속해 있는지 확인한 후, 룸에 연결시킵니다.
이전 채팅 내역을 포함하여 해당 룸에 브로드캐스팅, 클라이언트는 수신한 이전 채팅 내역을 채팅방에 표시합니다.
•
메시지 보내기
message 소켓 이벤트를 통해 클라이언트는 메시지와 roomId를 서버로 전송합니다. 서버는 메시지를 데이터베이스에 저장한 후, 닉네임을 포함하여 해당 룸에 브로드캐스팅합니다. 클라이언트는 수신한 닉네임과 메시지 바탕으로 실시간으로 채팅방에 표시합니다.
채팅 메시지 저장
닉네임을 포함하여 해당 룸에 브로드캐스팅
채팅 내역이 데이터베이스에 저장되며 해당 채팅방이 삭제된다면 함께 삭제됩니다.
•
상대방과 연결 해제
서버는 roomId와 userId를 전달받아 해당 유저가 채팅방에 속해 있는지 확인한 후, 소켓 룸에서 퇴장시킵니다. 이후 데이터베이스에서 채팅방과 그 안의 메시지를 삭제하고, 채팅방에 속한 유저들에게 알림을 전송합니다.