HTML5 API入門

Node.jsを使ったWebSocketサーバーの実装

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Node.jsを使ってWebSocketサーバーを実装する方法について学びます。
講師:
08:59

字幕

このレッスンでは、Node.Jsを使って、 ウェブソケットサーバーを実装する方法について学びます。 サンプルファイルは、socketserverWS.jsで、 ファイル内の行動を詳細に解説していきます。 サンプルを実行する前に、Node.Jsとwebsocketモジュールの、 インストールを済ませておいて下さい。 まず、サーバーを起動しましょう。 サンプルファイルのある場所で、 コマンドプロンプト、マックでは、 ターミナルを開き、node、スペース、 socketserverWS.jpを実行します。 サーバーが実行されていることを チェックするために、ブラウザーで、 localhost:8888というURLを開きます。 このURLを開くと、基本的なHTTP接続が 機能していることを示すために、 index.htmlというファイルが表示されるように、 実装されています。 URLを開くと、index.htmlが返ってきましたね。 これで、ウェブサーバーが正常に 実行されていることが、確認できました。 続いて、クライアントのURLを開きます。 クライアントは、同じlocalhostですが、 ポート番号が63342という番号で 実行されるように、あらかじめ設定しています。 クライアントのURLを開くと、クライアントが開き、 ウェブソケットによる通信が始まりました。 それでは、実際にサーバー側の実相を 確認していきましょう。 Editorに切り替えます。 Node.Jsにおけるサーバーの実装では、 まず、ウェブソケットサーバーを作成します。 基本的なHTTPプロトコルと、ファイル処理が 行えることができる様に、 HTTPとFS Moduleを呼び出します。 次に、Node.JsのためのHTTP接続を確立します。 ここでは、HTTPオブジェクトを取得し、 クリエイトサーバー関数を呼び出して、 HTTPサーバーを作成しています。 任意のHTTPリクエストが発生すると、 それに応じて、OnHttpRequest関数で 処理されます。 この関数は、31行目に定義されており、 ここでは、HTTPリクエストを受信して、 要求されたURLを出力しています。 もしスラッシュ、 つまりLocalhost:8888の、 ルートのリクエストがあった場合、 IndexHtmlを返しています。 つまりここは、Index.Htmlを返すための Node.Jsのコードです。 他のURLのリスエストには、 404を返します。 これはIndex.Htmlを返すだけの、 とてもシンプルなHttpサーバーです。 そして、ポート8888で、 クライアントからの接続を監視します。 サーバーは、このポート番号で、 通常のHTTPリクエストを監視しています。 まだウェブソケットの通信は、 始まっておらず、 ここまではただのHttpサーバーです。 コードの次の部分からウェブソケットの 実相を示しています。 ここではまず、ウェブソケットサーバーオブジェクトを 作成しています。 ウェブソケットサーバーは、任意の数の クライアントを接続することができます。 そのため、全てのクライアントを保持する 配列を作成します。 その後、70行目で、クライアントからくる、 ウェブソケットリクエストを処理します。 クライアントからウェブソケット接続の リクエストがあるたびに、 ここでは、onWsRequest関数が 呼び出されます。 この関数は、72行目に定義されています。 クライアントからのすべてのリクエストは、 それがどこから来たのかを表すオリジンプロパティ を持っており、 サーバーはそれをチェックして、 特定のオリジンからのみの、 リクエストのみを許可することができます。 ここでは、localhost:63342、 つまり、ポート番号が 63342のローカルホストからのみのリクエストを、 許可するようになっています。 もしオリジンが、localhost:63342 以外であれば、 このサンプルでは、クライアントからの リクエストを、拒否するメッセージを返します。 もし、localhost:63342であれば、 このコードの下に進んで、リクエストを 受け入れます。 サンプルをlocalhost63342 以外で動作させる場合は、 この部分を書き換えなければ、 動作しませんので、 ご注意ください。 オリジンから、コネクションオブジェクトを取得します。 コネクションオブジェクトとは、その クライアントとサーバーの 全ての通信を処理することができます。 そのため、ここで先ほど作っておいた配列に コネクションオブジェクトを追加しておきます。 全てのクライアントにデータを送信 するためには、 現時点で、どのクライアントが接続されている のかを把握しておく必要があるためです。 サーバーは、毎秒、全てのクライアントに 接続されているクライアントの数を 送っています。 サーバーがクライアントからのメッセージを 受信したときは、 このイベントハンドラーが実行されます。 例えば、このアプリケーションでは、 テキストボックスから、 サーバーにメッセージを送れます。 ここでは、Grazというメッセージを 送信してみましょう。 そして、送信されたメッセージは、 ここで処理します。 イベントハンドラーは、メッセージを 受け取ります。 メッセージがテキストだった場合、 メッセージがテキストだった場合は、 コマンドプロンプトに、それを そのまま表示しています。 サーバーのログを見ると、クライアントから 送られたテキストがそのまま表示されています。 Editorに戻り、今度は、テキスト以外の バイナリなどが送られてきた場合、 その場合は、それぞれ分岐して 処理されるようになっています。 クライアントが切断されると、 クローズイベントが発生します。 言いかえれば、ブラウザーウィンドウが 閉じられると、 コネクションオブジェクトがクローズされます。 ここでは、切断された旨のメッセージを、 コマンドプロンプトに表示しています。 また、配列からも、接続されていた クライアントの コネクションオブジェクトを削除します。 ブラウザーを見ると、最初に接続した クライアントの接続数が、 一つだけであることがわかります。 新しいクライアントから接続するには、 新しいタブで、同じURLを開きます。 ここでは、URLをコピーして、 新しいタブで、もう一つ同じURLを 開いてみましょう。 そうすると、サーバーは、いくつのクライアントが 接続されたかを、把握しています。 全てのクライアントに、一秒ごとに タイムスタンプと、クライアントの数を 送信していることがわかります。 この部分の行動を確認してみましょう。 Editorに戻り、一番下まで、 スクロールしてみます。 119行目に、一秒ごとに、サーバーから メッセージを送信するように書かれています。 ここでは、sendServerMessage関数を呼び出し、 その関数では、接続されている 全てのクライアントをチェックし、 そのクライアントがまだ接続されていれば、 現在のタイムスタンプと、クライアントの数を メッセージとして送信します。 ブラウザーに戻って、先ほど開いた、 新しいクライアントを閉じてみます。 サーバー側では、クライアントが切断された ことを示すメッセージが表示されています。 このレッスンでは、Node.Jsでウェブソケットサーバーを 実装する方法を学びました。

HTML5 API入門

HTML5は今やインタラクティブコンテンツを作るうえでかかせないものです。このコースでは膨大なHTML5の仕様の中からWebアプリケーションを作成するうえで便利な機能を紹介していきます。コミュニケーション系APIの使い方のほか、Web WorkersやWebSocket、モバイル用アプリの制作で使うjQuery Mobileなどについても解説します。

3時間19分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
講師:
発売日:2015年03月03日
再生時間:3時間19分 (23 ビデオ)

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。