React + socket.io 실시간 채팅 구현 (비공개)

핵심은 join을 이용한 여러개의 채팅방을 운영하는 것

 

socket.io를 이해하는데 있어서 가장 중요한 핵심 개념들

• emit
• on
• join

 

emit은 단어 그대로 이벤트를 발생시키는 것입니다

 

 

첫번째 인자인 sendMessage는 발생시키고자 하는 이벤트입니다

서버측, 클라이언트 측이든 상관 없이 이벤트를 발생시키고자 한다면 emit을 통해 발생 시켜주면 됩니다

 

 

 

On은 Emit으로 발생된 이벤트에 대한 응답을 나타냅니다.

 

 

채팅은 주고 받는 것이 기본이기 때문에

emit으로 보내고 on으로 응답하는 아주 간단한 구조입니다

 

 

Join

 

join도 하나의 이벤트라고 생각하면 간단합니다

socket이 알아서 방을 관리해주는 것입니다

클라이언트와 서버측의 코드를 함께 보겠습니다

 

1. 클라이언트 측에서 emit을 통해 join이라는 이벤트를 발생시키면서 원하는 데이터(이름, 룸) 를 넘겨줍니다.

2. 서버측에서 on으로 join에 대한 응답을 합니다.

3. 그리고 그 응답의 결과로 socket.join(room) 을 통해서 클라이언트에서 원하는 방으로 join을 시켜줍니다