MasonTALK 개인프로젝트 4일차

🕹 4일차 구현 사항

프론트엔드

1. socket.io-client 설치
   - cors 설정 ⭐️
2. 🟠 온라인/오프라인 유저별 프로필 구분 표시
   • addNewUser 이벤트 emit 👉🏻 클라이언트 쪽에서 발생시키는 이벤트입니다. 이벤트를 발생시키는 동시에 소켓 서버 쪽으로 유저 id를 전달합니다.
   • getOnlineUsers 이벤트 on 👉🏻 클라이언트 쪽에서 해당 이벤트를 구독하고 있습니다. onlineUsers 배열을 전달받으면 이를 상태 변수로 관리합니다.
3. 🔵 채팅 메시지 실시간 동기화
   • 기존 서버로 새로운 메시지를 POST 요청 보내고 응답으로 받은 newMessage 상태 변수를 사용했습니다.
   • sendMessage 이벤트 emit 👉🏻 클라이언트 쪽에서 발생시키는 이벤트입니다. 소켓 서버 쪽으로 기존 newMessage 상태 변수에 메시지를 수신하는 유저의 id를 더한 객체를 전달합니다.
   • getMessage 이벤트 on 👉🏻 클라이언트 쪽에서 해당 이벤트를 구독하고 있습니다. 전달받은 message 객체를 messages 상태 변수에 추가합니다. 이로써 유저는 실시간으로 새로운 메세지를 확인할 수 있습니다.

소켓 서버

1. 소켓 서버 구축
2. 🟠 온라인/오프라인 유저별 프로필 구분 표시
   • addNewUser 이벤트 on 👉🏻 소켓 서버 쪽에서 해당 이벤트를 구독하고 있습니다. 유저 id를 전달받으면 onlineUsers 배열에 담아 온라인 상태인 유저 목록을 집계합니다.
   • getOnlineUsers 이벤트 emit 👉🏻 온라인 상태인 유저의 목록 집계를 완료하면 소켓 서버 쪽에서 해당 이벤트를 발생시킵니다. 이벤트를 발생시키는 동시에 onlineUsers 배열을 클라이언트 쪽으로 전달합니다.
3. 🔵 채팅 메시지 실시간 동기화
   • sendMessage 이벤트 on 👉🏻 소켓 서버 쪽에서 해당 이벤트를 구독하고 있습니다. 객체를 전달받으면 온라인 상태인 유저 중에서 해당 메시지를 수신하는 유저 id와 일치하는 유저를 찾아냅니다.
   • getMessage 이벤트 emit 👉🏻 유저가 존재한다면 소켓 서버 쪽에서 해당 이벤트를 발생시킵니다. 이벤트를 발생시키는 동시에 메시지를 수신하는 유저의 socketId로 message를 전달합니다.

🚀 트러블슈팅

온라인 상태인 유저의 수 집계

• 👉🏻 WHAT? 온라인 상태인 유저의 수 집계 오류
• 👉🏻 HOW? 소켓 disconnect 이벤트 추가

예를 들어 현재 2명의 유저가 로그인 한 상태라고 가정해보겠습니다.
이때 한 유저를 로그아웃 시키면 온라인 상태인 유저 수는 1명으로 감소해야 합니다.
하지만 콘솔에 출력되는 유저 수는 계속 2명이었습니다.
로그아웃 했음에도 불구하고 해당 유저가 null로 인식됐습니다.
이에 null 값을 처리하는 조건문을 구현하다가 다른 방법을 탐색했습니다.
역시나 문제 해결 방법은 존재했습니다.
깔끔한 문제 해결을 위해 소켓의 연결을 해제하는 이벤트를 등록했습니다.
소켓을 닫는 너무나도 당연한 프로세스를 간과했던 것입니다.
2시간 동안 삽질을 한 자신이 부끄럽습니다. 😅
Docs를 더 철저하게 공부해야겠습니다.

유저간 실시간 메시지 동기화

• 👉🏻 WHAT? 특정 유저에게만 메시지를 전달
• 👉🏻 HOW? socket.io의 private 메시징 기능을 사용

나를 제외한 상대방에게 메시지를 전달해야 했는데 기존의 socket 객체로는 불가능했습니다.
socket 객체 관련해서 검색을 진행하던 중 io.to() 메서드를 발견했습니다.
바로 특정 클라이언트에게만 메시지를 보내는 메서드였습니다.
소켓 서버에서 getMessage 이벤트를 발생시키며 해당 메서드를 사용함으로써 실시간으로 메시지를 동기화하는 문제를 해결했습니다.