前回は、Web Storage と Indexed Database といったストレージについて解説した。ここでは、効率的な双方向通信が実現できる技術 WebSocket について解説する。
１ WebSocket概要
WebSocketとは
WebSocketはサーバとクライアントの間で効率的な双方向通信を実現するための仕組みである。WebSocketは非常にシンプルなAPIで構成されている。1本のHTTP接続上で双方向のメッセージを自由やりとりできる。
既存の通信技術
- XMLHttpRequest（XHR）：クライアントからサーバ方向への非同期通信は、XHRの登場によって実現した。ただしクロスオリジン通信ができない
- Server-Sent Events：サーバからクライアント方向への通信（プッシュ通信）技術として仕様検討が進められている。仕様に従ったフォーマットでサーバサイドから通常のHTTPレスポンスを返すだけでプッシュ通知が実現できる
- AJAX（ポーリング）：送信要求の有無をサーバに逐一確認する手法
- Comet（ロングポーリング）：サーバ側から本当に必要なタイミングでレスポンスを返せるように考えられた手法の総称。任意のタイミングでサーバからレスポンスを返せるようにする
- Comet（ストリーミング）：クライアントからの最初のリクエストでコネクションを張り、コネクションを維持したままでサーバからクライアントへレスポンスを返し続けるもの
WebSocketの仕様
WebSocketの仕様策定は現在進行形で進められている。WebSocketの仕様はクライアントで利用するJavaScriptAPIに関する仕様と、サーバとの通信に関するプロトコル仕様に分かれている。WebSocketのプロトコル仕様についてはIETFで策定が進められている
WebSocketの動作
WebSocketで双方向通信を開始するには、まずサーバとのコネクションを確立する必要がある。コネクション確立のリクエストはクライアント側からHTTPで送信される。サーバ側が接続元のオリジンやプロトコルを確認して接続許可のレスポンスを送信すると、ブラウザはコネクションをWebSocketにアップグレードする。この一連の流れをハンドシェイクと呼ぶ。
２ 基本操作
コネクションの確立
コネクションを確立するには、まずクライアント側でWebSocketクラスのコンストラクタ呼び出しを行いWebSocketインスタンスを生成する。コンストラクタ呼び出しの第1引数には接続するWebSocketサーバのURL、第2引数にはサブプロトコル名を指定する。WebSocketのプロトコルには「ws://」または「wss://」が選択できる。第2引数のサブプロトコル名は省略可能である。コンストラクタ呼び出しを行うと、内部でハンドシェイクの処理が実行される。
メッセージの送受信
コネクションが確立するとメッセージの送受信が可能な状態になる。メッセージをサーバに送信するにはsendメソッドの引数に送信したいデータを渡す。メッセージをサーバから受信するにはmessageイベントを捕捉する。
コネクションの切断
クライアント側から明示的にコネクションを切断するにはcloseメソッドを呼び出す。コネクションが切断されるとcloseイベントが発火するので、イベントハンドラを設定してクローズ後に必要な処理を実装する。
コネクションの状態確認
コネクションの状態を確認するには、WebSocketインスタンスのreadStateプロパティを参照する。readyStateが取りうる値はWebSocketクラスのプロパティとして定義されている。
バイナリデータの送受信
WebSocketで送受信が可能なフォーマットは文字列、Blob、ArrayBufferの3つである。BlobとArrayBufferはJavaScriptでバイナリデータを扱うためのフォーマットである。WebSocketでバイナリデータを送信する方法は、BlobやArrayBufferをそのままsendメソッドに指定するだけである。
WebSocketインスタンスのプロパティ一覧
WebSocketクラスのインスタンスが持つプロパティには、URL、protocol、readyStateなどがある。
３ WebSocket実践
実際にチャットアプリケーションを作成しながらWebSocketの使い方を確認していく。
Node.jsのインストール
Node.jsはオープンソースの高速なJavaScriptエンジンV8上で動く、今非常に勢いのあるサーバサイドJavaScriptの実装の1つである。ここではNode.jsのバージョン管理ツールnaveを利用したインストール方法を述べる。次にnpmをインストールする。npmはNode.js用のパッケージマネージャで、npmを利用してNode.js向けのライブラリを手軽にインストールできる。
サーバサイドの実装
WebSocketサーバはメッセージを受け取ると、何らかの処理をした後、接続先にメッセージを返す。このとき一般的なWebSocketアプリケーションの返信先は、大きく以下の3パターンに分類される。
- メッセージ送信元にデータを返信する
- メッセージをすべての人にブロードキャストする
- メッセージを条件に該当する人にだけブロードキャストする
クライアントサイドの実装
クライアントサイドの実装例は、テキストボックスの文字列をサーバに送信する処理と、サーバから受信したデータを表示する処理である。WebSocketコンストラクタにはWebSocketサーバのURLを指定する。
クライアントサイドの実装2
このチャットにユーザ名やコメントのスタイルを自由に設定できる機能を追加する。また会話相手のタイピング中ステータスを可視化する機能も追加する。サーバサイドにロジックの追加をせずに機能を追加できる。
最後に
WebSocketはサーバとクライアントの間で効率的な双方向通信を実現するための仕組みである。WebSocketを利用すると、1本のHTTP接続上で双方向のメッセージを自由やりとりできる。WebSocketの登場によってより速く、よりシンプルなWebアプリケーションの開発が可能となった。
次回は、マルチスレッドによってユーザビリティを向上できる Web Workersについて解説する。
 |
