Chat

最近、Ajaxという技術が流行らしい。


要するに、Webを全部リロードするんじゃなくて、データはXMLでとってくる。んで、画面で更新したいところだけ、JavaScriptでDHTMLする技術のようである。
何が凄いって別にどこも凄いわけじゃないけれど、今までのWebアプリと比べて、データとプレゼンテーションが分かれているってのと、リロードかからないから、さくさく感があるってことのようである。
ということで、練習問題として、チャットのプログラムを作ってみた。
ここで、実際に試すことができる。実際に試すと言っても、どーせ、誰もお客はいないので、一人で2窓して試してください。
コードはこちら
追記10/01/2005 サーバ移転に伴いリンク先が動かなくなりました。現在の最新版はこちらで試せます。
ソースコードの説明。といっても、説明だけ見てもなんのことやらさっぱりだと思うので、コードと見比べながら読んでください。
chat.cgiはサーバー側のコード。Perl。
入力は、
FROM:発言者名
MESSAGE:発言内容
COUNT:何行目からの発言を返す
の3つだけ。
MESSAGEが空じゃなかったら、chat.xmlに内容を書き出す。
あとは、COUNT行以降の発言を、標準出力に流すだけ。
COUNTが0のときは現在の最後の行のCOUNTだけ返ってくる。
chat.xmlはサーバー側のデータ。
XMLもどき。chat.cgiで頭と尻をつけてXMLにする。
chat.htmはクライアント側のHTML+JavaScript。
HTMLのオブジェクトは
dispMessage: textarea 全員の発言内容がここに出力される
chatForm: form 発言のためのフォームGUI
chatFrom: input text 発言者名
chatMessage: input text 発言する文字列
submit: submit 発言ボタン
formのonsubmitをreturn false;としてつぶしてある。
代わりに、発言ボタンのonclickにjavascript:postForm();として、JavaScriptを呼び出す。
function postForm()では、先のフォームからデータを回収。&変数名=値でつないだ文字列として、sendDataを呼び出す。その際に、chat.cgiを指定する。
transcatedCountには、今まで表示した内容の行番号が書かれている。chat.cgiではこれより後ろの文字列が返されるので、それを追加表示すればOKというわけ。
function sendData()では、XMLHTTPオブジェクトを作って、適当にプロパティを設定して、send。onreadystatechangeのハンドラには、XML_OnReadyStateChangeを指定してある。
function XML_OnReadyStateChange()では、sendData()した後に返されたXMLデータを画面に反映している。
Commentノードから各発言内容を取り出して、dispMessageに追加
Countノードから最後尾の行番号を取得
function reloadMessage()では、COUNTに現在の行番号を指定して、sendData()。誰かが発言してたら、その行が増えてるので、その内容が返ってくる。sendDataより後ろは同じ流れ。
reloadMessage()はwindow.onloadから呼ばれ、その後、setTimeoutで1000msecを指定している。ちと細かいかも。
function createXMLHTTP()では、XMLHTTPオブジェクトを作成している。
IEでは、new ActiveXObject, FireFoxでは、new XMLHttpRequest()で生成できる。細かいことはgoogle教授に聞くと詳しく出ている。まぁ微妙に互換性が無いらしい。
てな感じでできている。
本当にテストプログラム状態。
IEとFireFoxで動作確認済み。
今回、つっかえたところ、まだよくわからんところ。
submit周りで、FireFoxとIEとでどうも動きが違うみたい。
いろいろぐちゃぐちゃやってたら、現在の形に落ち着いた。なんでちゃんと動いてるのか(なんでちゃんと動いてなかったのか)良くわかってない。
XMLDOMの使い方をすっかり忘れてて、ノードの中に#textノードがあって、そのnodeValueが文字列になっているのを忘れてたこと。一生懸命ノードのnodeValueを見て、値が入ってな~い。どないなってんねん。って怒り狂ってた。
XMLはUTF-8がええらしいけど、同じ文字を2つ並べて発言すると、なぜか文字が化けたので、現在、SHIFT-JIS。でも、chat.htmはUTF-8。ちゃんぽんになってるのに動いてるところがよくわからん。
今、わかってる、直したいところ。やりたいこと。
IE上で、発言すると、エディットボックスからフォーカスが抜ける。いちいちマウスクリックしないと連続して発言できない。うっとうしい。
textareaに結果を出力してるが、スクロールが必要な状態になると、いちいち一番上に戻る。勝手にスクロールするようにしなければ。
色の指定
名前をちょろちょろ変えられないように、入室時に指定して以後変更できないようにする。
留守番ロボットの接続
スタイルシートを使って見栄えをもうちょっとまともに。
現在入室しているメンバー一覧
などなど
まぁ基本構造はできた。とってもシンプルなので今後の参考になると思う。
こいつを元に拡張していくか、こいつを参考に、さらから書くかはわからんけど、留守番ロボットが繋がるまでには、もうちょっとまともなチャットにしたいなぁ。
というか、Webでこの手の、さっぱりしたコードを探したんだけど、なかなか見つからなくて。。。
既に高機能になってるコードばっかり見つかるのよねぇ。

「Chat」への3件のフィードバック

  1. > IEとFireFoxで動作確認済み。
    ajaxって、クライアント選ぶのよね。
    Operaも8からしかXMLHttpRequestをサポートしていないし。
    Webって結局クライアントの制約でフル機能が使えないのよね、CSSにしても。
    > submit周りで、FireFoxとIEとでどうも動きが違うみたい。
    > いろいろぐちゃぐちゃやってたら、現在の形に落ち着いた。> なんでちゃんと動いてるのか(なんでちゃんと動いてなかっ> たのか)良くわかってない。
    個人的には、なぜ、Formが必要なのか疑問です。
    > XMLDOMの使い方をすっかり忘れてて、ノードの中に#textノードがあって、そのnodeValueが文字列になっているのを忘れてたこと。一生懸命ノードのnodeValueを見て、値が入ってな~い。どないなってんねん。って怒り狂ってた。
    確かに、昔のMSXMLは、Textを使っていなかった。

  2. > 個人的には、なぜ、Formが必要なのか疑問です。
    なぜかといえば、文字入力してEnterで、発言ボタンを押したかったから。Form無しで、デフォルトボタンの作り方がわからんかったのよ。

  3. >というか、Webでこの手の、さっぱりしたコードを探したんだ>けど、なかなか見つからなくて。。。
    >既に高機能になってるコードばっかり見つかるのよねぇ。
    すごくわかりやすいです。
    参考になりました。
    有難うございました。

コメントを残す