Jettyで始めるWebSocket超入門

第5回 クライアント側の実装

この記事を読むのに必要な時間:およそ 4 分

今回は,WebSocket APIについて解説と,WebSocketを使ったチャットアプリケーションのクライアント側の実装を行ないます。

WebSocketオブジェクト

ブラウザのJavaScriptからWebSocketを利用するために,WebSocket APIがW3Cで策定中です。執筆時点のブラウザ(Safari及びChrome)は,最新のドラフトEditor's Draft 27 July 2010に対応していません。ここでは,現行のブラウザが対応しているWebSocketの仕様を解説した後,最新の仕様について説明します。

インスタンス化

WebSocketはインスタンス時,第一引数に「ws://」または「wss://」で始まる文字列で接続先を指定します。また,省略可能な第二引数にはサブプロトコルを指定できます。サブプロトコルについては後述します。

new WebSocket(url)
new WebSocket(url,protocol)

イベント登録

WebSocketは以下の4つのイベントハンドラが定義されています。

onopenWebSocketの接続が完了した時に呼ばれます(イベントタイプ:"open")
oncloseWebSocketが切断された時に呼ばれます(イベントタイプ:"close")
onmessage接続先からメッセージを受け取った時に呼ばれます(イベントタイプ:"message")
onerrorエラー発生した時に呼ばれます(イベントタイプ:"error")

メソッド

定義されているWebSocketのメソッドは以下の2つです。

send(message)messageを接続先に送信します
close()WebSocketの接続を切断します。意図的に切断する時だけでなく,ウィンドウを閉じるとき,画面を遷移する時にも切断処理を行なう必要があります

ステータス

WebSocketの接続状態を調べる事ができます。値こそ違いますが,XHR※1のreadyStateプロパティと同様のものです。

readyState接続のステータスです。0~2の値をとります。読み取り専用です

WebSocketクラスに定数が準備されています。ステータスを確認する際には必ず定数を使うようにしてください。

CONNECTING接続開始の処理中を示す定数です(= 0)
OPEN接続済を示す定数です(= 1)
CLOSED切断済を表す定数です(= 2)
※1
XHRについては,連載第1回を参照してください。

その他のプロパティ

その他に以下のプロパティがあります。

URL接続先を示すプロパティです。読み取り専用です
bufferedAmountsendメソッドによって送信が指定されてデータは,実際に送信されるまで待ち行列に追加されます。bufferedAmountは待ち行列のバイト数を返します。読み取り専用です

サブプロトコル

サブプロトコルは,開発者がWebSocketプロトコル上で新しいプロトコルを定義する際に使用します。例えば,チャットとファイル転送でWebSocketを使い分けたい時等が考えられます。

Jettyでは,⁠WebSocketServlet」インターフェイスの実装の「doWebSocketConnect」メソッドにサブプロトコル名が渡されます。受け取ったサブプロトコル名により,使用するWebSocketの実装を切り換えることが可能になります。

  protected WebSocket doWebSocketConnect(HttpServletRequest request,
      String protocol) {
    if(protocol=="file"){
      return new FileWebSocket();
    }else{
      return new ChatWebSocket();
    }
  }

今の仕様では,複数のサブプロトコルを同時に使うことは想定されておらず,WebSocketのインスタンス変数を複数準備する必要があるようです。

最新ドラフト

最新のドラフトでは以下のように修正されています。

サブプロトコルの複数指定

コンストラクタがひとつ増えました。第二引数のprotocolsは文字列の配列です。複数のサブプロトコルを複数指定できます。WebSocketプロトコルの仕様にはまだ反映されていないようですが,WebSocket APIの仕様を読む限りでは,接続元が指定した複数のサブプロトコルから,接続先がどれかひとつを選択するようです。

new WebSocket(url,protocols)

ステータス

WebSocketの接続状態を示すreadStateの仕様が変更になりました。

readyState接続のステータスの範囲が0~3に変更されました。読み取り専用です

定数に「CLOSING」が増えています。それに伴い「CLOSED」の値が変更になっています。ドラフトの版の違いによる不具合を避けるためにも,ステータスを確認する際には必ず定数を使うようにしてください。

CONNECTING接続開始の処理中を示す定数です(= 0)
OPEN接続済を示す定数です(= 1)
CLOSING切断中を表す定数です(= 2)
CLOSED切断済を表す定数です(= 3)

プロパティ

protocolサブプロトコル名を返します。インスタンス化の際に,サーバが選択したサブプロトコルを取得するために準備されたと思われます。読み取り専用です
url接続先を示すプロパティが小文字に変更になりました。読み取り専用です

著者プロフィール

金城雄(きんじょうゆう)

NTTアドバンステクノロジ株式会社 アプリケーションソリューション事業本部 情報機器テクノロジセンタ所属。

Webテクノロジに関心を寄せるJavaScript好きのプログラマ。

コメント

コメントの記入