IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
HTML5 JavaScript API
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > HTML5 JavaScript API > Web Messagingの使い方 > チャネルメッセージングを実装するには?
  カテゴリ別さくいん

チャネルメッセージングを実装するには?

チャネルメッセージングを実装するには

解説

ドキュメント間でデータのやり取りを行うには、windowオブジェクト間のデータ送受信である、クロスドキュメントメッセージングを利用することができます。(クロスドキュメントメッセージングについてはクロスドキュメントメッセージングを実装するには?を参照ください)

しかし、クロスドキュメントメッセージングは手軽に利用できる反面、通信window単位となるため、独立した複数の種類のメッセージが並行してやり取りされるといった場合には、メッセージ受信イベントのハンドラで、煩雑な振り分け処理を行う必要があります。

チャネルメッセージングでは、こうした状況に対応するため、window単位ではなく、任意の数だけ生成可能なMessageChannelオブジェクトを利用して通信を行います。

MessageChannelオブジェクトは、個別の通信経路を抽象化したもので、それ自体にはport1とport2という属性しか存在しません。このport1属性とport2属性にそれぞれ格納されたMessagePortオブジェクトが、実際のメッセージの送受信を担当します。

MessageChannelオブジェクトを介して、port1とport2のMessagePortオブジェクトは、互いに相手とメッセージを送受信する関係になっています。MessageChannelオブジェクト通信ケーブルとした場合の、両端の端末のような関係に当たります。

MessagePortオブジェクトには以下のようなメソッドイベントハンドラが存在し、port1もしくはport2の一方のMessagePortオブジェクトが「postMessage(message)」メソッドを呼び出してメッセージを送信すると、他方のMessagePortオブジェクトで、そのメッセージを受信するmessageイベントが発生します。

名前内容
postMessage(message)messageを自分とペアになったMessagePortオブジェクトに送信する
start()このMessagePortオブジェクトでのデータ送受信を開始する
close()このMessagePortオブジェクトでのデータ送受信を切断する
onmessageメッセージ受信時のイベントハンドラ。自分とペアになったMessagePortオブジェクトからメッセージを受信する。event引数はMessageEventオブジェクトで、data属性で受信したメッセージを参照する

以下は同一ドキュメント内でのチャネルメッセージングの例です。

// 通信チャンネル生成処理
var channel = new MessagePort();

// port1での通信開始。通信を行うためには必須。
channel.port1.start();
// port1のメッセージ受信ハンドラ定義
channel.port1.onmessage = function(event){
    console.log(event.data);
}

// port2での通信開始。通信を行うためには必須。
channel.port2.start();
// port2のメッセージ受信ハンドラ定義
channel.port2.onmessage = function(event){
    console.log(event.data);
}

// port1からport2へのメッセージ送信
// この後、port2のメッセージ受信ハンドラが呼ばれる
channel.port1.postMessage("送信データ");

異なるドキュメントの間でのチャネルメッセージング

チャネルメッセージングを、異なるドキュメントの間で行うためには、通信を行うMessageChannelオブジェクトのport1またはport2のどちらかのMessagePortオブジェクトを、通信先のドキュメントに送り届ける必要があります。ドキュメントをまたいで存在するport1とport2の間で通信することで、ドキュメント間の通信を行います。

これには、クロスドキュメントメッセージングの仕組みを使用します。クロスドキュメントメッセージングの送信メソッド、「window.postMessage(message, targetOrigin)」には、省略可能な追加の引数として、MessagePortオブジェクト配列を渡すことができ、これによって、別のドキュメントにMessagePortを渡すことができます。

ただし、仕様の改訂を反映して、この追加の引数の位置が、ブラウザによって異なります。ChromeSafariでは、この追加の引数は、messageとtargetOriginの間に割り込む形になります。

var channel = new MessageChannel();
channel.port1.start();
channel.port2.start();
window.postMessage("送信メッセージ",[channel.port2],"http://example.com");

これに対して、Operaでは、最後に引数が追加されます。(FireFoxIEはチャネルメッセージングをサポートしていません)

window.postMessage("送信メッセージ","http://example.com",[channel.port2]);

MessagePortオブジェクト配列に複数格納して渡すことができますが、同一のインスタンスを重複して格納した場合、もしくは同一のMessageChannelオブジェクトに属するMessagePortオブジェクトを両方とも格納した場合はエラーになります。

クロスドキュメントメッセージングで相手先に渡されるMessagePortオブジェクトは、そのものではなく複製になりますが、メッセージの送受信は同じように行われます。

送信したMessagePortオブジェクト配列は、相手先の受信イベントの引数であるMessageEventオブジェクトのports属性を参照することで取得できます。

// 受信側のコード
window.onmessagge(event){
    // この例では送信元のchannel.port2が取得される
    var port = event.ports[0];
    // 受け取ったMessagePortを利用して通信を行う
    port.onmessage = function(event) {
        // 受け取ったデータを返信する
        port.postMessage(event.data);
    }
}

Web Workersのワーカーとの通信もチャネルメッセージングのAPIを利用して実装されています。

関連項目




iPhone 7 (PRODUCT)RED Special EditioniPhone 7 (PRODUCT)RED Special Edition
Appleが発売したiPhone 7の特別エディション。
Wi-Fi STATION N-01JWi-Fi STATION N-01J
NTTドコモが販売するモバイルWi-Fiルーター。
LAVIE Hybrid ZEROLAVIE Hybrid ZERO
NECパーソナルコンピュータが販売する2in1PCのシリーズ。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2017年3月28日現在
ランキング1   ICT (用語辞典)
ランキング2   セグメント (用語辞典)
ランキング3   スワイプ  (用語辞典)
ランキング4   プラットフォーム  (用語辞典)
ランキング5   リーンスタートアップ  (用語辞典)
ランキング6   リマインダー  (用語辞典)
ランキング7   ハードコピー  (用語辞典)
ランキング8   ローゼット  (用語辞典)
ランキング9   キュレーションサービス  (用語辞典)
ランキング10   リグレッションテスト  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについてウェブリオ株式会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2012 Weblio, Inc. All rights reserved.