HTML5-웹 메시징

웹 메시징은 서버에서 클라이언트 브라우저로 실시간 메시지를 보내는 기능입니다. 다른 도메인, 프로토콜 또는 포트에서 도메인 간 통신 문제를 무시합니다.

예를 들어 페이지의 데이터를 iframe 또는 음성에 배치 된 광고 컨테이너로 보내려고합니다.이 시나리오에서 브라우저는 보안 예외를 발생시킵니다. 웹 메시징을 사용하면 데이터를 메시지 이벤트로 전달할 수 있습니다.

메시지 이벤트

메시지 이벤트는 문서 간 메시징, 채널 메시징, 서버 전송 이벤트 및 웹 소켓을 발생시킵니다.

속성

Sr. 아니.	속성 및 설명
1	data 문자열 데이터 포함
2	origin 도메인 이름 및 포트 포함
삼	lastEventId 현재 메시지 이벤트에 대한 고유 식별자를 포함합니다.
4	source 원본 문서의 창에 대한 참조를 포함합니다.
5	ports 메시지 포트에서 보낸 데이터를 포함합니다.

문서 간 메시지 보내기

문서 간 메시지를 보내기 전에 새 iframe 또는 새 창을 만들어 새 웹 브라우징 컨텍스트를 만들어야합니다. postMessage ()를 사용하여 데이터를 보낼 수 있으며 두 개의 인수가 있습니다. 그들은-

message − 보낼 메시지
targetOrigin − 원산지 이름

예

iframe에서 버튼으로 메시지 보내기

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');

var clickHandler = function() {
   iframe.contentWindow.postMessage('The message to send.',
      'https://www.tutorialspoint.com);
}
button.addEventListener('click',clickHandler,false);

수신 문서에서 문서 간 메시지 수신

var messageEventHandler = function(event){
   
   // check that the origin is one we want.
   if(event.origin == 'https://www.tutorialspoint.com') {
      alert(event.data);
   }
}
window.addEventListener('message', messageEventHandler,false);

채널 메시징

브라우징 컨텍스트 간의 양방향 통신을 채널 메시징이라고합니다. 여러 출처 간의 통신에 유용합니다.

MessageChannel 및 MessagePort 개체

messageChannel을 생성하는 동안 내부적으로 두 개의 포트를 생성하여 데이터를 전송하고 다른 브라우징 컨텍스트로 전달합니다.

postMessage() − 메시지 던지기 채널 게시
start() − 데이터를 보냅니다.
close() − 포트를 닫습니다.

이 시나리오에서는 하나의 iframe에서 다른 iframe으로 데이터를 전송합니다. 여기서 우리는 함수에서 데이터를 호출하고 데이터를 DOM에 전달합니다.

var loadHandler = function() {
   var mc, portMessageHandler;
   mc = new MessageChannel();
   window.parent.postMessage('documentAHasLoaded','http://foo.example',[mc.port2]);
   
   portMessageHandler = function(portMsgEvent) {
      alert( portMsgEvent.data );
   }
   
   mc.port1.addEventListener('message', portMessageHandler, false);
   mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);

위 코드에서는 포트 2에서 데이터를 가져 오므로 이제 데이터를 두 번째 iframe으로 전달합니다.

var loadHandler = function() {
   var iframes, messageHandler;
   iframes = window.frames;
   
   messageHandler = function(messageEvent) {
      
      if( messageEvent.ports.length > 0 ) {
         
         // transfer the port to iframe[1]
         iframes[1].postMessage('portopen','http://foo.example',messageEvent.ports);
      }
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

이제 두 번째 문서는 portMsgHandler 함수를 사용하여 데이터를 처리합니다.

var loadHandler() {
   
   // Define our message handler function
   var messageHandler = function(messageEvent) {
   
      // Our form submission handler
      
      var formHandler = function() {
         var msg = 'add <[email protected]> to game circle.';
         messageEvent.ports[0].postMessage(msg);
      }
      document.forms[0].addEventListener('submit',formHandler,false);
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);