Ajax+Javaアーキテクチャ構築記第四回

2006-11-21 Ajax+Javaアーキテクチャ構築記第四回

■

さてさて、ちょっと間が空いてしまいましたが、今回は前回の予告どおりCometdについてもう少し深く掘り下げて見ていきたいと思います。

本題に入る前に

前回お話したとおり、CometdはCometの実装です。

Cometという考え方のどこに価値があるかというと、やはりリアルタイム性ですよね。インターネットを挟んだ、リモートで発生したイベントが随時検知されてブラウザの表示がどんどん更新されていく、そういう機能が重要な場合に採用したいテクノロジなわけです。

で、ここで一つ考えたいのが、そういうリアルタイム性を求められるWebアプリケーションにもいくつかパターンがあるということ。僕が考えるのは以下の二つです。

情報共有型・・・チャットとか、コンテンツ共有アプリとか、「誰か」が行った変更が自分の手元にも届くというタイプ。
情報配信型・・・株価チャートとか、為替価格ボードとか、サーバからクライアントに対して一方的に、同一の情報を配信するというタイプ。

Cometdは、このどちらもサポートしています。スバラシイ。

このどちらを取り扱うのかで多少プログラミングスタイルが変わります。

で、今回は情報配信型のアプリケーション作成を題材に、Cometdの扱い方をしっかり学んでいきたいと思います。

前回でビルドと、チャットデモを動作させるところまで学びましたので、今回は自分でCometdのアプリケーションを作成するためにはどうしていけば良いかを学びます。

Cometdのセットアップ

まずはサーバ側のセットアップ方法から。この部分に関しては、情報共有型でも情報配信型でも変わりません

Cometd本体はCometdServletというサーブレットなので、web.xmlにサーブレットの登録をします。

  <!-- サーブレットの登録 -->
  <servlet>
    <servlet-name>cometd</servlet-name>
    <servlet-class>org.mortbay.cometd.CometdServlet</servlet-class>
    <init-param>
      <param-name>filters</param-name>
      <param-value>/WEB-INF/filters.json</param-value>
    </init-param>
    <init-param>
      <param-name>timeout</param-name>
      <param-value>15000</param-value>
    </init-param>
    <init-param>
      <param-name>multi-timeout</param-name>
      <param-value>1500</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <!-- サーブレットとURLのマッピング指定 -->
  <servlet-mapping>
    <servlet-name>cometd</servlet-name>
    <url-pattern>/cometd/*</url-pattern>
  </servlet-mapping>

あまり重要なファクターではないですが、サーブレットの初期化パラメータ(init-param)で指定されている値については以下。

パラメータ名	説明
filters	クライアントに返却するJSONデータに対するフィルタ
timeout	ポーリングのタイムアウト。この数値を大きくするほどネットワークのトラフィックが減ります
multi-timeout	同じブラウザから来たリクエストを複数ポーリングしているときに使用するタイムアウト

filtersパラメータに対しては、Cometdが生成するJSONデータに対して文字列フィルタリングをかける事が可能です。Cometdによる実装には以下のようなものがあります。

フィルタのクラス名	説明
org.mortbay.cometd.filter.NoMarkupFilter	"<"と">"を全て"<"と">"に変換します。
org.mortbay.cometd.filter.NoScriptsFilter	<script>タグを全て<span>タグに置換します。
org.mortbay.cometd.filter.RegexFilter	初期化ファイルで指定された正規表現にマッチする文字列を全て置き換えます。

現状のcometdでは、filters.jsonによってRegexFilterが指定されており、MicrosoftをMicro$oftに変換したり、Tomcatと言う文字列が入っていると全て空文字列に変換したり(笑)と、なかなか強烈です。

以上の設定を正しく行えば、もうCometdによるPush配信は準備完了です。

あとは、Cometdが提供するJavaScript 関数を用いてPush配信を購読(subscribe)するようプログラミングすればOKです。

Cometdが提供するJavaScript API

Cometdが提供するJavaScript 関数のうち、今回対象としている情報配信型のAjax アプリケーションに必要なものは以下の通りです。

/**
 * cometdの初期化を行います。
 * @param message 現在購読中のクライアントに配信するメッセージ。空でよい
 * @param root cometdサーブレットのURLを指定。
 *  省略時は、Dojoフレームワークの初期化パラメータ"cometdRoot"で指定された値が使用される
 * @param additionalParameter さらに追加で指定するリクエストパラメータ。省略可能
 */
function init(message,root,additionalParameter)

/**
 * 指定したチャネルのPush配信データ購読を開始する
 * @param channel 購読するチャネル(後述) dojo.event.topic.subscribe()関数の第一引数となる
 * @param isGlobal チャネルで指定したチャネルIDがグローバルかどうか。
 *  trueを指定した場合、チャネルIDは"/cometd" + channelという文字列になる。
 * @param srcObj funcNameで指定された関数が所属するオブジェクト。nullを指定するとwindowオブジェクトとなる。
 * @param funcName 配信されたメッセージを受け取るハンドラとなる関数の名称を文字列で指定する。
 */
function subscribe(channel,isGlobal,srcObj,funcName)

今回はこの二つの関数を紹介するに留めておきます。

で、今回の重要トピックであるチャネルと言う言葉が出てきましたね。これについては以下に解説します。

チャネルとクライアント

チャネルと言う言葉がすでに出てきていますが、これが配信対象となるクライアントの集合を表す概念です。

チャネルはスラッシュ("/")で始まる文字列で構成されることが推奨されており、その名前は任意に決めることができます。(例えば、cometd-demoに含まれるチャットデモでは"/chat/demo"という文字列が使用されています)。つまり、一つのチャネルの下に複数のクライアントが紐づいているイメージ。あんまり良い図ではないですが以下のような感じ。

Channel(/chat/demo)
    →Client(clientId=XXXX)
    →Client(clientId=YYYY)
Channel(/another)
    →Client(clientId=XXXX)
    →Client(clientId=ZZZZ)

クライアントは複数のチャネルに同時に所属することができます(上の絵では、clientId=XXXXのクライアント)。また、クライアントIDというクライアントを一意に特定する文字列が内部的に使用されますが、それは全てCometdのAPIが隠蔽してくれますので普通は意識する必要がありません。

では、ここまでの知識で十分Cometdを扱えますので、今回の締めとして、ランダムな数値をPush配信し、ブラウザ上でそれをリアルタイムに表示するアプリケーションを作成してみます。

では、ランダムな数値(株価みたいな。)をPush配信するアプリケーションを作成します。

CometdServletのセットアップは終わっているという前提で、今回作成するアプリケーションの全体像は以下の通りです。

Push配信チャネルのID・・・/price
ランダムな価格を生成してチャネルにデータを配信するサーブレット・・・example.PriceServlet
配信された価格を表示するHTML・・・price.html

つまり、PriceServletはCometdServletよりも後に起動し、ランダムな価格を決定した後、それをチャネル「/price」に配信します。それを表示するprice.htmlは前述したCometdのJavaScript APIを使用して配信された価格を受け取り、画面を再描画します。

ではまずPriceServletのコードから。

import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;

import org.mortbay.cometd.Bayeux;
import org.mortbay.cometd.Channel;
import org.mortbay.cometd.CometdServlet;

public class PricePublisherServlet extends HttpServlet {
    // チャネルID
    public static String PRICE_CHANNEL_ID = "/price";
    private Channel priceChannel;
    
    @Override
    public void init() throws ServletException {
        super.init();
        // Bayeuxプロトコルオブジェクトを取得・・・①
        Bayeux bayeux = (Bayeux)getServletContext().getAttribute(CometdServlet.ORG_MORTBAY_BAYEUX);
        // チャネルの生成・・・②
        priceChannel = bayeux.newChannel(PRICE_CHANNEL_ID);
        
        // 配信スレッドスタート
        Thread pricePublishThread = new Thread(new PricePublisher());
        pricePublishThread.start();
    }
 
    private final class PricePublisher implements Runnable {
        private int currentPrice = 100;
        
        public void run() {
            // ランダムで価格を決定し、それをチャネルに配信(publish)する
            while (true) {
            	// 株価が急激に変化しすぎないよう上限、下限を設ける
                Random r = new Random();
                int price = r.nextInt((int) (currentPrice * 200));
                int priceMinLimit = (int) (currentPrice * 0.999);
                int priceMaxLimit = (int) (currentPrice * 1.01);
                if (priceMinLimit > price) {
                    price = priceMinLimit;
                } else if (priceMaxLimit < price) {
                    price = priceMaxLimit;
                }
                // チャネルへのpublish・・・③
                priceChannel.publish(new Integer(price), null);
                currentPrice = price;
                try {
                    // 1秒間寝る
                    Thread.sleep(1000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

コード自体は非常に判りやすいかと思います。

いくつかポイントがあるので、解説します。

①Bayeuxプロトコル オブジェクトの取得

Cometdは、Push配信を実現するために、簡単な自前のプロトコルを使っています。そのプロトコルを用いてブラウザとサーバ間でやり取りするわけですね。

Bayeuxプロトコルは、CometdServletが初期化時にServletContext内にCometdServlet.ORG_MORTBAY_BAYEUXという文字列定数をキーとして格納してくれますので、取得する場合はServletContext#getAttribute()を用います。

②チャネルの生成

①で取得したBayeuxプロトコルオブジェクトのメソッドnewChannel(String channelId)を使用することで新しくチャネルを生成することができます。生成するのではなく、すでに存在するチャネルを取得する場合はBayeux#getChannel(String channelId)というメソッドを使用します。

③チャネルへのデータ配信

Channel#publish(Object data, Client from)を使用すればチャネルへのデータ配信を行うことが可能です。非常に簡単ですね。publishメソッドの第二引数であるClient fromは、情報共有型のアプリケーションで、データの配信元となったクライアントを渡します。今回はサーバから一方的にデータを配信するだけですので、nullでOKです。

作った価格配信サーブレットを忘れずにweb.xmlで登録。

<servlet>
    <servlet-name>pricePublisher</servlet-name>
    <servlet-class>pricepanel.PricePublisherServlet</servlet-class>
    <load-on-startup>2</load-on-startup>
</servlet>

load-on-startupを使用して、CometdServletよりも後にサーブレットが起動するよう調整しておくのを忘れないこと！

価格配信側のサーブレットは完成しましたので、あとはそれを受けとって画面に表示するHTMLを作成すれば完成です。

・・・の前に。Cometdが提供するJavaScript APIですが、現時点では、リリースモジュール本体ではなく、デモアプリ(cometd-demo)に含まれています。

おいおい・・・これってもしかして、JavaScript APIはCometdが責任もってリリースするものではないって事?

まあ、そんな事はないでしょうが・・・ということで以下のHTMLを書く際には、Subversionでチェックアウトした、cometd-demoモジュール内のsrc/main/webapp/dojoディレクトリを自分のアプリケーション内にコピーして使用してください。

で、price.htmlのソースコードは以下。

<html>
<head>
<!-- cometd-demoにある -->
<script type="text/javascript" src="dojo/dojo.js"></script>
<script type="text/javascript">

// 初期化・・・①
cometd.init({}, "/pricepanel/cometd");

var checkCometdInitializedTimer = setInterval(checkCometdInitialized, 200);

// cometdの初期化が完了するまで待機した後、cometd.subscribeを行う・・・②
function checkCometdInitialized() {
	if (!cometd.initialized) {
		return;
	}
	clearInterval(checkCometdInitializedTimer);
	// チャネル「/price」を購読し、ハンドラに"pricePublished"を指定・・・③
	cometd.subscribe("/price", false, window, "pricePublished");
}

// 価格が配信されたら画面を更新する
function pricePublished(message) {・・・④
	var pricePanel = document.getElementById('pricePanel');
	pricePanel.innerHTML = message.data; // divタグの内容を新しい価格で更新
}
</script>
</head>

<body>
<div id="pricePanel" style="width: 130px; height: 60px; font-weight: bold; font-size: 50px;">
</div>
</body>
</html>

以下、解説。

①cometd.init関数によるCometdの初期化

初期化はcometd.init関数で行います。ここでは第一引数は空のオブジェクト、第二引数にCometdServletのパスを指定します。

②cometd.init関数の呼び出しが成功するまで待機

cometd.initの呼び出しが成功してサーバからレスポンスが戻るまで待機する必要があります。レスポンスが戻って初期化が成功すると変数cometd.initializedがtrueとなります。

③cometd.subscribeによるPush配信購読

cometd.subscribeの呼び出しです。チャネルに/price、ハンドラ関数にpricePublishedを指定しています。

④ハンドラ関数の登録

Push配信を受け取った際呼び出されるハンドラ関数で、引数messageを取ります。messageは以下のような構造を持つJSON オブジェクトです。この構造を見れば、配信データはmessage.dataでアクセスできることがわかるでしょう。

配信データの構造
[
	// ヘッダ部
    {
        "connectionId":"クライアント/サーバ間の接続を示すユニークなID",
        "timestamp":"メッセージ配信時のタイムスタンプ",
        "error":エラーだったかどうか(true/false),
        "successful":正常終了だったかどうか(true/false),
        "channel":"接続時のチャネル"
    },
    // データ部
    {
        "data":チャネルに配信されたデータ,
        "timestamp":"メッセージ配信時のタイムスタンプ",
        "channel":"配信データのチャネル",
        "id":"メッセージに振られたID"
    }
]

実際にこのアプリケーションを動かすと、絶え間なく新しい価格で画面が更新されます。

ブラウザを複数立ち上げてアクセスすると全ての画面がほぼ同時に更新されます。いやー、ちょっと感動しますね。

今回解説したアプリケーションを絵にすると↓のような感じになります。チャネルに配信したデータがクライアントに届くイメージができましたか？