HTML5のMessageChannelとMessagePortオブジェクトとは？仕組みと使い方を解説

MessageChannelオブジェクトとは

MessageChannelは、異なるブラウジングコンテキスト（iframeやWeb Workerなど）の間で安全にデータをやり取りするための通信路（チャネル）を生成するAPIです。チャネルを作成すると、内部的に2つのポート（MessagePort）が自動的に生成され、このポート同士を通じて双方向のメッセージ送受信が可能になります。

片方のポートを別のコンテキストへ転送することで、互いに直接参照できないウィンドウ同士でも、独立した専用の通信経路を確立できるのが大きな特徴です。

MessagePortの主なメソッド

• 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);

このコードでは、まずnew MessageChannel()で新しいチャネルを生成します。次にpostMessage()の第3引数として[mc.port2]を渡すことで、親ウィンドウへポートを転送しています。その後、手元に残ったport1に対してmessageイベントリスナーを登録し、start()を呼び出して通信を開始します。これにより、転送先のコンテキストとの間でメッセージのやり取りが行えるようになります。