検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 の WebSocket とサーバー プッシュ イベントの簡単な分析_html5 チュートリアル スキル

HTML5 の WebSocket とサーバー プッシュ イベントの簡単な分析_html5 チュートリアル スキル

WBOY
WBOYオリジナル
2016-05-16 15:45:541927ブラウズ

WebSocket

Web Sockets は、Web アプリケーション用の新世代の双方向通信テクノロジーであり、単一のソケット上で実行され、JavaScript インターフェースを介して HTML5 互換ブラウザーで公開されます。

Web サーバー上で Web Socket 接続を取得したら、send() メソッドを呼び出してブラウザからサーバーにデータを送信し、onmessage イベント ハンドラーを通じてサーバーからブラウザにデータを受信できます。

以下は、新しい WebSocket オブジェクトを作成する API です。

JavaScript コードコンテンツをクリップボードにコピーします
  1. var Socket = new WebSocket(url, [プロトコル] );
最初のパラメータ url は、接続先の URL を指定するために使用されます。 2 番目の属性であるポートはオプションであり、指定されている場合は、接続を成功させるためにサーバーがサポートする必要があるサブプロトコルを指定します。

WebSocket プロパティ

以下は WebSocket オブジェクトのプロパティです。上記の Socket オブジェクトを作成したと仮定します:
属性 説明 ソケット.readyState 読み取り専用属性
readyState は接続のステータスを表します。次の値があります:

属性 描述
Socket.readyState

只读属性readyState表示连接的状态。有以下取值：

  1. 0 表示连接尚未建立。

  2. 1 表示连接已建立，可以进行通信。

  3. 2 表示连接正在进行关闭握手。

  4. 3 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性bufferedAmount表示已经使用 send() 方法排队的 URF-8 文本字节数。


0 は、接続がまだ確立されていないことを意味します。
1は接続が確立され、通信が可能であることを意味します。
事件 事件处理程序 描述
open Socket.onopen 建立 socket 连接时触发这个事件。
message Socket.onmessage 客户端从服务器接收数据时触发。
error Socket.onerror 连接发生错误时触发。
close Socket.onclose 连接被关闭时触发。

2 は、接続が終了ハンドシェイクを受けていることを示します。
3 は、接続が閉じられたか、接続を開けないことを意味します。
方法 描述
Socket.send()

send(data) 方法使用连接传输数据。

Socket.close()

close() 方法用于终止任何现有连接。

Socket.bufferedAmount 読み取り専用属性bufferedAmountsend() メソッドを使用してキューに入れられた URF-8 テキストのバイト数を表します。 テーブル> WebSocket イベント 以下は、WebSocket オブジェクトに関連するイベントです。上記の Socket オブジェクトを作成したと仮定します: WebSocket メソッド WebSocket オブジェクトに関連するメソッドは次のとおりです。上記の Socket オブジェクトを作成したと仮定します: 方法 説明 Socket.send() send(data) メソッドは、接続を使用してデータを転送します。 Socket.close() close() メソッドは、既存の接続を終了するために使用されます。 テーブル>

サーバー プッシュ イベント
従来の Web アプリケーションは、Web サーバー側に送信されるイベントを生成します。たとえば、リンクをクリックすると、サーバーに新しいページが要求されます。

Web ブラウザーから Web サーバーまでのこの種の時間をクライアント側イベントと呼ぶことができます。

HTML5 の出現により、WHATWG Web アプリケーション 1.0 では、サーバー プッシュ イベント (SSE) と呼ばれる Web サーバーから Web ブラウザへのイベント ストリームが導入されました。 SSE を使用して、DOM イベントをユーザーのブラウザに継続的にプッシュします。

このイベント ストリーミング メソッドは、新しいメッセージが利用可能になったときにサーバーへの永続的な接続を開き、クライアントにデータを送信するため、継続的なポーリングの必要がなくなります。

SSE Web アプリケーション
Web アプリケーションでサーバー プッシュ イベントを使用するには、ドキュメントに 要素を追加する必要があります。

要素の src 属性は、イベントを含むデータ ストリームを送信するための HTTP 永続接続を提供する URL を指す必要があります。

この URL は、イベント データを継続的に送信する PHP、PERL、または任意の Python スクリプトを指します。以下は、サーバー時間を予期する Web アプリケーションの簡単な例です。

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html>
  3. <頭>
  4. <スクリプト type="text/ javascript">
  5. /* ここでイベント処理ロジックを定義します */
  6. スクリプト>
  7. 頭>
  8. <ボディ>
  9. <div id="sse" >
  10. <イベントソース src="/cgi -bin/ticker.cgi" />
  11. div>
  12. <div id="ティッカー" >
  13. <時間>
  14. div>
  15. ボディ>
  16. html>

SSE サーバー側スクリプト
サーバー側スクリプトは、次に示すように、タイプを text/event-stream として指定する Content-type ヘッダーを送信する必要があります。


コードをコピーします
コードは次のとおりです:
print "Content-Type: text/event -streamnn" ;

Content-type を設定した後、サーバー側スクリプトは Event: タグに続いてイベント名を送信します。次の例では、改行で終了する Server-Time をイベント名として送信します。


コードをコピーします
コードは次のとおりです。
print "Event: server-timen";

最後のステップでは、Data: タグを使用してイベント データを送信し、その後に次のように改行で終了する整数文字列値を送信します。


コードをコピーコードは次のとおりです:
$time = localtime();
print " Data: $timen";
以下は、perl で書かれた完全なticker.cgiです:


コードをコピーしますコードは次のとおりです:
#!/usr/bin /perl
print "Content-Type: text/event-streamnn";
while(true){
print "Event:server-timen";
$time = localtime();
print " データ: $timen";
sleep(5);

サーバー プッシュ イベントの処理
サーバー プッシュ イベントを処理できるように Web アプリケーションを変更しましょう。最後の例は次のとおりです:

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html>
  3. <頭>
  4. <スクリプト type="text/ javascript">
  5. document.getElementsByTagName("eventsource")[0]。   
  6. addEventListener("サーバー時間", eventHandler, false);   
  7. 関数 eventHandler(イベント)
  8. {
  9. // サーバーによって送信されたアラート時間
  10. document.querySelector('#ticker').innerHTML = event.data;   
  12. }
  13. スクリプト>
  14. 頭>
  15. <ボディ>
  16. <div id="sse" >
  17. <イベントソース src="/cgi -bin/ticker.cgi" />
  18. div>
  19. <div id="ティッカー" 名前="ティッカー">
  20. [時間]
  21. div>
  22. ボディ>
  23. html>

テストサーバーがイベントを送信する前に、保護された Web ブラウザがこの概念をサポートしています。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 の今後の開発動向 _html5 チュートリアルのスキル次の記事：HTML5 の今後の開発動向 _html5 チュートリアルのスキル

関連記事

続きを見る