Rev. 2.73

지난 9일 구글 크롬 브라우저는 WebSocket(웹소켓) API를 지원한다고 발표했습니다. 그리고 최근에 Jetty(웹 서버)WebSocket을 지원하는 버전을 배포했습니다. 그렇습니다. WebSocket은 브라우저만으로 사용할 수 있는 것이 아니라 웹 서버도 함께 지원되어야 하는 것입니다. 웹 개발자들 사이에서는 HTML5 명세에도 표준으로 자리매김하므로써 다른 브라우저나 웹 서버들이 이를 지원하는 것은 시간문제로 치부하고 있습니다. 이는 곧 Ajax의 혁명으로 다가 올 것이며 기존 웹을 온전한 리얼-타임(실시간)으로 만들어 줄 것으로 기대하고 있습니다. 구글 Wave와 같은 실시간 인터랙션의 웹 애플리케이션들을 어렵지 않게 구축할 수 있게 되는 것이죠. 실제로 Jetty 웹 서버(7.0.1)를 로컬에 설치하고 크롬 브라우저(베타)에서 채팅 예제를 실행해 보았습니다. Comet을 기본으로 사용하는 Jetty 6.x의 것과 비교하면 매우 간결하고 성능도 좋다는 것을 굳이 소스를 확인하지 않아도 알 수 있었습니다. 조만간에 고정 IP에 Jetty를 설치하여 실제로 돌아가는 여러 예제들을 작성해 볼 예정입니다.

if ("WebSocket" in window) {
  var ws = new WebSocket("ws://example.com/service");
  ws.onopen = function() {
    // Web Socket is connected. You can send data by send() method.
    ws.send("message to send"); ....
  };
  ws.onmessage = function (evt) { var received_msg = evt.data; ... };
  ws.onclose = function() { ... }; // websocket is closed.
} else {
  // the browser doesn't support WebSocket.
}

그렇다면 Comet은 어떻게 될까요? 글쎄요... Comet은 크로스브라우저를 위한 솔루션으로 남게될 가능성이 큽니다. 어찌됐건 매우 흥분되는 일이 아닐 수 없습니다.

Comments

attachment
브라우저만으로에서 PC를 원격 제어하는 화면

무료로 배포되는 EduVNC를 이용하면 다른 장소에 있는 PC를 웹 브라우저만으로 원격 제어할 수 있습니다. VNC에서 파생된 여러 원격제어 소프트웨어들이 대부분 호스트(서버)와 클라이언트(뷰어)로 구분되고 제어하는 쪽이나 받는 쪽이나 모두 데스크탑 애플리케이션을 설치해야 돌아갑니다만, EduVNC는 브라우저를 통하여 호스트로 접근하기 때문에 클라이언트 소프트웨어는 설치할 필요가 없습니다. 원리는 간단합니다. EduVNC는 HTTPD(Hypertext Transfer Protocol daemon)를 내장하여 웹 브라우저로부터의 접근이 가능하게 하고 몇몇 정해진 URI는 마우스와 키보드 이벤트를 실시간 전송하며 이미지를 갱신할 주소와 갱신이 필요한 영역의 정보를 토해냅니다. 브라우저로 접속시 영역을 그리드로 분할하여 전송하는 옵션과, 압축 전송 방식(JPEG, PNG4, PNG6, PNG8, PNG24) 그리고 갱신주기 시간을 설정할 수 있으며, 암호를 설정하여 외부로부터 접근을 차단하는 등의 일반적인 서버 설정을 할 수 있습니다.

장점이라면 클라이언트를 설치할 필요가 없어서 접근성이 매우 우수하다는 점이고, 단점이라면 겁나게 느리다는 것입니다. 너무 느려 터져서 소스를 까보니, 어설프게 짜여진 자바스크립트가 비효율적으로 이미지들을 갱신하고 있었습니다. 요것 한참 뜯어고치는 중입니다.(설치 폴더의 script.js 파일) 일단 화면 크기를 리사이즈 할 수 있도록 하고 있으며, 웹서버와 연계하여 JSONP로 통신하게 하면 구글맵처럼 웹 페이지에 임베딩 할 수도 있을 거고요. 갱신주기에 의해 무한 갱신되는 것보다. Comet(또는 롱폴링 구현)을 설치하여 서버가 원할 때 클라이언트의 이미지를 갱신하여 성능을 향상시키는 구조도 생각해 볼 수 있겠습니다.

Comments

smile.gif

Jabbify API를 이용해서 뭔가 재미있는 뻘짓을 해 보려고 계속 구상만 하다가 이 번 주말에 맘잡고 삽질했습니다. 자연스레 공통 관심사를 가진 사람을 만나고 즉시 질문하거나 추가적인 정보를 소통할 수 있는 커뮤니케이터이자 상대방의 모습을 아이-트래킹의 방식으로 비주얼라이즈하는 아이디어에 착안하여 만들어 보았습니다. 화면속을 요리조리 떠돌아 다니는 스마일 유령들이 바로 트래커입니다. 이 곳에 접속해 있는 사용자들의 마우스 커서 위치와 접속중인 페이지의 주소 그리고 제목을 스마일 유령을 통해 공유하여 해당 사용자가 위치한 곳으로 즉시 이동하거나 조회 중인 페이지의 제목을 알 수 있고 간략한 메시지를 주고 받을 수도 있습니다. 여기에 사용된 스마일 유령은 100% CSS로 작성된 것으로 나라디자인에서 콘테스트황준상님의 스마일의 마크업을 변조한 것이에요. 덕분에 이미지 파일을 사용하지 않고도 다양한 색상의 유령들을 동적으로 생산할 수 있게 되었습니다. 코드는 Prototype기반 클래스로 작성되었고 아래와 같은 방식으로 구동됩니다.

사용방법 :

<script type="text/javascript" src="/javascripts/prototype.js"></script>
<script type="text/javascript" src="/javascripts/jabbify.js"></script>
<script type="text/javascript" src="/javascripts/eyestracker.js"></script>
EyesTracker({
    name: 'your name', // 사용자 이름 (default: random)
    color: 'c30', // 유령 색상 지정 (default: random)
    timeout: 100, // 포인터 멈춤, 연결 갱신 시간 간격 (default: 240ms)
    callback: function(pkt) {...} // 갱신시 호출되는 콜백
});

다운로드 :

* original - eyestracker.js (9.1kb)
* minified - eyestracker.js (7.1kb)

업데이트 :

* 2009.5.16 - 사용자가 떠난 경우 해당 유령을 실시간으로 사라지게 했습니다.
* 2009.5.16 - IE7에서도 유령을 볼 수 있습니다.
* 2009.5.16 - IE8에서 발생하던 오류가 수정되었습니다.
* 2009.5.17 - 머물러 있는 페이지의 제목을 툴팁으로 출력합니다.
* 2009.5.17 - 소리 효과를 추가했습니다. 툴팁이 표시하거나 메시지를 수신할 때 소리로 알립니다.
* 2009.5.17 - 메시지 송/수신 기능을 추가했습니다. 개인 또는 모두에게 메시지를 주고 받을 수 있습니다.
* 2009.5.17 - IE에서 툴팁 영역이 표시되지 않던 문제를 수정하였습니다.
* 2009.5.17 - 같은 페이지를 조회 중인 유령을 약간 강조했습니다.
* 2009.5.17 - 메시지 수신시 유령이 화면에서 벗어난 경우 위치를 보정합니다.
* 2009.5.17 - 전체 송신 체크박스의 설정을 기억합니다.
* 2009.5.17 - 이름/색상/타임아웃/콜백을 인스턴스 생성시에 설정할 수 있도록 했습니다.
* 2009.5.17 - 툴팁의 위치가 화면을 벗어나지 않도록 보정합니다.
* 2009.5.18 - soundmanager2 라이브러리가 로드되지 않은 경우 소리 재생을 하지 않습니다.
* 2009.5.19 - 흰색 유령은 관리자입니다. ^^;
* 2009.5.25 - 인스턴스화할 필요가 없으므로 Prototype의 클래스를 제거하였습니다.
* 2009.5.27 - 메시지 송/수신시 메시지 박스가 즉시 사라지는 문제를 수정하였습니다.

Comments