socketIO Room 설정하는 부분

Slack 클론 코딩[실시간 채팅 with React]

채널 만들기

작성

460

namespace는 workspace이고, room은 channel로 두신 것 같은데, front에서 특정 room에 들어가는 코드가 없는 것 같은데 이에 대해서 혹시 설명 부탁 드릴 수 있을까요?

namespace까지는 useSocket이용해서 연결하는데, room 관련해서 계속 찾아보는데 강의에서 못본것 같아서 물어봅니다.

react 웹팩 Socket.io babel typescript 클론코딩

답변 2

제로초(조현영)

지식공유자

프론트에서는 room에 못 들어가고, 서버에서 들어갈 수 있습니다.

그래서 프론트에서 방 입장시 저는 socket.emit('enterRoom', roomId) 해서

백엔드에서

socket.on('enterRoom', (roomId) => {
socket.join(roomId);
});

합니다.

NoobDev

질문자

그리고 혹시 이 질문과는 별개로, 인스타그램의 DM을 구현한다고 하면 어떻게 socketIO를 짜야할 지 여쭤봐도 될까요?

저의 경우에는 인스타그램의 DM에는 일대일채팅과 그룹채팅이 모두 가능하고 딱히 슬랙처럼 나눠지지 않아서, 서버에서 'chat' 네임스페이스와 그 안의 'roomId'로 룸을 만들어서 하려고 했습니다.

그런데, 인스타그램에서는 1번 채팅방에서 채팅을 하고 있더라도, 다른 채팅방에서 채팅이 오면 바로 좌측 채팅방 리스트에서 새로운 채팅이 왔다는 것을 알려주는데 이 기능을 어떻게 구현해야 할 지 모르겠습니다. (A와 카톡을 하고 있을 떄 B와의 카톡도 socket으로 들어오는 그런 느낌...)

socketIO에 대한 이해가 부족한 것인지 모르겠으나, 특정 채팅방에서 채팅을 하고 있는데 다른 채팅방에서 보낸 채팅을 socket으로 받으려면

1. 로그인과 동시에 모든 채팅방 socket에 들어가야 하거나

2. 아니면 모든 채팅을 socketID로 찔러넣고 프론트 측에서 이를 하나하나 senderID, chatRoomId로 관리해야 할 것 같다는 생각이 듭니다.

혹시 이러한 기능의 경우는 어떻게 구현하는 것이 좋을까요?

제로초(조현영)

지식공유자

다양한 방식이 있는데 모든 채팅방 소켓에 들어가는 것은 너무 헤비하므로 알림용 소켓을 만듭니다. 2번 방식이라고 보시면 됩니다. 프론트측에서 senderId, chatRoomId 보고 해당하는 곳에 +1 합니다.

인프런 커뮤니티 질문&답변

socketIO Room 설정하는 부분