recompile.net

サンプルアプリケーションをダウンロードし、ZIPを展開したディレクトリで、コマンドラインからmaven2を実行してください。localhostのポート8080で、Jettyが起動します。

% mvn jetty:run

複数のウェブブラウザー（例えば、FirefoxとIE）を立ち上げ、それぞれhttp://localhost:8080へとアクセスします。表示されているページの「click to increment」という個所をクリックすると、カウンターの数値が増えていきます。複数のウェブブラウザー間で、カウンターの数値が同期することを確認してください。

クライアントの実装

クライアント側は、JSPなどを利用せずに、HTMLとJavaScriptで実装します。JavaScriptのライブラリとして、prototype.jsとbehaviour.jsを利用しています。サンプルアプリケーションのsrc/main/webapp/javascripts/counter.jsを参照してください。

ウェブブラウザーは、ページが表示されるとXMLHttpRequestによって、現在のカウンターの値を取得します（initializeメソッド）。リクエストが成功すると、クライアント側カウンターの表示をサーバから取得した値に更新します（updateメソッド）。

var counter = {
    'initialize' : function () {
         new Ajax.Request('/counter', {
            method : 'post', postBody : 'ajax=count&message=', onSuccess : counter.update;
        });
    },
――（中略）――
    'update' : function (req) {
        xml = req.responseXML;
        res = xml.getElementsByTagName("response");
        $('count').innerHTML = (res[0].firstChild.nodeValue);
        counter.poll();
    }
}

値の更新後、クライアントは再びXMLHttpRequestによってサーバへとリクエストを発行します（pollメソッド）。このリクエストに対して、サーバ側はすぐにレスポンスを返さず、サーバ側カウンターの数値が増えるというイベントが発生するまで、クライアントとの接続を保ったままにします。サーバ側カウンターの数値が更新されると、はじめてサーバからクライアントに対してレスポンスが送信され、クライアント側のカウンターが更新（updateメソッド）されます。

    'poll' : function () {
         new Ajax.Request('/counter', {
            method : 'post', postBody : 'ajax=poll&message=', onSuccess : counter.update;
        });
    }

以上が、クライアント側実装でのlong-pollの仕組みです。リクエストを送信し、サーバからのレスポンスを待ち、値の取得と表示の更新のあとで再びリクエストを送信する、という流れをご理解いただけたでしょうか。

さて、このままではクライアントは、いつサーバ側から返ってくるかわからないレスポンスをずっと待ち続けるだけになってしまいます。そこで、long-pollの仕組みとは別に、サーバ側が自分のカウンターの数値を更新し、それをクライアントへ伝える「きっかけ」を用意することにします。

    'increment' : function () {
         new Ajax.Request('/counter', {
            method : 'post', postBody : 'ajax=increment&message=';
        });
    }

このincrementメソッドは、サーバに対して「サーバ側カウンターの値をひとつ増やしてくれ」というリクエストを発行します。このメソッドは、ページの「click to increment」という部分をクリックすると実行されるものです。

このリクエストをうけて、サーバ側アプリケーションは、サーバ側カウンターの数値を増加させ、待機中のままのリクエストに対して、レスポンスを返します。この処理は、long-pollの流れである「リクエスト、待機、レスポンス、再リクエスト」と別の流れだということに注意してください。

後編その２へと続きます。