HTML5 API入門

Node.jsを使ったWebSocketクライアントの実装

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Node.jsを使ってWebSocketクライアントを実装する方法について学びます。
講師:
06:18

字幕

このレッスンでは WebSocket クライアントを 実装する方法について学びます すでに node.js で実装された ウェブサーバー socketserverWS.js があります サンプルを実行する前に node.js と WebSocket モジュールの インストールを済ませておいてください まずサーバーを起動しましょう サンプルファイルのある場所で コマンドプロンプト Mac ではターミナルを開き node socketserver WS.js を実行します ウェブサーバーはポート 8888 で クライアントからの接続を待機しています またウェブサーバーは Origin つまりクライアントが実行されている場所が ローカルホスト ポート番号 63342 からのみを 受け付けるよう実装されています エクスプローラなどから 直接 HTML を開いた場合は Origin が nul として送信されます その場合 これから試すように サーバーはその接続を拒否します ダブルクリックで HTML を開きます ソケットをクローズ つまりウェブサーバーに接続できませんでした 原因はクライアントの Origin が ローカルホスト 63342 では なかったため ウェブサーバーが接続のリクエストを 拒否したからです コマンドプロンプトを見ても ウェブサーバーがクライアントからの 接続リクエストを 拒否していることがわかります 正常にクライアントを実行するために 先ほどのタブを閉じ ローカルホスト 63342 から クライアントを実行します ローカルホスト 63342 に置かれている クライアントを開きます 今度はウェブサーバーがリクエストを受け入れ サーバーとクライアントは 非同期で 通信することができるようになりました ここで クライアントからサーバーに メッセージを送信できます ここでは Blackbird と入力してみます サーバーはこのメッセージを受信して 同じようにレスポンスを クライアントに返します サーバーに送信してみましょう クライアントからは 「サーバーにテキストを送信しています」 というメッセージが表示されました 同じようにサーバーを開くと 少し上にスクロールします するとクライアントから送られたメッセージを 確認することができます クライアントに戻って 同じようにスクロールすると サーバーに送信したテキストの下には 同じようにサーバーから クライアントに返したメッセージが 表示されています クライアントを閉じると サーバーはそれを検出して メッセージを出力します では実際に クライアントを どのように実装しているかを見てみましょう エディタに切り替えます エディタでは HTML を開いているところです WebSocket を実装するための JavaScript の API は 非常にシンプルになっています ブラウザがサポートしていれば window オブジェクトには WebSocket プロパティがあります このオブジェクトを使って サーバーにメッセージを送信したり サーバーからのメッセージを 受信したりできます ウェブページの起動時には ここからスクリプトが実行されます これはサーバーへの接続に使用する URL です ここで重要な点は ローカルホストのポート番号を 8888 に指定することと プロトコルが http ではなく WebSocket の通信に使用する ws になっていることです 続いてこの URL を使って 新しい WebSocket オブジェクトを作成し ウェブサーバーへの接続を試みます 次に クライアントで扱うことのできる 一連のイベントがあります 接続が始まった時は onopen イベントが発生します この中には ウェブページ上にメッセージを 表示するための log メソッドがあります そしてクライアントからデータを サーバーに送信するためには send メソッドを使用します onopen onmessage onclose などの イベントを処理する際 いつでもこの send 関数を 呼び出すことができます このように望む時にいつでも クライアントからサーバーに またはサーバーからクライアントに データを送信することができるのです これが WebSocket によって提供される 双方向かつ非同期な通信です サーバーからクライアントに データが送信されると onmessage イベントが発生します ここではクライアントにメッセージの内容が 表示されます その後 接続が閉じられた時も その旨のメッセージを表示します さて クライアントでは テキストボックスにテキストを入力して サーバーにそのメッセージを 送信する機能がありました ユーザーが [サーバーに送信] ボタンを クリックした時 doSend 関数が呼び出されます doSend 関数はここに定義されています そして doSend 関数は 入力したテキストを取得し サーバーに send 関数を使って メッセージを送信しています そしてこの時クライアントのパネル上に そのためのメッセージを表示するために log 関数も使っています これで クライアント側の実装はすべてです このレッスンでは WebSocket クライアントを 実装する方法について学びました

HTML5 API入門

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

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

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

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

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