HTML5 の WebSocket について説明します

HTML5 の WebSocket について知る

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

1. HTML5 の 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. HTML5 での WebSocket API の使用法

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

コードは次のとおりです。

// 创建一个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()
};

上記の初期化スニペットを見てみましょう。パラメータは URL で、ws は WebSocket プロトコルを表します。 onopen、onclose、および onmessage メソッドは、イベントを Socket インスタンスに接続します。各メソッドは、ソケットの状態を表すイベントを提供します。

onmessage イベントは、メッセージの本文部分を含めることができるデータ属性を提供します。メッセージの本文部分は、より多くのデータを転送するためにシリアル化/逆シリアル化できる文字列である必要があります。

WebSocket の構文は非常にシンプルで、クライアントが WebSocket をサポートしていない限り、WebSocket の使用は非常に簡単です。 IE ブラウザは現在、WebSocket 通信をサポートしていません。クライアントが WebSocket 通信をサポートしていない場合は、いくつかのフォールバック オプションを使用できます。

Flash テクノロジー - Flash は簡単な代替手段を提供します。 Flash を使用することの最も明白な欠点は、すべてのクライアントに Flash がインストールされているわけではなく、iPhone/iPad などの一部のクライアントは Flash をサポートしていないことです。

AJAX ロングポーリング テクノロジー - AJAX ロングポーリングを使用して WebSocket をシミュレートすることは、しばらく前から業界で行われてきました。これは実行可能な手法ですが、送信されるメッセージは最適化されません。つまり、これは解決策ではありますが、技術的に最適な解決策ではありません。

IEなどの現在のブラウザはWebSocketに対応していないため、WebSocketのイベント処理やリターン送信、サーバー側で統一APIを利用する必要がある場合はどうすればよいでしょうか？幸いなことに、Guillermo Rauch は Socket.IO テクノロジーを作成しました。

3. Socket.IO を使用した WebSocket

Socket.IO は、LearnBoost の最高技術責任者および LearnBoost Labs のチーフサイエンティストである Guillermo Rauch によって作成された WebSocket API です。 Socket.IO は検出機能を使用して、WebSocket 接続、AJAX ロングポーリング接続、または Flash などを確立するかどうかを決定します。リアルタイム アプリケーションを迅速に作成できます。 Socket.IO は、クライアント API によく似た NodeJS API も提供します。

[関連する推奨事項]

1. 無料の h5 オンライン ビデオ チュートリアル

2. HTML5 完全版マニュアル

3. php.cn オリジナル html5 ビデオチュートリアル

4. h5Canvas で五つ星赤旗を描画する方法の例