Latest revision as of 01:40, 27 March 2026

커뮤니케이션 API

프로그램간에 비동식으로 메세지 전달 : 느슨한 결합(loosely coupled)
메세지 : 임의의 자바스크립트객체 또는 단순 문자열
통신 수행의 주체 : 윈도우, 백그라운드 태스크, 서버에서 동작하는 프로그램

메세지 이벤트 : 자바스크립트 객체 ( data, origin, lastEventid, source, ports)

메세지 수신 : onmessage이벤트 핸들러, 이벤트 리스너 (MessageEvent객체 얻음)

크로스 도큐먼트 메세징

메세지의 송수신을 통해 둘 이상의 웹 페이지가 서로 데이터 주고받음
도메인이 다른 웹페이지도 데이터 공유가능

송신 : postMessage(data, [ports], targetOrigin)
수신 : onmessage() 이벤트 핸들러

postMessage(data, [ports], targetOrigin)
- data : 임의의 자바스크립트 객체
- ports : messagePort객체, 생략가능
- targetOrigin : 메세지를 수신하는 도메인(프로토콜+도메인+포트번호)
보안을 위해 메세지를 주고받는 상대의 신원 확인 필수

onMessage 이벤트 핸들러

  // 메세지를 수신해 MessageEvent형의 객체 얻음
  window.onmessage = function(e) {
   // origin 속성으로부터 송신처 확인
   if(e.origin == "http://localhost"){
      // data 속성으로 수신된 메세지 확인
       alert(e.data);
   }
 };

이벤트 리스너

  // 메세지를 수신해 MessageEvent형의 객체 얻음
  window.addEventListener("message", function(e) {
     ....
   }, false);

메세지 송신 예

 var destFrame = document.getElementById("message-dest");
 destFrame.contentWindow.postMessage("메세지 내용", /*포트 생략가능*,/ "http://desc.example.com");

채널 메세징

다대다 메세지 통신을 실현하기 위한 API
채널 : 메세지 송,수신을 중개하는 객체, MessageChannel형
MessageChannel : 두개의 포트가짐 포트1 -> 포트2, 포트2 -> 포트1
포트 : MessagePort객체
- start() : 포트를 이용할 수 있도록 한다. 채널 메세징 수행시 각각의 포트에 대해 start()를 호출
- close() : 포트를 사용할 수 없게 함
- postMessage(message, [ports]) : 메세지 송신
- onmessage : 메세지 도착시 이벤트 핸들러가 호출됨

채널을 이용한 메세지 송신

 // 생략가능
 channel.port1.start(); 
 channel.port2.start();
 // 포트를 이용한 메세지 송신 
 channel.port1.postMessage("TEST");

포트 공개

포트를 송신하여 수신자가 송신자의 포트에 직접 접근할 수 있게함
포트는 값 복사로 전달됨
받은 포트는 PostMessgae()의 [ports]인자에 배열 형태로 전달가능
- 주의 : 배열안에 null이 포함될 때, 이전에 postMessage()의 인수로 전달된 적이 있는 포트가 포함될 때, 한 채널의 포트1과 포트2가 동시에 포함될 때

@@ Line 1: / Line 1: @@
-&#91;&#91;pagelist(^html5)&#93;&#93;
+<!-- MONIWIKI PageList(^html5) -->
+* [[html5]]
+* [[html5/VA]]
+* [[html5/canvas]]
+* [[html5/communicationAPI]]
+* [[html5/drag-and-drop]]
+* [[html5/form]]
+* [[html5/geolocation]]
+* [[html5/offline-web-application]]
+* [[html5/others-api]]
+* [[html5/outline]]
+* [[html5/overview]]
+* [[html5/richtext-edit]]
+* [[html5/section]]
+* [[html5/video&audio]]
+* [[html5/web-storage]]
+* [[html5/web-workers]]
+* [[html5/webSqlDatabase]]
+* [[html5/websocket]]
+* [[html5/문제점]]
+* [[html5practice]]
+* [[html5practice/roundRect]]
+* [[html5practice/계층형자료구조그리기]]
+* [[html5practice/즐겨찾기목록만들기]]
 __TOC__
 = 커뮤니케이션 API =
@@ Line 24: / Line 46: @@
 ** targetOrigin :  메세지를 수신하는 도메인(프로토콜+도메인+포트번호)
 * 보안을 위해 메세지를 주고받는 상대의 신원 확인 필수
+* onMessage 이벤트 핸들러
+   // 메세지를 수신해 MessageEvent형의 객체 얻음
+   window.onmessage = function(e) {
+    // origin 속성으로부터 송신처 확인
+    if(e.origin == "http://localhost"){
+       // data 속성으로 수신된 메세지 확인
+        alert(e.data);
+    }
+  };
+* 이벤트 리스너
+   // 메세지를 수신해 MessageEvent형의 객체 얻음
+   window.addEventListener("message", function(e) {
+      ....
+    }, false);
+* 메세지 송신 예
+  var destFrame = document.getElementById("message-dest");
+  destFrame.contentWindow.postMessage("메세지 내용", /*포트 생략가능*,/ "http://desc.example.com");
 = 채널 메세징 =
@@ Line 34: / Line 76: @@
 ** postMessage(message, &#91;ports&#93;) : 메세지 송신
 ** onmessage : 메세지 도착시 이벤트 핸들러가 호출됨
+* 채널을 이용한 메세지 송신
+  // 생략가능
+  channel.port1.start();
+  channel.port2.start();
+  // 포트를 이용한 메세지 송신
+  channel.port1.postMessage("TEST");
 = 포트 공개 =
@@ Line 42: / Line 91: @@
 = 관련 사이트 =
-* [[HTML5 스터디 카페]] http://cafe.naver.com/webappdev.cafe
+* HTML5 스터디 카페 http://cafe.naver.com/webappdev.cafe