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