✨ feat: 채팅 가시성 관련 웹 소켓 연결 관리

[jungmyunggi]

🔨 테스크

Issue

• close [FE] 채팅 재전송 및 재연결 로직 구현 #377

웹 가시성에 따른 웹 소켓 해제 및 재연결

• 크롬 브라우저의 discard 메모리 최적화 정책을 최대한 활용해보기 위해서 도입했습니다.
• 크롬 브라우저의 경우 웹 소켓이 연결된 탭의 경우 백그라운드에 있더라도 메모리를 계속해서 점유하도록 되어있습니다.
• 위 불필요한 메모리 점유를 막고자 웹 가시성API를 이용해 서비스가 백그라운드로 들어가게 되면 일정 시간이 지난 후 웹 소켓을 끊어버리는 식으로 수정했습니다.

채팅 낙관적 업데이트 및 채팅 개별 재전송

• 이전에 구현된 방식은 사용자가 채팅을 서버로 보내면 서버는 웹 소켓에 브로드캐스팅 방식을 이용해 해당 채팅을 뿌렸습니다.
• 이때 사용자가 연결이 불안정한 상태에서 채팅을 보내게 된다면 해당 브로드캐스팅을 받을 수 없게 되며 이에 따른 문제가 발생합니다.
• 위 문제를 해결하고자 채팅 낙관적 업데이트를 도입했고 서버로부터 해당 채팅에 대한 ack을 받아 업데이트 하는 식으로 수정했습니다.

본인 채팅 오른쪽에 나오도록 수정

• 말 그대로 본인이 보낸 채팅과 다른 유저가 보낸 채팅을 구분하기 위해 도입했습니다.

📋 작업 내용

• 웹 가시성에 따른 웹 소켓 해제 및 재연결
• 채팅 낙관적 업데이트
• 본인 채팅 오른쪽에 나오도록 수정

📷 스크린 샷(선택 사항)