Rev. 2.73

  • x

  • d

  • c

  • f

  • v

  • b

  • h

  • n

  • j

  • m

  • k

  • ,

  • .


날씨가 우중충해서 며칠째 낚시하러 못나가고 있네요. 너무 심심해서 어제 소개Jabbify를 살짝 가지고 놀아 보았는데요. 식상하게도 너무나 쉽게 만들어져 버렸습니다. 아래의 핵심 메서드 3개만 다룰 줄 알면 게임 셋이에요. 서버가 외국에 위치해 있음에도 응답 속도가 꽤 빠릅니다. 멋진 연주 부탁드려요 ^^;

// 접속 초기화
Jabbify.connect({username: 'anonymous'});

// 이벤트 발송
Jabbify.send("message", "create", {player: $('player').value, key: el.id});

// 이벤트 트리커
OpenAjax.hub.subscribe("jabbify.message.create", function(name, results){
  results.data.each(play); // 이벤트 처리...
});

JavaScriptMVC 프레임웍을 무겁게 들고있는 것이 마음에 안들어서 Jabbify를 가볍게 만들어 보려고 벼루고 있습니다. 요녀석 완전 신기하고 재미있네요. AJ에게 Comet 서버하나 만들어 달라고 부탁해서 열나게 가지고 놀아야 겠습니다.

Comments

comet.png



Jabbify는 실시간 인터랙션을 제공하는 Comet기술을 기반으로 한 자바스크립트 API(JavaScriptMVC 프레임웍)를 이용하여 만들어진 채팅 서비스 입니다. 우측 그림은 Comet의 작동 과정을 표현한 것인데요. 전통적인 XHR(XMLHttpRequest) 폴링규칙에서 벗어난 롱-폴링(long-polling) 방식으로 브라우저는 지속적으로 커넥션 한개를 열어놓고 서버에서 이벤트가 발생할 때 응답하기 때문에 실시간 인터랙션이 이루어지게 할 수 있다고 합니다. 좌측에 있는 녀석이 바로 Jabbify 채팅 클라이언트 입니다. API 문서를 보면 이 녀석이 어떻게 돌아가는지 알 수 있고 이를 응용하면 채팅 외에도 온라인 게임, 속보, 주식, 강의, 각종 알림 서비스 등으로 둔갑시킬 수도 있다고 합니다. 그 예로 온라인 피아노 건반을 만들었군요. 참고로, Gmail에 포함된 구글 톡 역시 Comet을 사용한다고 합니다.

Comments

HTML :

<script type="text/javascript" src="prototype.js"></script> 
<script type="text/javascript" src="Sly.js"></script> 

Javascript :

// Overriding CSS Selector Engine.
Sly.handlers = Selector.handlers;
Sly.prototype.findElements = Sly.prototype.search;
Sly.findElement = function(elements, expression, index) {
  if (Object.isNumber(expression)) {
    index = expression; expression = false;
  }
  return Sly(expression || '*').filter(elements)[index || 0];
};
Sly.findChildElements = function(element, expressions) {
  var result = Sly(expressions.join(',')).search(element);
  return Prototype.BrowserFeatures.ElementExtensions ?
    result : result.filter(Element.extend);
};
Selector = Sly;

Prototype의 성능이 다른 프레임웍들에 비해 떨어지는 주된 원인 중 하나는 DOM 셀렉터(Selector) 엔진에 있는 것으로 판단하고 위와 같은 코드를 작성하여 Prototype의 셀렉터 엔진을 더욱 성능이 좋은 Sly로 교체하는데 성공하였습니다. 그리고 SlickSpeed를 이용하여 실험하였는데, 그 결과가 매우 만족스럽습니다. 오옷! jQuery 와 비등비등하거나 더 빠르군요! 특히, 파이어폭스 3.0에서는 날아 다닙니다. 푸하핫!

My SlickSpeed Result :

  • Internet Explorer 8 : 2.5x faster
  • Internet Explorer 7 : 1.4x faster
  • Internet Explorer 6 : 1.6x faster
  • Mozilla Firefox 3.5 : 1.7x faster
  • Mozilla Firefox 3.0 : 8.7x faster
  • Mozilla Firefox 2.0 : 6.2x faster
  • Google Chrome 2.0 : 1.4x faster
  • Google Chrome 1.0 : 1.2x faster
  • Apple Safari 4.0 : 1.9x faster
  • Apple Safari 3.2 : 1.5x faster
  • Opera 9.6 : 4.7x faster

Comments