prototype.jsでAJAXなチャット

コンピュータ

を作ってみた。
http://asougi.mine.nu/chat/www/
ソース：http://asougi.mine.nu/ajax-chat.tgz
けっこう楽しかった。

prototype.jsのAjax.periodicalUpdaterを使えば簡単にAJAXで自動更新するチャットが作れる。
作りとしては

  • indexアクション：チャットの画面を表示する。
  • logアクション：AJAXリクエストを受け取って、チャットのログをHTMLデータにして返す。
  • writeアクション：DBにデータを書き込む（ビュースクリプトはindexを使用する）。

って感じで、JavaScriptで

function main() {
    var updater = false;
    var started = false;

    updater = new Ajax.PeriodicalUpdater(
        {
            success : 'log',				←成功時に書き込む対象のタグ
            failure : 'failure'				←失敗時に書き込む対象のタグ
        },
        '/chat/www/index.php?action_log=1',	←これが上記logアクションのアドレス
        {
            decay : 1,
            frequency : 0.5,				←更新頻度
            method : 'get',
            asynchronous : true,
        }
    );
}

こんな感じの関数を定義する。後はbodyタグに

<body onLoad="main()">

と書いておくとOK。いやぁ楽だ。僕にもAJAX出来たよ！　prototype.jsはJSのライブラリ単品なんでEthnaにも組み込みやすいっすね。