웹소켓(WebSocket) 시작하기(강의,번역)

번역 : Mattew, Chang(www.izect.kr)
(이 글은 한국 HTML5 사용자 모임에 기고된 글입니다.)

(역자주)

웹 소켓에 대해 간단히 따라할 수 있는 튜토리얼입니다. 간단히 채팅을 구현해 봄으로써, 웹 소켓과 서버의 송수신에 대해 가볍게 이해하는 데 많은 도움이 될 것입니다. 약 1년 전에 작성된 튜토리얼이니 감안하시고 보세요 ^^

HTML5 의 새로운 멋진 기능 중 하나가 바로 서버랑 AJAX 가 없이도 사용 가능한 웹 소켓입니다. 이 튜토리얼에서 우리는 PHP 서버를 통한 웹 소켓이 어떻게 진행되는가를 알아보고, 클라이언트끼리 메시지를 주고 받으며 웹 소켓 프로토콜의 사용법을 알아보겠습니다.

웹소켓은 무엇인가?

웹 소켓은 TCP 소켓의 두가지 방법으로 커뮤니케이션 하는 일종의 푸시(PUSH) 기술이다. 표준화는 아직 진행중이지만, 크롬과 사파리의 최신 버전에서는 웹 소켓을 지원한다.

왜 웹소켓으로 바꿔야 하는가?

웹 소켓은 긴 풀링(pool, 각각의 요청에 따라 풀 객체를 생성하는 방식)을 대체할 수 있습니다. 풀 방식은 클라이언트는 서버가 전달할 데이터가 없더라도, 서버측에서 최신의 데이터가 전송할 준비가 될 때까지 서버로 요청(request)을 보냅니다. 요청을 받은 후 다른 요청을 보냅니다. 장점은 이미 열려있는 커넥션을 사용하며 또다른 커넥션을 필요로 하지 않는다는것인데, 긴 풀링 방식은 요청(request)에 타임아웃이 일어날 수 있고 이렇게 될 경우 어쨌든 간에 새로운 커넥션을 생성해야 합니다.

많은 Ajax 어플리케이션이 많이 사용되지만 이는 가끔 쓸때없는 자원 낭비를 유도할 수 있습니다.

만약 모닝콜을 원하는 사람에게 서버가 미리 생성된 커넥션 없이 데이터를 클라이언트에 알아서 보내주게 된다면 놀랍지 않을까요? 푸쉬 기술의 세계에 오신 것을 환영합니다 !

Step 1: 웹소켓 서버 얻기

본 튜토리얼은 서버의 구현보다는 클라이언트를 생성하는데 초점을 둘 것입니다.

저는 윈도우 7 에서 XAMPP를 사용하여 PHP 서버를 로컬로 돌렸습니다. phpwebsockets라는 PHP 웹 소켓 서버를 복사해서 구동하였습니다.(참고 : 이 phpwebsockets 버전에서 저는 약간의 문제를 경험했으며, 몇몇 부분을 수정하였고, 소스파일을 추가할 것입니다.) 다양한 웹소켓 구현방법이 있으니 만약 phpwebsockets이 안되면 아래의 다른 것을 사용해서 웹소켓 서버를 구현하시고 본 튜토리얼을 계속 진행해 보세요.

jWebSocket (Java)
web-socket-ruby (ruby)
Socket IO-node (node.js)

아파치 서버 시작

Step 2: URL과 포트 변경

여러분이 설치한 서버 파일에 몇몇 수정이 필요합니다. 예를 들어 setup.class.php 의 경우:

view plaincopy to clipboardprint?
public function __construct($host=‘localhost’,$port=8000,$max=100)  
{  
    $this->createSocket($host,$port);  
}  

위와 같이 URL과 포트 부분을 파일들을 찾아서 적당히 수정하도록 합니다.

Step 3: 클라이언트 제작

간단한 HTML 파일을 만들어 봅시다. 아래는 제가 만든 client.php 입니다.:

view plaincopy to clipboardprint?
<!DOCTYPE html>  
<html>  
<head>  
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>  
  
<title>WebSockets Client</title>  
  
</head>  
<body>  
<div id=“wrapper”>  
  
    <div id=“container”>  
  
        <h1>WebSockets Client</h1>  
  
        <div id=“chatLog”>  
  
        </div><!– #chatLog –>  
        <p id=“examples”>e.g. try ‘hi’, ‘name’, ‘age’, ‘today’</p>  
  
        <input id=“text” type=“text” />  
        <button id=“disconnect”>Disconnect</button>  
  
    </div><!– #container –>  
  
</div>  
</body>  
</html>​  

이 코드로 우리는 채팅 로그를 위한 박스와, ‘연결 끊기’ 버튼이 있는 간단한 템플릿을 만들었습니다.

Step 4: 몇몇 CSS 추가

굳이 다 꾸밀 필요는 없으니, 간단히 몇개의 엘리멘트들만 돋보이게 해봅시다.

view plaincopy to clipboardprint?
body {  
    font-family:Arial, Helvetica, sans-serif;  
}  
#container{  
    border:5px solid grey;  
    width:800px;  
    margin:0 auto;  
    padding:10px;  
}  
#chatLog{  
    padding:5px;  
    border:1px solid black;  
}  
#chatLog p {  
    margin:0;  
}  
.event {  
    color:#999;  
}  
.warning{  
    font-weight:bold;  
    color:#CCC;  
}  

Step 5: 웹소켓 이벤트들

먼저 웹소켓의 이벤트들을 이해해 봅시다.

The Events

우리는 아래 세가지의 이벤트를 사용할 것입니다.

on open: 소켓이 열리는 시점
on message: 메시지가 도착할 시점
on close: 소켓이 닫히는 시점

그런데 어떻게 이것들을 구현할까요?

먼저 웹 소켓 오브젝트를 만듭니다.

view plaincopy to clipboardprint?
var socket = new WebSocket(“ws://localhost:8000/socket/server/startDaemon.php”);  

그리고 간단히 이벤트가 동작하는지 확인해 봅니다.

view plaincopy to clipboardprint?
socket.onopen = function(){  
    alert(“Socket has been opened!”);  
}  

그런데 메시지를 받으려면 어떻게 해야 할까요?

view plaincopy to clipboardprint?
socket.onmessage = function(msg){  
    alert(msg); //Awesome!  
}  

자 이제, 경고창 대신 실제로 저희가 클라이언트 페이지에서 사용할 것들을 통합해 봅시다.

Step 6: JavaScript

본론으로 들어와 다시 코딩을 시작해 봅시다. 먼저 jQuery의 document ready 함수 공간을 만들고, 사용자가 웹 소켓을 브라우저에서 사용 가능하게 했는지를 확인합니다. 만약 사용 불가하다면, 크롬 브라우저의 링크를 HTML 에 붙힙니다.

view plaincopy to clipboardprint?
$(document).ready(function() {  
    if(!(“WebSocket” in window)){  
        $(‘#chatLog, input, button, #examples’).fadeOut(“fast”);  
        $(‘<p>Oh no, you need a browser that supports WebSockets. How about <a href=”http://www.google.com/chrome”>Google Chrome</a>?</p>’).appendTo(‘#container’);  
    }else{  
  
    //The user has WebSockets  
  
    connect();  
  
    function connect(){  
        //the connect function code is below  
  
    }  
});  

보다시피 유저가 웹소켓을 사용하고자 한다면 connect() 함수를 호출합니다. 이 함수는 “우리는 커넥션을 열고, 닫고 이벤트를 수신받을 것이다” 라는 기능을 합니다.

그리고 서버의 주소를 정의합니다.

view plaincopy to clipboardprint?
var socket;  
var host = “ws://localhost:8000/socket/server/startDaemon.php”;  

흠, 주소에서 http가 어디갔죠? 그렇습니다. ws가 붙은 것이 웹소켓의 URL입니다. 즉, 웹소켓은 HTTP와는 다른 프로토콜을 사용한다는 것이지요. 위 URL의 부분을 설명하면 다음과 같습니다.

connect() 함수를 계속 만들어 봅시다. 일단 try/catch문을 만듭니다. 만약 문제가 생겼다면 유저가 알 수 있도록 해야 합니다. 새로운 웹 소켓 객체를 만들고 전달받은 메시지를 메시지 함수(나중에 구현할 껍니다.)를 통해 보여줍니다. 그리고 onopen, onmessage, onclose 함수를 새로 만듭니다. 참고로 유저의 소켓 상태를 보여줄 수도 있지만, 별로 필요하지 않습니다. 허나 디버깅에 도움이 되므로 여기서 저는 포함하도록 하겠습니다.

CONNECTING = 0
OPEN = 1
CLOSED = 2

view plaincopy to clipboardprint?
function connect(){  
    try{  
  
    var socket;  
    var host = “ws://localhost:8000/socket/server/startDaemon.php”;  
    var socket = new WebSocket(host);  
  
        message(‘<p class=”event”>Socket Status: ‘+socket.readyState);  
  
        socket.onopen = function(){  
             message(‘<p class=”event”>Socket Status: ‘+socket.readyState+‘ (open)’);  
        }  
  
        socket.onmessage = function(msg){  
             message(‘<p class=”message”>Received: ‘+msg.data);  
        }  
  
        socket.onclose = function(){  
             message(‘<p class=”event”>Socket Status: ‘+socket.readyState+‘ (Closed)’);  
        }             
  
    } catch(exception){  
         message(‘<p>Error’+exception);  
    }  
}  

message() 함수가 상당히 간단하죠? 이 함수는 우리가 보여주고자 하는 유저의 채팅 로그창에 텍스트를 보여줍니다. 위에서 만든 함수에서 <p> 테그를 한짝만 사용해서 붙혀놨는데, message() 함수에서 </p>로 닫습니다.

view plaincopy to clipboardprint?
function message(msg){  
    $(‘#chatLog’).append(msg+‘</p>’);  
}  

더 나아가서…

여기까지 따라오셨다면, 일단 성공입니다. 기본적인 HTML/CSS 문서를 만들었고, 웹소켓 커넥션을 생성하고 사용자의 업데이트 된 상태를 커넥션을 통해 유지합니다.

Step 7: 데이터 전송

이제 자바스크립트에서 유저의 키보드 입력을 감지할 수 있으니, submit 버튼보다는 send 함수를 만드는게 좋겠습니다. ’13’이 ASCII 코드 중에 엔터 버튼을 나타냅니다.

view plaincopy to clipboardprint?
$(‘#text’).keypress(function(event) {  
    if (event.keyCode == ’13’) {  
        send();  
    }  
});  

그리고 send() 함수를 만듭니다.

view plaincopy to clipboardprint?
function send(){  
  
    var text = $(‘#text’).val();  
    if(text==“”){  
        message(‘<p class=”warning”>Please enter a message’);  
        return ;  
    }  
    try{  
        socket.send(text);  
        message(‘<p class=”event”>Sent: ‘+text)  
    } catch(exception){  
    message(‘<p class=”warning”> Error:’ + exception);  
    }  
  
    $(‘#text’).val(“”);  
  
}  

다른 것보다 여러분이 반드시 기억해야 할 코드는 이것입니다.

view plaincopy to clipboardprint?
socket.send(); //Thanks JavaScript  

이 확장 코드는 많은 것을 합니다. 유저가 엔터를 누르지 않더라도 계속적으로 값을 리턴하고, 인풋 박스를 초기화 하고, 메시지 함수를 호출합니다.

Step 8: 소켓 닫기

소켓을 닫는 것은 간단합니다.: disconnect 버튼의 클릭 이벤트 핸들러에 아래 코드만 붙히면 끝납니다!

view plaincopy to clipboardprint?
$(‘#disconnect’).click(function(){  
    socket.close();  
});  

전체 자바스크립트 소스

view plaincopy to clipboardprint?
$(document).ready(function() {  
  
  if(!(“WebSocket” in window)){  
  $(‘#chatLog, input, button, #examples’).fadeOut(“fast”);  
  $(‘<p>Oh no, you need a browser that supports WebSockets. How about <a href=”http://www.google.com/chrome”>Google Chrome</a>?</p>’).appendTo(‘#container’);  
  }else{  
      //The user has WebSockets  
  
      connect();  
  
      function connect(){  
          var socket;  
          var host = “ws://localhost:8000/socket/server/startDaemon.php”;  
  
          try{  
              var socket = new WebSocket(host);  
  
              message(‘<p class=”event”>Socket Status: ‘+socket.readyState);  
  
              socket.onopen = function(){  
                 message(‘<p class=”event”>Socket Status: ‘+socket.readyState+‘ (open)’);  
              }  
  
              socket.onmessage = function(msg){  
                 message(‘<p class=”message”>Received: ‘+msg.data);  
              }  
  
              socket.onclose = function(){  
                message(‘<p class=”event”>Socket Status: ‘+socket.readyState+‘ (Closed)’);  
              }           
  
          } catch(exception){  
             message(‘<p>Error’+exception);  
          }  
  
          function send(){  
              var text = $(‘#text’).val();  
  
              if(text==“”){  
                  message(‘<p class=”warning”>Please enter a message’);  
                  return ;  
              }  
              try{  
                  socket.send(text);  
                  message(‘<p class=”event”>Sent: ‘+text)  
  
              } catch(exception){  
                 message(‘<p class=”warning”>’);  
              }  
              $(‘#text’).val(“”);  
          }  
  
          function message(msg){  
            $(‘#chatLog’).append(msg+‘</p>’);  
          }  
  
          $(‘#text’).keypress(function(event) {  
              if (event.keyCode == ’13’) {  
                send();  
              }  
          });     
  
          $(‘#disconnect’).click(function(){  
             socket.close();  
          });  
  
      }//End connect  
  
  }//End else  
  
});  

Step 9: 웹소켓 서버 구동

커멘드 라인 접근이 필요하지만, 운좋게도 XAMPP는 사용하기 쉬운 쉘 옵션을 제공합니다. XAMPP 의 컨트롤 패널에서 ‘Shell’버튼을 누르고 아래를 입력하세요.

php -q path\to\server.php

이렇게 하면 웹소켓 서버가 시작됩니다!

마지막

페이지가 로딩되면 웹 소켓 커넥션이 설립(established)할 것을 시도합니다. (connect/disconnect 옵션을 한번 만들어 보세요) 그러면, 우저는 메시지를 치고 서버로 메시지를 보냅니다.

이것이 웹소켓 입니다!

읽어주셔서 감사합니다. 이 튜토리얼이 흥미로우셨길 바라며, 기억할 것은 웹소켓을 통해 즐기셨으면 좋겠습니다. 많은 것은 변할 것이고, 여러분은 W3C WebSocket API 에서 업데이트 되는 정의를 토대로 최신의 기술을 시도해 볼 수 있을 것입니다.