MessageChannel - 해당되는 글 1건
MessageChannel ①
백만년만에 포스팅을 해봅니다.
요즘 핫이슈인 HTML 5를 가지고요 ^^
 
HTML 5를 많은 이들이 화려환 UI를 주제로 이야기 하곤 하는데요, 저는 기술적인 부분에 포커싱을 해보려합니다.
그중에서 오늘은 MessageChannel에 대한 내용이고요, 예제를 통해서 하나씩 알아가보려고요~

채널메세징은 다대다 메세지 통신을 위한 아주 간단한 API입니다.
채널메세징을 알아보기전에 간단한 용어부터 알아볼까요?

1. 채널 : 송/수신을 위한 장치(객체)
2. 포트 : 채널이 송/수신을 하기위한 인터페이스

간단하죠? ^^ 위 내용을 코드로 표현해볼까요?

var ch = new MessageChannel();

이렇게 하면 메세징을 위한 채널이 생긴겁니다. 하지만 위에서 말한 포트(송/수신을 위한 인터페이스)는 어떻게
만들어야 할까요?

걱정하지 않으셔도 됩니다. ch.port1 과 같이 프로퍼티에 이미 포트가 내장되어 있습니다.

내장된 포트는 모두 2개로 (port1, port2) 송/수신을 할 수 있습니다.

어느 포트이던간에 송/수신을 담당할 수 있으며 port1이 송신을 담당하면 port2는 자연스레 수신을 담당합니다.

느낌이 오시죠? 별거 없습니다. 그럼 코드로 볼까요~?

<script>
  function Test(){
    var ch = new MessageChannel();
    ch.port1.start();
    ch.port2.start();

    ch.port1.onmessage = function(msgEvt){
      alert(msgEvt.data);
    };

    ch.port2.postMessage("hello world !!");
  }
</script>

채널메세징의 가장 기본적인 모습입니다. 어때요? 쉽죠?

설명하자면...

채널(ch)을 하나 만들었어요.
그리고는 포트 두개(port1, port2)를 가동(start)시켰죠.
첫번재 포트(port1)에게는 메세지가 수신되었을때(onmessage) 처리할 함수를 지정했고,
두번째 포트(port2)에게는 메세지를 보내도록(postMessage) 처리했어요.

실행을 해볼까요?

var test = new Test();

예상대로 "hello world !!"가 잘 뜨죠?

참고로 MessageChannel 에대한 IDL을 추가했습니다.

[Constructor]
interface MessageChannel {
  readonly attribute MessagePort port1;
  readonly attribute MessagePort port2;
};


typedef sequence<MessagePort> MessagePortArray;

interface MessagePort {
  void postMessage(in any message, in optional MessagePortArray ports);
  void start();
  void close();

  // event handlers
           attribute Function onmessage;
};
MessagePort implements EventTarget;


오늘은 여기까지 하렵니다. 요즘 한창 재미있는 "로드넘버원"을 보러가야해서 ㅎㅎ

다음 포스팅은 오늘 포스팅한 내용보다 더 흥미진진한 것으로 하려고 합니다.

기대하셔도 좋습니다.

posted by blankus
태그 - , ,
HTML 5_API  |  2010/07/08 21:27
Trackbacks  0 | Comments  1
이전 목록   1   다음 목록