HTML5 WebSocket について

HTML5 の WebSocket について知る

HTML5 仕様の中で、私のお気に入りの Web テクノロジーは WebSocket API であり、急速に普及しつつあります。 WebSocket は、私たちが過去数年間使用してきた Ajax テクノロジーに代わる歓迎すべき代替手段を提供します。この新しい API は、単純な構文を使用してクライアントからサーバーにメッセージを効率的にプッシュする方法を提供します。 HTML5 の WebSocket API を見てみましょう。これはクライアント側とサーバー側の両方で使用できます。そして、Socket.IO と呼ばれる優れたサードパーティ API があります。

1. WebSocket API とは何ですか?
WebSocket API は、次世代のクライアント/サーバー非同期通信方式です。この通信は、ws または wss プロトコルを使用して単一の TCP ソケットを置き換えるもので、任意のクライアントおよびサーバー プログラムで使用できます。 WebSocket は現在、W3C によって標準化されています。 WebSocket は、Firefox 4、Chrome 4、Opera 10.70、Safari 5 などのブラウザーですでにサポートされています。

WebSocket API の優れた点は、サーバーとクライアントが指定された時間範囲内でいつでも情報を相互にプッシュできることです。 Ajax テクノロジーではクライアントがリクエストを開始する必要があり、WebSocket サーバーとクライアントは相互に情報をプッシュできるため、WebSocket は Ajax (または XHR) 通信に限定されません。

Ajax テクノロジーの賢い点は、それを使用するための設計された方法がないことです。 WebSocket は指定されたターゲット用に作成され、両方向にメッセージをプッシュするために使用されます。

2. WebSocket API の使用法
各サーバー側言語には独自の API があるため、クライアント側 API のみに注目してください。以下のコード スニペットは、接続を開き、接続のイベント リスナーを作成し、接続を切断し、メッセージを送信し、メッセージをサーバーに送り返し、接続を閉じます。
CODE:

// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080'); 
// 打开Socket 
socket.onopen = function(event) { 
  // 发送一个初始化消息
  socket.send('I am the client and I\'m listening!'); 
  // 监听消息
  socket.onmessage = function(event) { 
    console.log('Client received a message',event); 
  }; 
  // 监听Socket的关闭
  socket.onclose = function(event) { 
    console.log('Client notified socket has closed',event); 
  }; 
  // 关闭Socket.... 
  //socket.close() 
};

WebSocket は、HTML5 が提供し始めた単一の TCP 接続で全二重通信を行うためのプロトコルです。
WebSocket API では、ブラウザとサーバーはハンドシェイク アクションを実行するだけで、ブラウザとサーバーの間に高速チャネルが形成されます。データは両者間で直接転送できます。

ブラウザは、JavaScript を通じて WebSocket 接続を確立するリクエストをサーバーに送信します。接続が確立されると、クライアントとサーバーは TCP 接続を通じて直接データを交換できます。

Web Socket 接続を取得したら、send() メソッドを通じてサーバーにデータを送信し、onmessage イベントを通じてサーバーから返されたデータを受け入れることができます。

WebSocket オブジェクトの作成には次の API が使用されます。

varソケット = new WebSocket(url,[プロトコル]);
上記のコードの最初のパラメータurlは、リンクのURLを指定します。 2 番目のパラメーターのプロトコルはオプションであり、受け入れ可能なサブプロトコルを指定します。

WebSocket のプロパティ

以下は、WebSocket オブジェクトのプロパティです。上記のコードを使用してソケット オブジェクトを作成するとします。
Socket.readyState 読み取り専用プロパティ readyState は、次の値の接続ステータスを表します:
1. 0 - 接続がまだ確立されていないことを示します。
2. 1 - リンクが確立され、アクセスできることを示します。
3. 2 - 接続が閉じられていることを示します。
4. 3 - 接続が閉じられたか、接続を開けないことを示します。
Socket.bufferedAmount 読み取り専用 butteredAmount send() されてキューに入れられ、送信を待っているがまだ送信されていない UTF-8 テキストのバイト数。

WebSocket イベント
以下は、WebSocket オブジェクトの関連イベントです。作成されたソケットを使用すると、event：接続が閉じられたときにトリガーされたときに、接続が確立されるとトリガーされますWebSocket オブジェクトの関連メソッド。上記のコードを使用してソケットオブジェクトを作成するとします。

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