八角研究所 : チャット作成で学ぶWebリモーティング（7）

チャット作成で学ぶWebリモーティング（7） - Spring2のカスタムスコープ

タグ: Ajax DWR Java javascript Spring

どうも皆さん、こんにちは。白石です。

今回はWebリモーティングに関する連載の第七回目です。これまでは、URLにアクセスすると単一のチャットにアクセスできる、と言う構成でしたが、今回は複数の「チャットルーム」を切り替えられるようにしたいと思います。しかも、既存のソースコードにまったく手を入れることなく実現したいと思います。

今回の記事の目標

今回の記事の目的は、本来の「リモーティング」という趣旨からは少し外れて、Spring2から利用可能になった高度な機能「カスタムスコープ」の利用方法を説明することが主眼になります。カスタムスコープについては、実践的な日本語記事がまだあまり登場していないようですので、説明の価値がそこそこあるのではないか、と思っています。

複数の「チャットルーム」を切り替えられるようになったチャットアプリ。左上のセレクトボックスを切り替えると、対応するチャットルームに切り替わる。チャットルームは「Java」「.NET」「Ruby」「PHP」のどれかを選択できる。

ページの表示方法を検討する

では、既存のソースコードに手を入れることなく複数のチャットルームを実現する方法を具体的に考えてみましょう。

方法はいくつもあると思いますが、できるだけ単純な解決策を取りたいと思い、まずは「チャットルームごとに別のURLとする」という方針を決定しました。つまり、「http://…/chat/java」や「http://…/chat/ruby」のように、URLが異なればチャットルームが異なるというものです。

そうなると、セレクトボックスでチャットルームを切り替えられるようにするには、HTMLのフレームを使用すると簡単にできそうです。今回はIFrameを用いて、src属性を変更することによりチャットルームが切り替わるようにします。

ただ、URL毎にHTMLファイルを作っておくのは愚の骨頂です。チャットルームのレイアウトは全て同じなのですから。と言うことで、「/chat/java」や「/chat/ruby」のように、「/chat/で始まるパスは全て同じJSPを参照する」ようにしたいと思います。そのためには、チャットルームをJSP (つまりサーブレット) とし、web.xml上でサーブレットのurl-patternに「/chat/*」を指定するだけで実現できそうです。

まずは、ここまでの説明を実践してみましょう。

チャットルームを切り替え可能な親ページの作成

個々のチャットルームはIFrameで表示し、セレクトボックスでURLを切り替える、と言う方針で決定しましたので、以下のようなページ (chatFrame.html) を作成しました。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"></meta>
  <link rel="stylesheet" type="text/css" href="chat.css"></link>
  <script type="text/javascript">
    function changeRoom(select) {
      var roomId = select.options[select.selectedIndex].value;
      if (roomId == "") {
        return;
      }
      // IFrameのソースを変更
      document.getElementById("chat").src = "chat/" + roomId;
    }
  </script>
</head>
<body>
  <h1>AJAXチャット</h1>
  チャットルーム:
  <select onchange="changeRoom(this)">
    <option value=""></option>
    <option value="java">Java</option>
    <option value="dotnet">.NET</option>
    <option value="ruby">Ruby</option>
    <option value="php">PHP</option>
  </select><br/>
  <iframe id="chat" style="border-width: 0px" width="660" height="400"></iframe>
</body>
</html>

selectタグのonchange属性を使用し、IFrameのsrc属性を切り替えています。そのURLは「chat/xxx」となります。

チャットルーム (chat.jsp) の作成とweb.xmlの設定

チャットルームは、これまで使用していたチャットのUI (chat.html) を少し修正しただけです。JavaScriptコードなどは全てそのままに、ページのヘッダを消しただけ (親ページで表示するので) ですので、ソースコードの掲載は省略します。

修正したファイルをchat.jspとして保存し、web.xmlで「/chat/で始まるURLは、chat.jspがリクエストの処理を行う」よう設定を行います。

<servlet>
  <servlet-name>/chat.jsp</servlet-name>
  <jsp-file>/chat.jsp</jsp-file>
</servlet>

…(略)…

<servlet-mapping>
  <servlet-name>/chat.jsp</servlet-name>
  <url-pattern>/chat/*</url-pattern>
</servlet-mapping>