|
HTML5＋CSS3 |
HTML5編
|
| Lesson 15 | 新機能の使用方法(7) WebSocket |
|||
| 制作・文 | 加茂雄亮（株式会社ロクナナ） |
| Ajax 流行の立役者であるXMLHttpRequestだが、オーバーヘッドの原因となるなど課題も多い。そこに登場したWebSocketとNode.jsは、次世代のWebサイトをどう変化させるのだろうか。 |
WebSocketと
Ajax
いままでJavaScript でサーバーと双方向のやりとりを行う場合、"XMLHttp Request" を利用したが、制約が多いのが難点だった。たとえばHTTPでプレーンテキストのようなごく単純なデータ送信を頻繁に行う場合、接続の確立→リクエスト送信→レスポンス受信→切断といったプロセスを繰り返し行う必要があった。このため、接続ごとにHTTPヘッダを付与する必要があり、オーバーヘッドの原因ともなっていた。しかしWebSocketを利用すれば接続は一回だけで済み、無用なHTTPヘッダを付与する必要もないため、トラフィックを抑えられるようになる【1】。
【1】データを複数回やりとりする場合の違い
サーバー側もWebSocketプロトコルに対応している必要がある。そのため現在の一般的なHTTPサーバーでは使用できない可能性もあり注意が必要
シンプルな
実装
WebSocketの実装はシンプルだ【2】。onmessage メソッドはサーバーからデータ送信時に実行され、渡される引数からデータを受け取れる。クライアントとなるブラウザからサーバーに対するデータ送信は、sendメソッドを利用して行う。
【2】WebSocketの実装。WebSocketを生成時、コンストラクタに引数として接続先を指定する。このとき、専用プロトコルとして "ws://"となっているところに注意してほしい。
node.jsで
WebSocketを体験する
node.js【3】は、サーバーサイドJavaScriptを利用してアプリケーションを開発できる技術だ。イベントドリブンによるスケーラビリティの高いアプリケーケーションの開発ができ、Google v8Engineを採用。高速性を実現している。今回はNode.jsとWebSocketを利用してチャットシステムを構築してみよう。
【3】node.js (http://nodejs.org/)
Node.jsのインストールと
下準備
Node.js のインストールは、UbuntusやMacを利用するのが簡単だ【4】。ちなみに今回はMacとパッケージ管理システムMacPortsを利用してインストールしている。MacPorts のインストールは、Web サイトからpkg 形式のインストーラが配布されているので参照して欲しい【5】。Node.jsには開発を便利にするパッケ ージが多数配布されている。これらの一括管理には、パッケージ管理システムnpm(node package manager)【6】を使うとよい。npmはMacPortsではインストールできないため、curlを利用してインストールする。curlのインストールはMacPortsで可能だ【7】【8】。
Node.jsでWebSocketを利用したい場合、Socket.ioが便利だ【9】。Node.jsのパッケージとして配布されているので、前述のとおりnpm でインストールする【10】。
【4】MacPortsでNode.jsをインストール
【5】Mac Ports (http://www.macports.org/)
【6】node package manager (http://npmjs.org/)
【7】MacPortsでcurlをインストール
【8】curlでnpmをインストール
【9】Socket.io (http://socket.io/)
【10】npmでsocket.ioをインストール
チャットを作る(1)
サーバーサイド
Node.jsとSocket.ioを利用してチャットシステムを構築しよう。まずはサーバーサイドを解説する。JavaScriptを使ったことのあるユーザーであれば、【11】のソースがなにをしているか、多少は理解できるはずだ。requireメソッドは、パッケージを読み込むことができる。ここではhttp とsocket.io を利用する。http はその名の通り、HTTP 関連の機能を集約している。createServerでWebサーバーを生成し、server.listenメソッドでコネクションの受け入れを開始することができる。
ソケットの生成はsocket.ioで生成したioオブジェクトが行う。io.listenで監視を開始し、この際先ほどで生成したserverを引き渡す。このメソッドはsocketオブジェクトを返し、その後はイベントがあるたびにsocket.onメソッドが呼ばれることになる。onメソッドはコールバックを指定でき、引数として接続や送信を行ってきたクライアントを参照できる。
接続しているクライアントに対しての発行を行うには、client.send メソッド、client.broadcastメソッドを利用する。この2つのメソッドの違いは、client.sendメソッドが引数で渡されたクライアントのみに対して発行するのに対し、client.broadcastメソッドは接続しているすべてのクライアントに対して発行する点だ。
【11】Node.js+Socket.ioを利用した実装
チャットを作る(2)
クライアントサイド
次にクライアントサイドを見てみよう。 HTMLは非常にシンプルなものなので省略するが、注意点としてはsocket.ioが提供するライブラリを利用する点だ。しかもこのライブラリはサーバーが自動的に生成するため、それをHTMLで読み込む必要がある【12】。socket.io.jsを利用したコードもシンプルなものだ。基本的には、io.Socket でsocket オブジェクトを生成後、socket.connectメソッドで接続する。サーバーに対して送信するにはsocket.sendメソッドを利用する【13】。
【12】
【13】サーバーからの通信はsocket.onメソッドを介して行われ、"connect"は接続、"message"はサーバーからのデータ送信、"disconnect"は切断に対応している
サーバーの
起動
ソースはたったこれだけだ。あとは、サーバーを起動してクライアントで接続してみよう。サーバーを起動するには、terminalでnodeコマンドを実行し、サーバーとなるスクリプトファイルを渡せばよい【14】。起動すれば、上記で記述したログが出力され、続いてsocket.io からサーバーとして起動した旨が出力される。あとは、ウェブブラウザでページにアクセスし、挙動を確認してみよう。クライアント側であるページで接続が確立すれば、HTML に"connected", そして"welcome new user"と文章が出力され、またterminalでも接続があったことが確認できるだろう【15】。
もちろん、チャットとしてメッセージを送信すればそれが別ウィンドウのクライアントでも出力される。
これをAjaxで実現するのはなかなか困難だ。だが、Node.jsとWebSocketを利用すれば、小一時間でこのようなサービスを開発することも可能になった。
このサンプルでは、簡単なチャットの例として紹介した。動作としては、サーバーからの通信があればそれを受け取り、HTMLにP 要素として追加するという単純なものだ。だが、これでもチャットのサービスとしては十分に成り立つだろう。
【14】
【15】
【16】
＞＞目次に戻る
