Socket.IO

Socket.IO 는 WebSocket을 기반으로 한 라이브러리로, WebSocket 외에도 다양한 실시간 통신 프로토콜을 지원합니다. 이는 WebSocket이 지원되지 않는 환경에서 폴백(Fallback) 옵션을 제공하며, 브라우저 및 서버 간의 양방향 통신을 단순화하는 데 도움이 됩니다.

그 전에 webSocket에 대해 궁금해서 찾아보았다.

웹 소켓 프로토콜은 웹 브라우저와 웹 서버 간에 양방향 실시간 통신을 지원하기 위해 설계되었으며, 웹 브라우저에서 네이티브로 지원되고 있습니다. 이것은 웹 브라우저에 내장되어 있는 것이 아니라 웹 브라우저의 자바스크립트 API를 통해 사용할 수 있습니다.
HTML5부터는 WebSocket이라는 객체가 웹 브라우저의 JavaScript API에 포함되어 있어서, 개발자는 이 객체를 사용하여 웹 소켓 연결을 만들고 관리할 수 있습니다.

기본적으로 웹브라우저에는 웹소켓이 내장되어있다. 그래서 이를 이용하여 양방향 통신. 즉 실시간으로 서버와 클라이언트가 정보를 주고 받을수 있게 된다.

Socket.IO는 WebSocket을 기반으로 한 라이브러리로, 웹 소켓 뿐만 아니라 다양한 실시간 통신 프로토콜을 지원하고 WebSocket이 지원되지 않는 환경에서도 실시간 통신을 가능하게 하며, 브라우저 및 서버 간의 양방향 통신을 단순화 또한, Socket.IO는 웹 소켓 연결을 폴백(Fallback) 옵션을 통해 다른 통신 방법(예: 폴링, 롱 폴링)으로 대체할 수 있으므로 다양한 환경에서 사용할 수 있다

쉽게 말해서 웹소켓에을 기반으로 더 업그레이드된 라이브러리가 SocketIO 이다.

이벤트 통신 방법

// 해당 이벤트를 받고 콜백함수를 실행
socket.on('받을 이벤트 명', (msg) => {
})

// 이벤트 명을 지정하고 메세지를 보낸다.
socket.emit('전송할 이벤트 명', msg)

기본적으로 쓰이는 두 메소드다.

처음에 이 부분이 이해가 잘 안됐다. 코드로 설명하자면

// clinet
// 클라이언트에서 서버로 보내는 메소드
socket.emit("message", chatMessage);

emit으로 이벤트명("message")과 chatMessage(메시지)를 서버에 전달한다

참고로 emit은 번역하면 '방출하다' 이다.

// server
// message 이벤트 발생 후 콜백함수 실행
 socket.on("message", (message) => {
   // 서버에서 클라이언트로 보내는 메소드
    socket.emit("message", message);
  });

서버에서 같은 이벤트명인("message")을 받고 콜백함수를 실행하여,

socket.emit "이벤트명" 으로 클라이언트로 또 전달한다 (원래 코드는 roomID가 있어서 글로 보냈음)

// client
// 서버에서 받아와서 콜백함수 실행
socket?.on("message", (message) => {
        setChat((prevChat) => [...prevChat, message]);
      });

서버로부터 이벤트명을 받고 콜백함수를 실행해서 매개변수를 바탕으로 정보를 업데이트 해주면된다

이게 기본적인 양방향데이터 이용 방법이다.. 이걸 응용을 해서 채팅기능이 된다