HTML5におけるMessageEventとSSEの仕様

黄舟
リリース: 2018-05-28 16:16:06
オリジナル
2974 人が閲覧しました

1.MessageEventインターフェース

HTML5の仕様で定義されている新しい通信方式は、WebSocketであろうとSSEであろうと、videoaudio通信を実装するWebRTCを含め、すべての定義に基づいています。 HTML5 仕様 インターフェイス: MessageEvent。これはメッセージベースのイベントです。まず、JavaScript の従来のイベント タイプとは何かを見てみましょう。

従来の DOM イベントの基本クラスには主に次のものがあります:

(1)UIEvents: マウス イベントとキーボード イベントの両方が UI イベントから 継承する、

(2)MouseEvents: 汎用化されたマウス イベント。 click イベント、mousemove イベントなどはすべて MouseEvents イベント タイプのインスタンスです。

(3)MutationEvents: 一般化された DOM 変更イベント。

(4)HTMLEvents: 一般化された HTML イベント。

HTML5で新たに追加されたMessageEventイベントは、イベント送信に特化したイベントです。イベントの プロパティ に加えて、それ自体の固有のプロパティもいくつか含まれています。インターフェイスの具体的なコードはここには掲載されません。HTML5 仕様の 880 ページで参照できます。

MessageEvent の新しい重要な属性には以下が含まれます:

(1)data: これはサーバーによって送信されたデータを保存します

(2)lastEventId: これは最後のイベントを保存しますIDString

さらに、これには、オリジン、ポート、ソースなどの属性も含まれます。 SSE実装の分析を通してMessageEventの使い方を学びましょう。

2. SSE と MessageEvent

SSE クライアントの実装は、MessageEvent インターフェイスを使用します。

サーバーのリストの各フィールドは、ルールに従ってクライアントによって解釈され、id フィールドは MessageEvent の lastEventId に対応します。データ フィールドで定義されたデータが解釈された後、MessageEvent のデータ フィールドに送信されます。次のコードを参照してください:

var es = new EventSource("test.php");
es.addEventListener("message", function(e){
    console.log(e);
})
ログイン後にコピー

ここでは、Chr でイベント オブジェクト 処理メソッドを直接使用します。 このイベント オブジェクトの構造は、ome コンソールに出力されます。このオブジェクトのデータ フィールドは test.php で送信されたデータであり、その型は message で、そのプロトタイプは MessageEvent を継承していることがわかります。

また、SSE サーバー マニフェストの再試行は内部プロパティであり、JavaScript コードを通じて取得できないことにも注意してください。

3. EventSource インターフェイス

SSE で使用する EventSource インターフェイスは HTML5 仕様で定義されており、コードは HTML5 仕様の 882 ページに記載されています。

インターフェースからわかるように、最初は 3 つの組み込み イベント処理 プログラムが定義されています: onopen/onmessage/onclose。さらに、3 つの接続の statereadyState も含まれます。これは、接続がまだ確立されていない、またはクライアントが中断していることを意味します。は再接続中です。OPENは接続が開いていることを意味し、CLOSEDは接続が中断され、クライアントが再接続を試行しないことを示します。定義されているメソッドは、接続を閉じるために使用される close() だけであることがわかります。

以上がHTML5におけるMessageEventとSSEの仕様の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!