AjaxChat - yanbe.log

JSFとAjaxを組み合わせて使ってみるテスト。
結論としては、問題なく両立できるようです。すべてのJSFタグにIDを指定すると、htmlとしてレンダリングされるときのid/name両属性がJSFのタグの階層構造を元に一意に予測できるのがポイントですかね。(実際':'で上下の階層を分けてるだけですし)
タイトルのリンクから実際に動くAjaxChatプログラムにジャンプできます。

解説

普通のチャットとどう違うのかといいますと、Ajaxアプローチにより非同期に通信をすることで、チャットに参加している他のメンバーがキーボードに打ち込んでいる途中の内容がブラウザ上にリアルタイムに表示されます（draft表示)。
JSFはどこに使っているのかといいますと、

クライアントがチャットのURLにアクセスしたときに、サーバーがクライアントに対してユニークなユーザー名を割り振る処理
Ajaxで使用するXMLHttpRequest関数で取得する、サーバーのXMLデータの生成処理

以上の箇所で使っています。
Requestの種類としては、ユーザの操作の状況によって

他のメンバーの入力内容を更新する(refresh)
自分がキーボードに打ち込んでいる途中の内容の送信(draft)
発言(statement) →これが通常のチャットの発言にあたります
表示名の変更(rename)

以上の4種類があります。サーバー・クライアント間のデータのやり取りはすべてXML形式で行うのですが、結構な頻度でサーバーにアクセスするので、データはファイルとして保存したりはせず、全てオンメモリで処理するようになっています。

また、このJSF+Ajaxなプログラムで2バイト文字に対応するには

javascriptでのフォームの内容の取得
パラメータ(フォームの内容)をurlエンコードした後、Requestとしてサーバーに送信
サーバーで既存のデータと統合し、XMLデータ化する
XMLデータをResponseとしてクライアントに返す
クライアント側で、受け取ったXMLデータを展開し、draftやログとしてhtmlに流し込む

という一連の過程で文字化けが発生しないように配慮する必要があるのですが、これには結構はまりました。しかし、この過程で2バイト文字を文字化けすることなくエンコード・デコードするための、ソースコード各所での正しい文字コード宣言の組み合わせを見つけることが出来ました。

実装に興味がある方は参考にどうぞ→eclipseのプロジェクト warファイル

実行環境

Windows2000 SP4
j2sdk1.4.2_7
Tomcat 5.0.28
MyFaces 1.0.8
Internet Explorer 6.0 SP1

開発環境

eclipse 3.0.1
sysdeo tomcat plugin
Eclipse HTML Editor plugin
FacesIDE plugin
(eclipseのプロジェクトを開くには、これらのプラグインをインストールする必要があります)

参考リンク

星暁雄　×　Java: AjaxとJSFの関係は？

追記

JSFでXMLを出力するときに、デフォルトの設定だと必ずレンダリングされてしまうJavaScriptのgetScrolling()関数が邪魔だったのですが、これのレンダリングをとめる方法が分かりました。

web.xmlのorg.apache.myfaces.AUTO_SCROLLをfalseに設定するとレンダリングをとめられます。ちなみにこのgetScrolling()関数はスクロールバーの位置を保持する目的で存在するらしいです。

マニュアルはちゃんと読まないとダメですね。

参考リンク

ひがやすをBlog::(S2JSF)1.0.1で画面遷移しなくなったら

S2JSFもいいなぁ。素のJSFもJSPと比べたらいい出来だとは思うけど、ちょっとした変更の確認をしたいだけなのに、いちいち再コンパイルやらコンテキストのリロードやらが面倒っす。