HTML5におけるMessageEventとSSEの仕様

1.MessageEventインターフェース

HTML5の仕様で定義されている新しい通信方式は、WebSocketであろうとSSEであろうと、video、audio通信を実装する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 サイトの他の関連記事を参照してください。