最新の HTML BroadcastChannel API 推奨_html/css_WEB-ITnose-htmlチュートリアル-php.cn

最新の HTML BroadcastChannel API 推奨_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:48:39

オリジナル

1112 人が閲覧しました

HTML BroadcastChannel API

現在のブラウザの中で、BroadcastChannel APIをサポートしているのはFirefox38のみであり（記事執筆時点）、Firefox38は2015年5月まで正式版をリリースしないことが公式に発表されています。この新しい API は、新たな可能性の世界を開き、postMessage API から引き継いだ多くの制限を解決します。

WHATWG リビング HTML 標準の一部としての BroadcastChannel API については、ここで詳細を確認できます。

BroadcastChannel API とは何ですか?

BroadcastChannel API を使用すると、同じオリジンドメインおよびユーザーエージェントにあるすべてのウィンドウ、iFrame などが対話できるようになります。つまり、ユーザーが同じ Web サイトの 2 つのタブウィンドウを開いた場合、Web サイトのコンテンツが変更された場合、両方のウィンドウに更新が同時に通知されます。

まだわからないですか？ Facebook を例に挙げると、Facebook ウィンドウを開いてまだログインしておらず、ログインするために別のウィンドウを開いた場合、ユーザーがログインしてリクエストを行ったことを他のウィンドウ/タブに通知できます。対応するページの更新。

本質的に、BroadcastChannel API を使用すると、ソケットやタイマーを使用せずに状態変化を自己認識できるアプリケーションを構築できます。これは、パブリッシュ/サブスクライブシステムに特に効果的です。

BroadcastChannel API の動作

新しい BroadcastChannel の作成

新しい BroadcastChannel API の作成は簡単です。必要なのは、チャンネル名をパラメーターとして BroadcastChannel コンストラクターに渡し、その参照を変数に保存することだけです。

let cast = new BroadcastChannel('mychannel');

ログイン後にコピー

メッセージ通知を送信する

メッセージの送信も非常に簡単です。必要なのは、BroadcastChannel インスタンスに割り当てられた変数 (この例では、上記のキャスト変数です) を参照し、その postMessage メソッドを呼び出すことだけです。

他のパブリッシュ/サブスクライブベースのシステムに精通している場合は、postMessage メンバーメソッドをイベントエミッターと呼ぶ方が合理的かもしれません。

postMessage メソッドの優れている点は、これを使用してあらゆるものを送信できることです。オブジェクトや文字列など、何でも送信できます。あなたが送信しているイベントを購読者が知っている限り、それを楽しんでください。

myObj = {someKey: 'Some value', anotherKey: 'Another value'};cast.postMessage(myObj);

ログイン後にコピー

一部のよりニッチなパブリッシュ/サブスクライブシステムとは異なり、「トピック」はネイティブ実装ではサポートされていません。これは、すべてのリスニング加入者に「トピック」をブロードキャストするチャネルがないことを意味します。

ただし、創造的なコードを作成することで、この実装を模倣することもできます。オブジェクトを使用して、オブジェクトの 1 つのキーとして「トピック」を送信し、別のキー「データ」としてメッセージのコンテンツを送信することができます。

メッセージ監視

「受信者」は、「サブスクライバー」と呼ばれることの方が一般的です。受信機は、特定のチャネルに対して前に定義した BroadcastChannel チャネル参照変数によって発行されたイベントをリッスンします。

cast.onmessage = function (e) {     console.log(e); // This should print out the contents of the object we sent above}

ログイン後にコピー

接続を閉じます

Javascript のパフォーマンスを非常に重視し、リソース消費 (特に携帯電話を使用する場合) を気にしていると仮定します。幸いなことに、BroadcastChannel には、これらの接続を閉じることができる組み込みメソッドがあります。

cast.close(); // Close our connection and let the garbage collection free up the memory that was used

ログイン後にコピー

ブラウザのサポート

前に述べたように、現時点では Firefox バージョン 38 のみが BroadcastChannel API をサポートします。他のブラウザも追随する可能性が高いと考えると、やはりこの API は非常に便利です。そうなると、この分野で通常のアプリケーションやゲームアプリケーションを作成するのは、水の中のアヒルのようなものになります (厳しいブラウザサポートの出現)

ユーザーの観点から見ると、(現時点では) 基本的には優れている、または関連するテクニカルサポートではありません。ただし、現在は BroadcastChannel API を使用できるブラウザプラグインがありますが、結局のところ、この機能のサポートを実際に実装しているブラウザはまだないため、様子見するしかありません。

原文: http://ilikekillnerds.com/2015/03/all-about-the-html-broadcastchannel-api/

著者: 天地匯珠海支店

WeChat 公開アカウント: TechGoGoGo
Weibo: http://weibo .com/techgogogo
CSDN：