인턴 Study #3. WebSocket & Socket.io

beoms96·2020년 6월 19일
1

인턴 공부

목록 보기
4/11
post-thumbnail

1. WebSocket

1. 개요

하나의 TCP 접속에 전이중 통신 채털을 제공하는 컴퓨터 통신 프로토콜로 HTTP와 구별된다. 두 프로토콜 모두 OSI 모델의 제7계층에 위치하고, 제 4계층의 TCP에 의존한다. 웹소켓은 HTTP 포트 80 또는 443 위에 동작하도록 설계되었고, HTTP 프록시 및 중간 층을 지원하도록 설계되어있어 HTTP 프로토콜과 호환이 된다. HTTP 업그레이드 헤더를 사용하면 HTTP 프로토콜에서 웹소켓 프로토콜로 변경된다.

웹 브라우저와 웹 서버 간의 통신을 가능케 하고 실시간 데이터 전송을 용이하게 한다. 연결이 유지된 상태에서 메세지들을 오갈 수 있게 허용함으로써 가능하게 됐고, 이를 양방향 대화 방식이라 한다.

2. 기존 방식과의 차이점

전형적인 브라우저 렌더링 방식은 HTTP 요청에 대한 HTTP 응답을 받아서 브라우저의 화면을 깨끗하게 지우고 받은 내용을 새로 표시하는 방식이다. 내용을 지우고 다시 그리면 브라우저의 깜빡임이 생기고 이러한 깜빡임 없이 원하는 부분만 다시 그리고 실시간으로 상호작용하는 방식이 나타나고, 사용자와 상호작용하는 웹 서비스를 선호하는 사용자가 증가하면서 RIA (Rich Internet Application) 기술의 발달이 촉진되었다.

상호작용하는 웹 서비스를 위해 숨겨진 프레임 (Hidden Frame) 을 이용한 방법이나 Polling, Long Polling, Streaming 등 다양한 방법을 사용했지만 이는 단방향 메시지 교환 '규칙' 이었다.

  • Polling: 클라이언트에서 일정 주기마다 요청을 보내고 서버는 현재 상태를 바로 응답하는 방식 -> 불필요한 트래픽 발생

  • Long Polling: 클라이언트에서 요청을 보내고 서버에서는 이벤트가 발생했을 때 응답을 내려주고, 클라이언트가 응답을 받았을 때 다시 다음 응답을 기다리는 요청을 보내는 방식 -> 이벤트가 잦다면 순간적으로 과부하 생김.

  • Streaming: 이벤트가 발생했을 때 응답을 내려주는데 응답을 완료시키지 않고 계속 연결을 유지하는 방식.

결론적으로 더 쉽게 상호작용하는 웹 페이지를 만들기 위해 더 자유로운 양방향 메시지 송수신이 필요했고 이가 WebSocket API 이다.

3. 간단한 WebSocket API

  1. WebSocket 객체 이용.
if ('WebSocket' in window) {  
    var oSocket = new WebSocket(“ws://localhost:80);

    oSocket.onmessage = function (e) { 
        console.log(e.data); 
    };

    oSocket.onopen = function (e) {
        console.log(“open”);
    };

    oSocket.onclose = function (e) {
        console.log(“close”);
    };

    oSocket.send(“message”);
    oSocket.close();
}

소켓을 연결할 때 - onopen
소켓 연결을 종료할 때 - onclose
메시지를 받았을 때 - onmessage 등의 이벤트를 각각 정의할 수 있다.
서버에 메시지를 보내고 싶을 때는 send 를 사용한다.

2. Socket.io

1. 개요

Socket.IO 는 실시간 웹 애플리케이션을 위한 Javascript 라이브러리이다. 웹 클라이언트와 서버 간에 실시간 양방향 통신이 가능하다. 브라우저에서 실행되는 클라이언트 측 라이브러리와 Node.js 용 서버 측 라이브러리의 두 부분으로 구성된다.

Socket.io 는 WebSocket, FlashSocket, AJAX Long Polling, AJAX Multi part Streaming, IFrame, JSONP Polling 을 하나의 API로 추상화한 것이다. 즉 브라우저와 웹 서버의 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용하는 방식이다.

2. 간단한 Socket.io 사용법

  1. 설치
    npm install socket.io

  2. 서버 스크립트

// 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);
    });
});
  1. 클라이언트 스크립트
<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 를 이용하는 웹 서버) 와 연결한다. 이 때 서버로부터 session ID 정보와 Timeout 정보를 받고, 브라우저의 WebSocket 지원 여부, FlashSocket 지원 여부를 보내고 크로스 도메인 설정 정보 등을 주고 받은 후 적합한 실시간 웹 방식을 선택한다.

출처: 위키백과, Naver D2

profile
beoms96 개발 노트

0개의 댓글