[Socket.io] socket.emit과 socket.on

1. 클라이언트 → 서버로 데이터 보내기(socket.emit)

socket.emit: 서버-클라 or 클라-클라 간에 이벤트 전송시 사용됨

지정된 이벤트 이름과 함께 데이터 전송 → 해당 데이터는 반대쪽 끝에서 이벤트 리스너에 의해 수신됨

socket.emit('message', 'Data Example');

 

socket.emit( 이벤트 이름+ 데이터 );

 

2. 서버에서 데이터 수신하기(socket.on)

서버 측은 socket.on 메서드를 사용하여 특정 이벤트를 수신 대기(listen) 함

socket.on(수신하고자 하는 이벤트 이름, 해당 이벤트 발생 시 실행될 콜백 함수)

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    console.log('메시지: ' + msg);
  });
});

 

🔍양방향 통신의 흐름

1. 클라가 socket.emit을 사용하여 서버로 이벤트, 데이터 전송

2. 서버 측: socket.on으로 이벤트 수신 대기

3. 해당 이벤트 발생하면 서버에서 지정된 콜백함수 실행

 

예시 코드 뜯어보기

useEffect(() => {
        const {name, room} = queryString.parse(window.location.search);
        socket = io(END_POINT);
        setName(name);
        setRoom(room);
        socket.emit('join', {name, room}, (err) => {
          if (err) {
            alert(err);
          }
        });
        return () => {
          socket.emit('disconnect');
          socket.off();
        }
      }, [END_POINT, window.location.search]);

 

1. END_POINT와 window.location.search가 변경될 때

새로운 소켓 연결 생성&사용자 이름과 채팅방 정보 업데이트

 

2. queryString 파싱

const {name, room} = queryString.parse(window.location.search);

 

`?name=사용자이름&room=채팅방이름`

 

3. 서버에 채팅방 참여 이벤트 join 전송

socket = io(END_POINT);
setName(name);
setRoom(room);
socket.emit('join', {name, room}, (err) => {
  if (err) {
    alert(err);
  }
});

 

4. 컴포넌트가 언마운트 될 때: 클린업 함수

socket.emit('disconnect');
  socket.off();

소켓 연결 종료 & 모든 이벤트 리스너 제거