[React] Websocket

npm i socket.io-client

 

- socket은 연결해 놓으면 전역적인 특징을 띄기에 하나의 컴포넌트에 연결 후 다른 컴포넌트에 가면 연결이 끊어 질 수 있다. 그러므로, 컴포넌트에 종속적으로 연결해놓으면 컴포넌트가 사라질 경우 연결이 끊어질 위험성이 있으므로 그걸 방지하기 위하여 공통 된 컴포넌트에 연결해야 한다.

 

- hook에 socket을 연결하면 해결된다. 컴포넌트간의 공통적인 일을 수행해야 할 경우는 부모 컴포넌트에 선언을 하는 것도 좋으나, view가 들어가지 않는 경우에는 hook에서 처리하면 된다.

 

- socket.io의 경우에 socket을 지원하지 않는 브라우저도 있기에 http로 먼저 요청을 보낸 후 socket을 지원하는 브라우저일 경우 socket.io로 전환하여 보낸다.

 

- socket.io는 receiveBuffer와 sendBuffer가 있으며 데이터의 송/수신이 잘 되고 있는 상황이라면 버퍼가 항상 비어있어야 한다. 배열안에 데이터들이 모여있다는 것은 보내거나 받아야 할 데이터가 있으나 전송하지 못하고 있다는 의미이다. 연결이 끊겨 있어 보내거나 받지 못한 데이터의 경우 buffer에서 모두 모았다가 연결이 된 후 한꺼번에 송/수신한다.

 

- sid( socket id)를 백엔드에서 프론트로 보내주면 연결을 맺게 된다. 그 후 프론트에서 어디로 연결할지 요청을 하면 된다. 숫자로 계속 주고 받는 메세지는 연결을 주기적으로 확인하는 동작이다.