HTML5 MessageChannel과 MessagePort 객체 완벽 이해하기

HTML5에서 제공하는 MessageChannel은 서로 다른 브라우징 컨텍스트(browsing context) 간에 안전하게 데이터를 주고받을 수 있도록 설계된 통신 메커니즘입니다. MessageChannel 객체를 생성하면 내부적으로 두 개의 MessagePort(포트)가 자동으로 만들어지며, 이 포트들을 통해 데이터를 전송하고 다른 브라우징 컨텍스트로 전달할 수 있습니다.

MessagePort의 주요 메서드

• postMessage() — 채널을 통해 메시지를 전송합니다.
• start() — 포트에 쌓인 메시지 큐의 데이터 전송을 시작합니다. message 이벤트 리스너를 등록한 후 반드시 호출해야 합니다.
• close() — 더 이상 메시지를 주고받지 않도록 해당 포트를 닫습니다.

동작 방식

MessageChannel은 특히 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);

코드 설명

위 예제의 동작 흐름은 다음과 같습니다.

1. 문서가 로드되면 DOMContentLoaded 이벤트가 발생하고 loadHandler 함수가 실행됩니다.
2. new MessageChannel()로 새로운 채널을 생성하여 port1과 port2를 확보합니다.
3. postMessage()의 세 번째 인자로 [mc.port2]를 전달해 port2를 부모 창으로 넘깁니다. 이렇게 하면 부모 창이 port2를 통해 이 문서와 직접 통신할 수 있습니다.
4. port1에 message 이벤트 리스너를 등록한 후 start()를 호출하여 수신 대기를 시작합니다.
5. port2로부터 메시지가 도착하면 portMsgEvent.data에 담긴 내용이 alert 창으로 표시됩니다.

이처럼 MessageChannel과 MessagePort를 활용하면 iframe, 웹 워커(Web Worker), 윈도우 간에 직접적이고 독립적인 통신 채널을 구축할 수 있어, 복잡한 메시징 구조에서도 코드의 가독성과 유지보수성을 크게 향상시킬 수 있습니다.