HTML5 API入門

WebSocketの概要

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
WebSocketの概要について学びます。
講師:
06:40

字幕

このレッスンでは WebSocketの概要について学びます WebSocket は HTML5 の 仕様に含まれる 非常に重要な機能です WebSocket を使うと ウェブブラウザと ウェブサーバーが 非同期に通信することができます 例えば クライアントがウェブサーバーに WebSocket で接続すると ウェブサーバーにデータを送ることができます またその接続状態を維持しておくことができ 逆にサーバーからクライアントに データを送ることもできます すでにこの環境では WebSocket を動作させるための node.js や WebSocket の モジュールをインストールしています またウェブサーバーは socketserverWS.js という JavaScript ファイルで 実装されていますので これを実行します Windows の場合 JavaScript が置かれている フォルダーで キーボードの Shift キーを押しながら 右クリックし 「コマンド ウィンドウをここで開く」 を選択して このフォルダーを基準にして コマンドプロンプトを開きます Mac では開きたいフォルダーを ターミナルにドラッグ & ドロップすると そのフォルダーを基準にして ターミナルを開けます サーバーを起動するコマンドを 入力しましょう まず node.js エンジンを 起動するために node と入力します そして半角スペースをはさんで 起動したいサーバーの名前である socketserverWS.js というファイル名を入力します 入力が終わったら Enter キーを押します すると WebSocket サーバーが起動し ポート 8888 で接続を待機します これでクライアントから WebSocket サーバーに対して 接続を行い データを送信することができます またサーバーもいつでも非同期で クライアントにデータを送り返すことが できます これでクライアントとサーバーの間に 双方向通信を行う環境が整いました WebSocket のサーバーを 実装する時 重要なポイントが一つあります あらゆるクライアントが WebSocket を使って サーバーに接続しようとする時 クライアントはサーバーに送られる 最初のリクエストでは 通常通り http プロトコルが使われます サーバーはそのリクエストを受け取って WebSocket プロトコルで レスポンスを返す という流れになります このウェブサーバーは クライアントからのリクエストを受け取る時 クライアントの Origin つまり http と ドメイン名で 構成される情報を リクエストの一部として受け入れます この時その Origin からの リクエストを受け入れるか 拒否するかどうかは サーバー次第です このサンプルではサーバーは ローカルホストの ポート番号 63342 から来る リクエストのみ 受け入れるようになっています 実際にクライアントのウェブページを ローカルホストから 起動してみましょう この PC ではローカルに ウェブサーバーを起動して このフォルダーにあるファイルが ローカルホストの ポート番号 63342 を通して 実行されるようになっています ブラウザを開きローカルホスト上にある 先ほどのファイルに接続します ウェブサーバーはクライアントの名前を見て それがローカルホスト 63342 であることを確認し それを受け入れます その後 サーバーは 接続しているクライアントの数を 1 秒ごとに送り返します これはすでにサーバーが そのように動作するよう実装しています さてページを実際に読み込んでみましょう ローカルホストの 63342 というポート番号上にある 先ほどのクライアントの HTML を 表示します Enter キーを押しましょう WebSocket の通信が始まりました ウェブページ つまりクライアントが WebSocket のサーバーに 接続されています サーバーはリクエストを受け入れ クライアントに非同期でメッセージを 送り返しています サーバーで何が起こっているのかを 確認するため コマンドプロンプトに戻ってみましょう このサンプルでは 様々なメッセージが表示されています このメッセージは ウェブサーバーから ローカルホストのクライアントに 送られています また 例えばクライアント側から サーバーにデータを送ることもできます このようにテキストボックスに Graz と入力します [サーバーに送信] ボタンをクリックします サーバーはこのメッセージを受け取ったら そのままクライアントに送り返します ページの下にスクロールすると 先ほどクライアントから サーバーにテキストを送信したことが わかります また同じようにサーバーから クライアントに 同じメッセージが返されていることも わかります コマンドプロンプトでも サーバーに対してもクライアントから メッセージが送られていることがわかります サーバーには 複数のクライアントが 接続することができます ブラウザで新しいタブを開いて 同じ URL を開いてみましょう この URL をコピーして 新しいタブに貼り付け Enter キーを押します サーバーに接続されているクライアントは 2 つになり サーバーはすべての接続に対して それぞれに 1 秒ごとにメッセージを送信しています ここで新しいタブを閉じると クライアントの接続が 1 つ 切断されたことがわかります このように 接続中のクライアント数に 変化がありますね クライアントを閉じた時 つまりクライアントが切断された時 サーバー側でもそれを確認することができます サーバー側のログを確認すると クライアントが切断された旨のメッセージが 表示されていることがわかります このレッスンでは WebSocket が 実際にどのように機能するかを 学びました

HTML5 API入門

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

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

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

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

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