채팅방 소켓 작동 방식 정리, 소켓 명세

[parktest0325]

로직상 문제되어보이는 부분이 있다면 댓글로 수정요청 해주세요

현재 문제점 : 모든 채팅방에 chat_active_${channel_id} 룸에 join 되어있고, 채팅방 상세 컴포넌트에 접근했을때 필요한 이벤트만 listen.
=> 채팅방 상세 URL에 있는경우 다른 채팅방에서 발생한 이벤트까지 listen되어 이벤트 메시지에 channel_id 를 포함시켜서 처리함
=> 쓸모없는 메시지가 많이 들어옴

기능

채팅방 외부

1. 초대, 밴, 킥 당한 경우 알람
2. 로그인 이후 활성화하지 않은 채팅방의 채팅 메시지를 받으면 메시지 카운트

채팅 리스트

3. 채팅방 리스트에서 채널설정(title, owner, type) 이 변경된 경우 적용 opt

채팅방 내부

4. 밴, 언밴, 킥, 뮤트, 언뮤트, 권한변경에 대한 요청
5. 밴, 킥, 뮤트에 대해 모든 채팅방 유저가 프론트에서 상태관리 (시간, 리스트변경)
6. 어떤 유저의 초대, 입장, 나가기에 대한 모든 채팅방 유저가 프론트에서 상태관리
7. 채팅 메시지 표시

전체 로직

1️⃣ 로그인 시 로그인 유저가 join된 모든 방의 chat_alarm_${channel_id} 룸에 join

=> 시점 : 소켓을 connect 했을때 백엔드에서 모든 채팅방에 join
alarm 은 사용자가 어떤 경로에 있는지 상관없이 받아야하는 데이터들이 전달됨

⭕ 필수 listen 이벤트 (backend에서 emit)

당사자에게 알람을 주는 이벤트. 채팅방리스트를 보고있다면 채팅방 리스트 변경

• 초대 이벤트 (event: alarm, type: invite) : 초대됐을때 내 채팅방 리스트에 추가 + 알람을 위해 발생
  • 🚚 { channel_id, title }
• 밴 이벤트 (event: alarm, type: ban) : 내 채팅방 리스트에서 제거 + 알람
  • 🚚 { channel_id, title }
• 킥 이벤트 (event: alarm, type: kick) : 내 채팅방 리스트에서 제거 + 알람
  • 🚚 { channel_id, title }
• 채팅 이벤트 (event: alarm, type: chat) : 어떤 채팅방에 채팅 메시지가 왔는지를 위한 이벤트
  • 여기에선 컨트롤바의 메시지 버튼에 카운트
  • 들어가지 않은 채팅방에서 발생하는 메시지. 어떤 채널에서 몇개의 메시지가 왔는지 카운트정도만 한다.
  • 🚚 { channel_id, title? } => 알람을 보내기 위해서는 title이 있으면 좋음
  • opt 메시지내용을 알람으로 표시하는 기능은 닉네임, 내용, 채팅방 이름 까지 가져와야 하기때문에 보류.
    • 프론트에서 메시지 내용에대한 알람을 표시하려면 모든 채팅방과 채팅방의 모든 유저리스트에 대해 관리해야한다. => 이건 너무 복잡할듯

2️⃣ 채팅방 리스트에서 채팅방 상태가 변경되면 리스트에 적용

API CALL: 내 채널리스트 컴포넌트에서 api 요청해서 업데이트.
특정 채팅방 정보가 변경되는건 적용하지 않아도 초대나 밴같은 리스트 변경은 적용시켜줘야함

⭕ 필수 listen 이벤트

이미 1️⃣ 에 구현된 이벤트들 (초대, 밴, 킥, 챗)을 사용해서 내 채팅방리스트에서 제거하거나 카운트 증가

❌ 옵션 listen 이벤트

• 채널변경 이벤트(event: alarm, type: update) : 채널 내용이 수정되는 경우 리스트에 반영하기 위해 전달
  • owner, type, title이 변경된 경우 받아야함.
  • 그럼 글로벌 리스트에 대한 이벤트를 받아야하나? => 그것도 이상해서 보류
  • 🚚 { channel_id, type(title, owner, type), data(어떤내용으로 변경됐는지) }

3️⃣ 채팅방 상세에 접근했을때 chat_active_${channel_id} 룸에 join

=> 시점 : 프론트에서 채팅방 상세에 접근해서 enter-chat 이벤트 호출
=> API CALL : 채팅방 users, message log, mutelist, (관리자: banlist)
채팅방 안에서 확인해야하는 데이터를 내가 실제로 보고있을때만 받기 위해 상세에 접근할때만 chat_active 에 join 시킴

⭕ 필수 emit 이벤트 (backend의 decorator)

• 참여 이벤트 (event: enter-chat) : 내가 참여했다는 이벤트. chat_active에 join하는것을 요청하기 위함
  • ☁️ { channel_id }
• 밴 (event: ban-chat) : 밴, 언밴, 킥, 뮤트에 대한 요청
  • ☁️ { user_id, end_at, channel_id }
• 언밴 (event: unban-chat)
  • ☁️ { user_id, channel_id }
• 킥 (event: kick-chat)
  • ☁️ { user_id, channel_id }
• 뮤트 (event: mute-chat) : 언뮤트는 end_at을 new Date(0); 으로 해서 전달
  • ☁️ { user_id, end_at, channel_id }
• 메시지 전송 (event: message-chat) : 메시지 전송 요청
  • ☁️ { user_id, content, channel_id }
• 권한 변경 API
  • ☁️ { }

⭕ 필수 listen 이벤트

채팅방의 전체 유저가 동일하게 유저의 상태를 관리하기 위함.

• 킥 (event: kick) : 유저리스트에서 deleted_at 에 현재시간 넣기
  • 🚚 { target_id }
• 밴 (event: ban) : 유저리스트에서 deleted_at 에 현재시간 넣기, 밴리스트에 추가 + setTimeout
  • 🚚 { target_id, end_at }
• 뮤트 (event: mute) : 뮤트리스트에 추가 + setTimeout
  • 🚚 { target_id, end_at }
• 언밴 (event: ban) : 밴리스트에서 제거 + clearTimeout
  • 🚚 { target_id }
• 언뮤트 (event: mute) : 뮤트리스트에서 제거 + clearTimeout
  • 🚚 { target_id }
• 다른유저의 참여 (event: user, type: enter) : 유저리스트에 추가
  • 🚚 { type: "enter", [ {target_id, nickname, profile} ... ] } => 여러사람이 초대되는 경우도 있어서 유저리스트 형태
• 다른유저의 나가기 (event: user, type: leave) : 유저리스트에서 delete_at에 현재시간 넣기
  • 🚚 { type: "leave", user_id }
• 에러 (event: error) : 소켓으로 특정 작업 요청시 (message 전송, 킥, 밴, 뮤트 등의 작업) 에러가 발생한 경우 에러출력
  • 🚚 { title?, content: 어떤 에러인지 표시할 내용 } => title 은 Socket Error로 고정해뒀는데, 혹시 직접 지정하고 싶으시면 title 도 포함해주시면 됩니다
• 메시지 (event: chat) : 누군가가 메시지를 보내면(message-chat) 서버에서 생성 후 응답받는 메시지를 메시지리스트에 추가
  • 🚚 { message_id, user_id, content, created_at }
• 권한 변경 (event: role) : 누군가의 권한이 변경된경우 유저리스트에서 권한변경
  • 🚚 { type: role, user_id }

4️⃣ 채팅방을 닫을때 chat_active_${channel_id} 룸에서 leave

=> 시점 : 채널아이디 변경, 컴포넌트 언마운트 시 leave-chat 이벤트 호출

⭕ 필수 emit 이벤트 (backend의 decorator)

• 나가기 이벤트 (event: leave-chat) : 내가 채팅방에서 나갔다는 이벤트. chat_active에서 leave 하는것을 요청
  • ☁️ { channel_id }

5️⃣ 채팅방에서 나갈때 chat_alarm_${channel_id} 룸에서 leave

=> 시점 : 채널에서 나갈때 백엔드에서 처리

[parktest0325]

[kyu-baek]
특정 채팅방 상세 페이지에 있던 유저가, alarm 타입 ban or kick 을 받았을 때

channel_id 를 확인해서 지금 상세 채팅방이 해당 채팅방인지 확인
만약 해당 채팅방과 동일하다면, 프론트에서 백으로 leave-chat 이벤트를 요청해서, chat_active 을 leave 할 수 있도록 해주어야 함.
banUser, kickUser 함수를 수행할 때는 ban or kick 당하는 당사자는 chat_alarm 에서만 leave 시키기 때문에, 이후 프론트에서 leave-chat 요청이 필수 일 것 같습니다.

ban 과 unban,
mute 와 unmute

이 두가지는 end_at 이 포함되어 있는지 아닌지에 따라 구별하시는 게 좋을 것 같습니다. mute 를 시킬 때, ban 을 시킬 때는 반환값에 end_at 이 포함되지만, 해제할 때는 포함되지 않습니다.

그래서 굳이 따로 type 을 지정해서,

.emit('ban', { type:'ban or unban' -> 이런식으로 구분할 필요는 없을 것 같습니다.

[JuneParkCode]

chat_active 에서 다음과 같은 이벤트가 추가됩니다.
event user_status
payload

interface UserUpdateDto {
  user_id: number;
  nickname: string;
  profile_url: string;
  status: UserStatusEnum; //(0 ONLINE, 1 OFFLINE)
}

chat 에서 user 상태 변경이 되었을 때 notifier 를 통해서 알람이 갑니다.