MasonTALK 개인 프로젝트 5일차(2023.04.30.)

🕹 5일차 구현 사항

프론트엔드

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를 전달합니다.

🚀 트러블슈팅

1. 온라인 유저 집계

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

예를 들어 현재 2명의 유저가 로그인 한 상태라고 가정하겠습니다.

이때 한 유저를 로그아웃 시키면 온라인 상태인 유저 수는 1명으로 감소해야 합니다.

하지만 콘솔에 출력되는 유저 수는 계속해서 2명을 유지했습니다.

로그아웃을 했음에도 불구하고 해당 유저가 null로 인식되기 때문입니다.

이에 null값을 처리하는 조건문을 구현하던 중, 구글링을 통해 다른 솔루션에 대해 생각했습니다.

역시나 또 다른 문제 해결 방법은 존재하고 있었습니다.

깔끔한 문제 해결을 위해 소켓 연결을 해제하는 이벤트를 등록했습니다.

소켓을 닫는다는 너무나도 당연한 프로세스를 간과했던 것입니다.

이것 때문에 3시간 동안 삽질을 하다니..😅

docs를 더 철저하게 읽는 습관을 가져야겠습니다. 하하하..

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

• WHAT? 특정 유저에게만 메시지를 전달해야 하는 문제
• HOW? socket.io의 private 메시지 기능을 사용

나를 제외한 상대방에게 메시지를 전달해야 하는데 기존의 socket 객체로는 불가능했습니다.

socket 객체 관련해서 검색을 진행하던 중, io.to() 메서드를 알게 됐습니다.

특정 유저에게만 메시지를 보낼 수 있는 메서드였습니다.

소켓 서버에서 getMessages 이벤트를 발생시키며 해당 메서드를 사용함으로써 실시간으로 메시지를 동기화해야 하는 문제를 해결했습니다.