[React] soket.io version2 리액트 소켓IO 사용기

| React Soket IO

---

socket.io란 websocket기반으로 client와 server간 양방향 통신을 가능하게 해주는 모듈입니다.
기본적인 socket의 연결, 해제기능들을 자바스크립트로 가능하게 만든 모듈이라 생각하시면 편할 것 같습니다.
기본적인 socket의 실행흐름에 대해 알고 사용하는 것이 더 의미가 있을 것 같습니다.

 

 

Soket IO 특징

단점

- 한 번 연결해 놓으면 전역적인 특징을 갖고 있기 때문에 리액트에서 하나의 components에 연결을 했다가 다른 compoentns에 연결을 하면 연결이 끊어져버린다.

 

해결

- 위와 같은 이슈를 해결하기 위해서 하나의 components 즉, common compoennts에 기능 구현을 하면 된다.

( 예전에는 HOC(High order components)로 구현을 했어지만 HOC가 hook으로 대체되었다.)

 

 

 

Soket IO 사용 & 핵심 함수

 

npm install socket.io  //소켓 다운로드 

type script 타입스크립트 함께 사용시
npm install @types/socket.io

 

connect

soket 연결

// server 쪽에서 setting이 다되어 있다는 가정
const soket = io.connect(`${backUrl}`);

 

emit 

 데이터 전송 (서버-> 클라이언트 / 클라이언트  -> 서버)

// example
// emit : soket쪽으로 hi라는 이름으로 data를 보낸다.(첫 번째 : 이벤트명, 두 번째: data)
soket.emit('hi', data);

on

데이터를 받는다 (서버-> 클라이언트 / 클라이언트 -> 서버)

  // on : soket에서 data 받기 첫 번째 : event 이름, 두 번째 : data 받는 callback 함수
  soket.on('message', (data) => {
    console.log(data);
  });

disconnect

연결을 끊음

soket.disconnect();

 

전체 code