libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

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

作成:2012-04-30 11:05
更新:2012-04-30 11:05

■MessageChannelによるチャンネルの利用

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

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

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

1. MessageChannelを使った送信

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

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

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

・ポートをスタートする
《MessageChannel》.port1.start();
onmessageイベントを設定したほうのポート(ここではport1)の「start」を呼び出します。これで、このport1にメッセージが届いたら、onmessageの関数が呼び出されるようになります。

・MessagePortを指定してメッセージを送る
《Window》.postMessage( 値l , オリジン ,《MessagePort》);
postMessageでメッセージを送信します。第3引数に、送信先となるMessagePortを指定すると、そのポートに送信先のウインドウを設定してメッセージが送られます。注意すべきは、「ここで指定するポートは、先ほどonmessageを指定したポートではないほうを指定する」という点です。同じポートを指定してはダメです。

たとえば、ここではport1onmessageを指定しましたから、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イベントが発生し、必要な処理が実行される、というわけです。

※プログラムリストが表示されない場合

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

※関連コンテンツ

「JavaScriptによるHTML5プログラミング入門」に戻る