HTML5 채널 메시징: 브라우징 컨텍스트 간 양방향 통신 구현 방법

채널 메시징이란 무엇인가?

브라우징 컨텍스트(browsing context) 사이의 양방향 통신을 채널 메시징(channel messaging)이라고 부릅니다. 이 방식은 서로 다른 오리진(origin)을 가진 문서 간에도 안전하게 메시지를 주고받을 수 있어, 교차 출처(cross-origin) 통신 환경에서 특히 유용합니다.

MessageChannel 객체를 생성하면 내부적으로 데이터를 주고받기 위한 두 개의 포트(port)가 자동으로 만들어집니다. 이 포트 중 하나를 다른 브라우징 컨텍스트로 전달하면, 양쪽 컨텍스트가 직접 연결된 통신 채널을 통해 데이터를 교환할 수 있습니다.

핵심 메서드

• postMessage() — 채널을 통해 메시지를 전송합니다.
• start() — 포트에 대기 중인 메시지의 전송을 시작합니다.
• close() — 포트를 종료하여 더 이상 메시지를 주고받지 않도록 합니다.

iframe 간 데이터 전송 예제

다음 시나리오는 한 iframe에서 다른 iframe으로 데이터를 전송하는 과정을 보여줍니다. 문서가 로드되면 함수 내부에서 데이터를 처리하고, 그 결과를 DOM으로 전달하는 구조로 동작합니다.

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

위 코드의 흐름을 살펴보면, 먼저 문서가 로드되면 새로운 MessageChannel을 생성하고 port2를 부모 창으로 전달합니다. 이후 port1에 메시지 리스너를 등록하고 start()를 호출해 통신을 시작합니다. 상대측에서 메시지가 도착하면 alert를 통해 해당 데이터가 화면에 표시됩니다.