Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

Socket.IO v0.7.x 사용하기

node.js에는 아주 매력적인 라이브러리들이 있는데 그중 하나가 Socket.IO이고 이전 글에서 간략하게 소개한 적이 있으니 Socket.IO에 대해서는 이전 글을 참고해 주시기 바랍니다. 기존에 버전이 0.6.x를 계속 유지하고 있다가 3개월 정도의 침묵후에 지난 6월 20일 v0.7을 발표했는데 0.7로 올라오면서 기능적으로 대대적인 업그래이드가 있었습니다.

0.7에 대한 발표글을 보면 기능개선에 대해서 여러가지를 설명해주고 있는데 웹소켓이 기본적으로 가진 문제점에 대해서 얘기하고 있습니다. 웹소켓은 웹브라우저가 웹소켓을 초기화 했을때 하나의 소켓만이 단 하나의 프로토콜이나 목적을 위해서 데이터를 스트림할 수 있습니다. 그래서 다음과 같은 문제가 발생합니다.

  1. 메시지를 어떻게 인코딩하고 인터프리팅해야 하는지 생각해야 합니다.
  2. 서드파티 모듈들과 상호작용을 하기가 어렵습니다.
  3. 애플리케이션의 "연결", "연결해지"에 대한 로직이 존재하지 않습니다.
  4. 기능적으로 서브셋에 대한 인증이나 오류처리는 더더욱 어렵습니다.

이러한 문제를 해결하기 위해서 Socket.iO에서는 여러가지 기능이 추가되었는데 대표적인 기능들은 아래와 같습니다.



네임스페이스

// 기본적인 연결
io.sockets.on('connection', function(socket) {});
// 네임스페이스 사용
var channel = io.of('/channel').on('connection', function(socket) {});

위 코드는 기본적인 연결과 네임스페이스를 사용한 것을 비교한 것입니다. 기존에 웹소켓을 사용하면 하나의 소켓네에서 데이터의 내용을 파싱해서 종류를 구분해 주어야 했다면 Socket.IO에서는 네임스페이스를 이용해서 용도별로 구분해 줄 수 있습니다.



커스텀 이벤트
이전에는 message 이벤트를 통해서 서버와의 JSON데이터를 주고 받았었지만 이제는 추가적으로 커스텀이벤트를 사용할 수 있습니다.


// message 이벤트
socket.on('message', function(msg) {
    socket.send(msg);
});
// 커스텀 이벤트
socket.on('anything as you like', function(msg) {
    socket.emit('anything as you like', msg);
});

semd() 메서드는 기존처럼 message 이벤트를 사용하지만 emit()을 사용해서 첫번째 파라미터에 이벤트명을 원하는대로 주고 클라이언트와 데이터를 주고 받을 수 있게 되었습니다.



Room 기능

socket.join('the room');
socket.broadcast.to('the room').send('something to say');

기존에는 Socket을 연결한 본인과 데이터를 주고 받거나 브로드캐스팅을 통해서 그외 모두하고만 통신할 수 있었습니다만 이제는 Room기능이 추가되어서 socket내에서나 네임스페이스 내에서 임의로 지정한 Room이름에 조인을 해서 같은 방에 있는 사람하고만 데이터를 주고 받을수 있게 되었습니다.





이 외에도 여러가지 기능들이 추가가 되었습니다. 처음 0.7이 발표가 되고 새로 추가된 기능이 꽤 괜찮아 보여서 JCO에서 만들었던 리얼타임앱을 Socket.IO용으로 포팅하려고 했었는데 기능들의 사용법이 익숙하지 않아서 기능을 익힐겸 예제를 만들기 시작했습니다. 사실 초반에는 문서도 잘못된 부분도 꽤 있었고 네임스페이스관련해서 기능이 제대로 동작하지 않은 버그들이 꽤 많았기 때문에 Github에 리포팅하고 수정되기를 기다리다 보니 거진 한달이 다 되어버렸습니다. 그래도 0.7.7에서는 대부분의 이슈들이 해결되어서 작성하던 예제를 완성했습니다.


위 페이지에 관련된 소스를 적어놨으므로 이런저런 설명보다는 소스랑 동작을 집접 보는게 이해하기가 편하리라 생각해서 설명에 대한 것은 간략히만 하고 넘어갑니다. 위 예제의 소스는 Github에 올려져 있으며 Socket.IO의 공식페이지의 디자인을 그대로 가져와서 페이지를 구성했는데 이 디자인을 가져온 것은 Socket.IO를 만드는 Guillermo Rauch로부터 허락을 받아서 사용한 것입니다. (그냥 기능을 테스트하기 위해서 만든 예제페이지이므로 XSS같은 시도는 하지 말아주세요 ㅠㅠ)

0.7 발표 공지에 새로운 기능들에 대해서 간략히 설명되어 있으며 자세한 사용법에 대해서는 How to Use에 나와있으며 기존의 0.6사용자를 위한 Migration Guide도 참고할 만합니다.
2011/07/19 02:27 2011/07/19 02:27