Web Messagingによるメッセージ通信 (3/4)

複数のウインドウを組み込んでメッセージ送受を行うとなると、「これって、どのウインドウから来たメッセージだっけ？」ということが問題となってきます。すべて同じサイト内にあるものだと、オリジンでチェックすることも出来ません。

こうしたときに用いられるのが「チャンネル（メッセージチャンネル）」です。チャンネルは、メッセージの送受先をセットで管理するものです。これは「MessageChannel」というオブジェクトとして用意されています。

MessageChannelには、２つのポートがあります。この２つのポートに、メッセージの送信先と受信先を設定することで、この２つのウインドウ間でのみメッセージを送受することが可能になります。これは、以下のようにして利用します。

1. MessageChannelを使った送信

・オブジェクトを作成

var channel = new MessageChannel();

まず、MessageChannelオブジェクトを作成します。これは、引数なしのコンストラクタ関数を呼び出して作るだけです。

・ポートを設定する

《MessageChannel》.port1.addEventListener('message', 関数 );

このMessageChannelには、２つのポートがあります。「port1」と「port2」です。これが、送受する２つの入り口になります。これらのプロパティには「MessagePort」というオブジェクトが設定されています。このMessagePortの「onmessage」イベントに、このMessageChannelで向こう側のポートから何かメッセージが送られてきた時の処理を用意しておきます。

なお、ここではport1に設定する書き方を指定していますが、port2でも同じです。どちらを使ってもまったくかまいません。

・ポートをスタートする

《MessageChannel》.port1.start();

onmessageイベントを設定したほうのポート（ここではport1）の「start」を呼び出します。これで、このport1にメッセージが届いたら、onmessageの関数が呼び出されるようになります。

・MessagePortを指定してメッセージを送る

《Window》.postMessage( 値l , オリジン ,《MessagePort》);

postMessageでメッセージを送信します。第３引数に、送信先となるMessagePortを指定すると、そのポートに送信先のウインドウを設定してメッセージが送られます。注意すべきは、「ここで指定するポートは、先ほどonmessageを指定したポートではないほうを指定する」という点です。同じポートを指定してはダメです。

たとえば、ここではport1にonmessageを指定しましたから、port2のほうをpostMessageで使います。これで、メッセージを送ったウインドウでポート（port2）にメッセージを送ると、もう一方のポート（port1）でonmessageが発生し、そのポートに設定したWindowでメッセージが受け取れるようになる、というわけです。


2. MessageChannelを使った受信と返信

・onmessageイベントの処理を設定する

window.addEventListener('message', 関数 );

まず、onmessageイベントを受け付けるように関数を設定します。これは、通常のonmessageイベント処理と全く同じです。

・イベントから値を取り出す

変数 = 《MessageEvent》.data;

onmessageイベントが発生したときに呼び出される関数では、引数で渡されるMessageEventオブジェクトを利用してイベントに関する情報を受け取ります。送信された値の取得は、通常と同じで「data」プロパティから取り出せます。

・MessagePortを得る

変数= event.ports[0];

MessageEventには、値と一緒に渡されるMessagePortが「ports」プロパティにまとめられています。これは複数のポートを受け取れるよう配列になっています。ここに、送信側でpostMessageするときに引数に指定したMessagePortオブジェクトが保管されています。通常は複数MessagePortが送られることはないでしょうから、このports[0]に保管されているMessagePortを取り出して利用すればいいでしょう。

・メッセージを返送する

《MessagePort》.postMessage(msg);

メッセージの返送は、event.target.postMessageを使いません。取り出したMessagePortの「postMessage」を使います。これは引数にオリジンを指定する必要がありません。なにしろ、このポートから送信すれば、もう一方のポートに送られることはわかっているんですから。

後は、向こう側でMessageChannelのもう一方のポートに設定されたonmessageイベントが発生し、必要な処理が実行される、というわけです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。