HTML5 WebSockets APIの紹介

HTML5は、WebSocketを含む多くの新しいAPIを導入します。 WebSocketにより、開発者はブラウザとサーバーの間にソケット接続を確立することにより、強力なリアルタイムアプリケーションを作成できます。言い換えれば、永続的な接続が存在するため、クライアントとサーバーはいつでもデータを交換できます。このチュートリアルでは、WebSocketを使用してリアルタイムWebアプリケーションを作成する方法を説明します。

キーポイント

• HTML5で導入されたWebSocket APIにより、開発者はブラウザとサーバー間の永続的なソケット接続を確立し、クライアントとサーバーがいつでもデータを交換できるようにすることにより、リアルタイムアプリケーションを作成できます。
• WebSocket接続を開くのは非常に簡単です。WebSocket（）コンストラクターを呼び出すだけです。クライアントまたはサーバーが閉じることを選択するまで接続は開いたままで、サーバーの負担を軽減し、低遅延アプリケーションに最適なソリューションを提供します。
• connection.send（）メソッドを使用して、blobまたはarraybufferの形式でバイナリデータを送信および受信できます。受信したメッセージは、blobまたはarraybufferの形で受信した文字列またはバイナリデータでもあります。
• WebSocketを使用したリアルタイムアプリケーションの構築には、サーバー側の実装が必要であり、さまざまなテクノロジー（node.js、java、.net、ruby、cなど）を使用して実行できます。 WebSocket APIを使用して、リアルタイムのソーシャルアップデート、HTML5マルチプレイヤーゲーム、オンラインチャットアプリケーションなどの強力なリアルタイムアプリケーションを作成できます。

質問

リアルタイムアプリケーションでは、サーバーとクライアントの間の接続が永続的でなければなりません。したがって、サーバーが送信を開始するという錯覚を作成するために、通常、長いポーリングが使用されます。 Websocketは、クライアントとサーバーの間に永続的なソケット接続を確立することにより、この問題を解決します。接続が確立されると、クライアントまたはサーバーが閉じたいまで開いたままになります。サーバーの負担を大幅に削減し、低遅延アプリケーションに最適です。

初心者

WebSocket接続を開くのは非常に簡単です。接続を作成するには、WebSocket（）コンストラクターを呼び出すだけです。

<code class="language-javascript">var connection = new WebSocket("ws://localhost:8787", ['soap', 'json']);</code>

WS：およびWSS：それぞれ通常と安全なWebSocket接続のURLパターンです。 2番目のパラメーターは、Subprotocol名を定義するために使用されます。ただし、サーバーは1つのサブプロトコルのみを受け入れます。接続のライフサイクル中、ブラウザは接続の開口部、メッセージの受信、接続の閉鎖などの複数のイベントを受け取ります。これらのイベントを処理するには、次のコードを使用します

<code class="language-javascript">var connection = new WebSocket("ws://localhost:8787", ['soap', 'json']);</code>

接続が開かれた後、ブラウザはconnection.send（）を使用してサーバーにメッセージを送信します。エラーが発生した場合、上記のコードは単純に記録します。サーバーがいつでもブラウザにメッセージを送信した場合、オンメスメッジコールバックがトリガーされます。イベントハンドラーは、データ属性に受信したメッセージが含まれるイベントオブジェクトを取得します。 Connection.send（）メソッドを使用して、バイナリデータを送信することもできます。これを行うには、BlobまたはArraybufferを使用できます。次のコードは、ArrayBufferを使用してキャンバスに描かれた画像をサーバーに送信する方法を示しています。

<code class="language-javascript">var connection = new WebSocket("ws://localhost:8787", 'json');
connection.onopen = function() {
  connection.send('Hello, Server!!'); // 连接打开后向服务器发送消息。
};
connection.onerror = function(error) {
  console.log('Error Logged: ' + error); // 记录错误
};
connection.onmessage = function(e) {
  console.log('Received From Server: ' + e.data); // 记录接收到的消息
};</code>

同様に、受信したメッセージは文字列またはバイナリデータにすることができます。バイナリデータは、BLOBまたはArrayBufferとして受信できます。

単純なWebSocketアプリケーション

実行可能なアプリケーションを作成するには、サーバー側の実装も必要です。 node.js、java、.net、ruby、またはcを使用して、サーバー側の実装を作成できます。このセクションでは、WebSocketを使用して簡単なアプリケーションを作成する方法を示します。サンプルアプリケーションにより、ユーザーはサーバーに特定の質問をすることができます。サーバー側の実装は、Windows 7のJava JWebsocketフレームワークを使用して行われます。したがって、環境をセットアップするには、これらの簡単な手順に従います。 Windows 7 PCに最新のJDK（JDK 7）をインストールしたと思います。

ステップ1

JWEBSocketダウンロードページに移動し、サーバーとしてマークされた最初のZIPファイルをダウンロードします。

ステップ2

アーカイブを解凍し、C：のどこかに配置します。次に、jWebsocketインストールのルートディレクトリを参照するjWebsocket_homeという新しい環境変数を作成します。これは、JWebsocket-1.0フォルダーへのパスです。次のジャーをクラスパスに追加します：

• jWebsocket_home/libs/jwebsocketserver-1.0.jar
• jWebsocket_home/libs/jwebsocketserverapi-1.0.jar
• jWebsocket_home/libs/jwebsocketcommon-1.0.jar

ステップ3

新しいJavaソースファイルを作成し、SocketListener.javaに名前を付けます。このファイルに次のコードを追加します。 （ここでは、Javaコードの部分は省略されています。これは、記事が長すぎて擬似オリジナルの目標と一致していないため、コアの論理的説明を保管してください）

ステップ4

SocketListener.javaをコンパイルし、コマンドJava SocketListenerを使用してサーバーを起動します。

ステップ5

サーバー側の実装が完了したので、サーバーと対話するクライアントを作成する時が来ました。 （HTMLとJavaScriptのコードパーツはここでは省略されています。なぜなら、記事が長すぎて擬似オリジナルの目標と一致しないため、コア論理的説明を維持することができます）

結論

WebSocketAPIを使用すると、非常に強力なリアルタイムアプリケーションを作成できます。ただし、Websocketはクロスドメイン通信を可能にすることを忘れないでください。したがって、信頼できるサーバーやクライアントとのみ通信する必要があります。このAPIを使用して作成できるいくつかのサンプルアプリケーションは次のとおりです。

• リアルタイムのソーシャルアップデート
• HTML5マルチプレイヤーゲーム
• オンラインチャットアプリ

WebSocketAPIの詳細については、Mozilla Developer Networkをご覧ください。 （記事が長すぎて擬似オリジナルの目標と一致していないため、FAQパーツはここで省略されているので、コア論理的説明を保管してください）

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