Web Socket과 Socket.io의 차이

Web Socket이란?

실시간으로 상호작용하는 웹 서비스를 만드는 표준 기술

HTTP 프로토콜은 클라이언트에서 서버로 단방향 통신을 위해 만들어진 방법이고
실시간으로 웹을 구현하기 위해서는 양방향 통신이 가능해야 합니다.
Web Socket 이전에 Polling, Straming 방식의 Ajax 코드를 이용하여 이를 구현했습니다.

하지만 이 방법은 각 브라우저마다 구현 방법이 달라 개발이 어렵다는 단점이 있고,
이를 위해 HTML5 표준의 일부로 Web Socket이 만들어지게 되었습니다.

Web Socket 의 특징

• 소켓을 사용하여 데이터를 자유롭게 주고 받을 수 있다.
• 기존의 요청 - 응답 관계 방식보다 더 쉽게 데이터를 교환할 수 있다.
• 다른 HTTP Request와 마찬가지로 80 포트를 통해 웹 서버에 연결한다.
• http:// 대신 ws:// 로 시작하여 Streaming 과 유사한 방식으로 푸쉬를 지원한다
• 클라이언트인 브라우저 중 Chrome, Safari, Firefox, Opera 에서 Web Socket을 사용할 수 있으며, 각종 모바일 브라우저에서도 Web Socket을 사용할 수 있다.
  

Web Socket 의 장점

• HTTP Request를 그대로 사용하기 때문에 기존의 80, 443 포트로 접속 하므로 추가로 방화벽을 열지 않고도 양방향 통신이 가능
• HTTP 규격인 CORS 적용이나 인증 등 과정을 기존과 동일하게 사용할 수 있다
  하지만 Web Socket 은 미래의 기술로 아직 인터넷 기업에서 상용되진 않는다.

Socket.io

브라우저의 종류에 상관없이 다양한 방식의 웹 기술을 실시간으로 구현할 수 있도록 한 기술

다양한 방식의 실시간 웹 기술을 손쉽게 사용할 수 있는 하나의 모듈, 라이브러리 라고 이해하면 됩니다.

개발자가 Socket.io를 개발하고 클라이언트로 푸시 메세지를 보내면
Web Socket 을 지원하지 않는 브라우저의 경우 브라우저 모델과 버전에 따라 Ajax Long Polling, MultiPart Streaming, Iframe 을 이용한 푸시, JSONP Polling, Flash Socket 등 다양한 방법으로 내부적 푸시 메세지를 보내줍니다.

정리하자면

Web Socket을 지원하지 않는 어느 브라우저라도 Socket.io를 사용하여 푸시 메세지를 일관된 모듈로 보낼 수 있다.

Socket.io 를 사용해 보자

• Socket.io는 브라우저에서는 JavaScript, 서버에서는 Node.js 를 사용합니다.
• Socket.io를 사용하려면 다음과 같이 npm을 이용하여 Socket.io 를 웹 서버에 설치한다.

  npm install socket.io

• 설치 후 아래와 같이 서버 스크립트를 작성한다.

// 80 포트로 소켓을 연다
var io = require('socket.io').listen(80);

// connection이 발생할 때 핸들러를 실행한다.
io.sockets.on('connection', function (socket) {  
// 클라이언트로 news 이벤트를 보낸다.
    socket.emit('news', { hello: 'world' });

// 클라이언트에서 my other event가 발생하면 데이터를 받는다.
socket.on('my other event', function (data) {  
        console.log(data);
    });
});

• 작성한 스크립트를 nohup 등을 이용하여 백그라운드로 실행한다.

  • nohup 을 이용하면 hang-up signal이 발생해도 스크립트의 동작이 멈추지 않는다.

  nohup node ./server.js &  

• 클라이언트는 Socket.io 패키지에 있는 클라이언트 스크립트를 이용하여 아래와 같이 작성한다.

  <script src="/socket.io/socket.io.js"></script>  
  <script>  
  // localhost로 연결한다.
  var socket =  
    io.connect('http://localhost');
  
  // 서버에서 news 이벤트가 일어날 때 데이터를 받는다.
  socket.on('news',  
    function (data) {
      console.log(data);
    //서버에 my other event 이벤트를 보낸다.
      socket.emit('my other event', 
        { my: 'data' });
  });
  </script>   

• io.Socket() 메서드를 호출하면 웹 서버(Node.js를 이용하는 웹 서버)와 연결한다. 이때 서버로부터 sessionId 정보와 timeout 정보를 받고, 브라우저의 Web Socket 지원 여부, FlashSocket 지원 여부를 보내고 크로스 도메인 설정 정보 등을 주고 받은 후 적합한 실시간 웹 방식을 선택한다.

• Socket.io

  • 공식 문서: https://socket.io/

  • Socket.io 깃허브: https://github.com/socketio/socket.io

출처: https://d2.naver.com/helloworld/1336