Enterprise Teaho

  • Node.js
  • WebRTC
  • Socket.io
  • Zoom

Socket.io (1)

My 40th Post


Socket.io Study with Zoom Clone

by Enterprise Kim.T.H

const zoom = (io) => {
  socket.on("connection", () => {
    console.log("welcome to socket.io world!!");
  });
};

Socket.io가 뭐임?

Socket.io 공식 홈페이지에 접속하여 Document탭에 들어가면 가장 먼저 아래의 문구를 볼 수 있다.

‘Socket.IO is a library that enables real-time, bidirectional and event-based communication between the browser and the server’

한국어로 간단히 번역해 보자면

‘브라우저와 서버 간의 실시간 양방향 이벤트 기반 통신을 가능하도록 하는 라이브러리’라고 할 수 있다.

Socket.io 라이브러리를 안쓰면 Socket를 못쓰나?

Socket.io를 왜써?

Socket은 브라우저에서 기본적으로 제공을 해주기 때문에 굳이 Socket.io를 사용하지 않더라도 사용할 수 있다.

그렇다면 Socket.io 라이브러리를 왜 쓰는 것일까?

바로 양방향 이벤트 기반 통신을 쉽게 사용할 수 있도록 지원해주기 때문이다.

즉, Socket과 관련된 이벤트 또는 통신을 더 다양하고 쉽게 이용할 수 있도록 지원해준다는 말이다.

이벤트 기반의 통신이 뭐지?

위에서 Socket.io가 무엇인지 간단하게 설명할 때 사용했던 ‘이벤트 기반 통신’이란 무엇일까?

코드를 보면서 진행해보자. 아래의 코드는 브라우저에서 지원하는 ‘WebSocket’의

서버와 성공적으로 연결되었을 때 실행되는 코드이다.


  //Client Side
  webSocket.addEventLinstener("opne", () => {
    console.log("Connect to Server");
  });

위의 코드에서 볼 수 있듯이 일반적인 WebSocket은 addEventLinstener의 형태로 이벤트를 등록하여 사용한다.

Socket.io도 비슷한 형태이지만 이벤트의 이름을 개발자가 만들어서 사용할 수 있다.

아래의 코드는 Socket.io를 이용한 형태이다.


  //Client Side
  socket.on("connect", () => {
    console.log("Connect to Server");
    socket.emit("welcome", "Hello Server!", () => {
      console.log("Server is done!");
    });
  });

위의 WebSocket만을 이용한 코드보다 무언가 많아진 것을 한눈에 확인할 수 있다.

이 코드가 하는 일은 Server에 Client가 정상적으로 연결되었을 때

잘연결되었다는 메시지를 콘솔에 출력해주고 서버에 ‘welcome’이라는 이벤트를 발생시킨다.

위의 코드와 획기적으로 다른점은 클라이언트에서 서버로 이벤트를 발생시킨다는 부분이다.

또한 이벤트의 이름이 ‘welcome’으로 개발자가 지정한 이름을 사용한다는 점 또한 다르다.

마치며

오늘은 간단히 Socket.io가 무엇이고 왜 쓰는지,

그리고 브라우저에서 지원해주는 WebSocket하고는 어떻게 다른지 포스팅하였다.

다음시간에는 Socket.io의 주요 기능 중 개발자가 이벤트 이름을 주고,

서버에 이벤트를 발생시켰을 때 서버에서는 어떻게 이용할 수 있는지를 포스팅할 예정이다.

그럼 안녕 !

Good Bye ~