JavaScriptで差分リロードなチャット

3年と少し前から作っているチャットのリファクタリングをしています。
http://ma.la/mirrorman/wiki.cgi/%e5%8b%95%e7%9a%84%e3%83%ad%e3%83%bc%e3%83%89
ここに書いてあるチャットのことで、当時はNN4でも動くように、けっこう苦労した覚えがあります。

フレームを使わないスタイルシートでのレイアウトへ変更、
オブジェクト指向化、イベント定義を外部記述へ変更など、大幅に直しています。
ベースの部分は3年前からほとんど変化ありません。
IFRAMEで通信しているので、Ajaxとは違うと思いますが、XMLHTTPを使わなくても昔から動的ロードは出来たよ、ということで。

最近はDHTMLを使ったチャットも多くなっているので、
目新しくはなくなってしまっているかもしれません。
まだ何かと中途半端ですが、とりあえず、動作デモとして設置してみます。
http://chat.ma.la/

普通のチャット、改行を含むテキストの書き込みと保存、それから手書きメッセージの書き込みが可能です。
長文書き込みはタブが残るので、pythonのソースコードが貼れます。
手書きはお絵かきBBSの使い回しです。ボーダーのリサイズでキャンバスを広く出来ます。
IPアドレスは表示されませんが、ログとしては残しています。

サーバーの負荷が高かったり、不具合が見つかったら消すかもしれません。

----
仕組みはログファイルのどこまでを読み込んでいるのかを記録しておき、追加された部分のみを読み込んで追記、という単純なものです。
変更がなかった場合はマイナーですが「HTTP 204 No Content」というレスポンスを返すと、ブラウザは何の処理も行いません。
http://www.studyinghttp.net/status_code#Code204

差分リクエストは、昔XMLHTTPでrange付きリクエストが出来ないかと試行錯誤したことがあるのですが、どうにも無理みたいです。
CGIを使ってログファイルを部分的に切り出してブラウザに送ってやる必要があります。
サーバープッシュとクライアントプルの組み合わせで、ウェブベースでも高レスポンス、低通信量のチャットを作るというのがコンセプトなのですが、
レンタルサーバー上でサーバープッシュをやるとコネクション数を多く使ってしまうので無効にしています。
ブラウザ上で完全リアルタイムに更新するチャットを作るのは、それほど難しいことではありません。

プライベートメッセージ、ローカルファイルのアップロード、httpからファイルのダウンロード
アスキーアートで発言、MSAgentを使った発言読み上げ、mp3ストリーミング、ブラクラ送信機能、
タブまたはMDI表示でマルチルーム同時参加、2ch実況、正規表現での発言フィルタ機能など、
色々あったのですが、かなり意味不明なものになってしまっていたので、いったんばっさりと削りました。

ウェブベースでも、メッセンジャー以上の機能を持った通信手段を作れないものかと考えています。


WriteBacks

HTTP 204 No Contentを返すと画面遷移しない

最速インターフェース研究会 :: JavaScriptで差分リロードなチャットより。(via blog.8-p.info: Amazon のレーティングが Ajax っぽい) 変更がなかった場合はマイナーですが「HTTP 204 No Content」というレスポンスを返すと、ブラウザは何の処理も行いません。 画面遷移せずにクライアントに何かを送信させたいとき、送信結果が必ず成功する場合に便利な手法ですね。XMLHttpRequestを使ったり、iframeにpostしたりするよりスマートです。...

Posted by akiyan.com Blog at 2006/06/26 (Mon) 20:46:25

Ivan

Good site: circut city�ircut city�ircut city�rica durance�rica durance�rica durance�emjoy�emjoy�emjoy�cpenny�cpenny�cpenny�avalife�avalife�avalife�edu ceramic hair straighteners�edu ceramic hair straighteners�edu ceramic hair straighteners�edu flat irons�edu flat irons�edu flat irons�edu tourmaline hair straightener�edu tourmaline hair straightener�edu tourmaline hair straightener�olia flat iron�olia flat iron�olia flat iron�ikepedia�ikepedia�ikepedia

Posted by Good site: circut city�ircut city�ircut city�rica durance�rica durance�rica durance�emjoy�emjoy�emjoy�cpenny�cpenny�cpenny�avalife�avalife�avalife�edu ceramic hair straighteners�edu ceramic hair straighteners�edu ceramic hair straighteners�edu flat irons�edu flat irons�edu flat irons�edu tourmaline hair straightener�edu tourmaline hair straightener�edu tourmaline hair straightener�olia flat iron�olia flat iron�olia flat iron�ikepedia�ikepedia�ikepedia at 2006/12/31 (Sun) 08:00:44

Rey

Good site: [url=http://circut-city.google-msn.info/]circut city[/url]�url=http://circut-city.google-msn.info/circut-city.html]circut city[/url]�url=http://circut-city.google-msn.info/index.html]circut city[/url]�url=http://erica-durance.google-msn.info/]erica durance[/url]�url=http://erica-durance.google-msn.info/erica-durance.html]erica durance[/url]�url=http://erica-durance.google-msn.info/index.html]erica durance[/url]�url=http://femjoy.google-msn.info/]femjoy[/url]�url=http://femjoy.google-msn.info/femjoy.html]femjoy[/url]�url=http://femjoy.google-msn.info/index.html]femjoy[/url]�url=http://jcpenny.google-msn.info/]jcpenny[/url]�url=http://jcpenny.google-msn.info/index.html]jcpenny[/url]�url=http://jcpenny.google-msn.info/jcpenny.html]jcpenny[/url]�url=http://lavalife.google-msn.info/]lavalife[/url]�url=http://lavalife.google-msn.info/index.html]lavalife[/url]�url=http://lavalife.google-msn.info/lavalife.html]lavalife[/url]�url=http://sedu-ceramic-hair-straighteners.google-msn.info/]sedu ceramic hair straighteners[/url]�url=http://sedu-ceramic-hair-straighteners.google-msn.info/index.html]sedu ceramic hair straighteners[/url]�url=http://sedu-ceramic-hair-straighteners.google-msn.info/sedu-ceramic-hair-straighteners.html]sedu ceramic hair straighteners[/url]�url=http://sedu-flat-irons.google-msn.info/]sedu flat irons[/url]�url=http://sedu-flat-irons.google-msn.info/index.html]sedu flat irons[/url]�url=http://sedu-flat-irons.google-msn.info/sedu-flat-irons.html]sedu flat irons[/url]�url=http://sedu-tourmaline-hair-straightener.google-msn.info/]sedu tourmaline hair straightener[/url]�url=http://sedu-tourmaline-hair-straightener.google-msn.info/index.html]sedu tourmaline hair straightener[/url]�url=http://sedu-tourmaline-hair-straightener.google-msn.info/sedu-tourmaline-hair-straightener.html]sedu tourmaline hair straightener[/url]�url=http://solia-flat-iron.google-msn.info/]solia flat iron[/url]�url=http://solia-flat-iron.google-msn.info/index.html]solia flat iron[/url]�url=http://solia-flat-iron.google-msn.info/solia-flat-iron.html]solia flat iron[/url]�url=http://wikepedia.google-msn.info/]wikepedia[/url]�url=http://wikepedia.google-msn.info/index.html]wikepedia[/url]�url=http://wikepedia.google-msn.info/wikepedia.html]wikepedia[/url]

Posted by Good site: [url=http://circut-city.google-msn.info/]circut city[/url]�url=http://circut-city.google-msn.info/circut-city.html]circut city[/url]�url=http://circut-city.google-msn.info/index.html]circut city[/url]�url=http://erica-durance.google-msn.info/]erica durance[/url]�url=http://erica-durance.google-msn.info/erica-durance.html]erica durance[/url]�url=http://erica-durance.google-msn.info/index.html]erica durance[/url]�url=http://femjoy.google-msn.info/]femjoy[/url]�url=http://femjoy.google-msn.info/femjoy.html]femjoy[/url]�url=http://femjoy.google-msn.info/index.html]femjoy[/url]�url=http://jcpenny.google-msn.info/]jcpenny[/url]�url=http://jcpenny.google-msn.info/index.html]jcpenny[/url]�url=http://jcpenny.google-msn.info/jcpenny.html]jcpenny[/url]�url=http://lavalife.google-msn.info/]lavalife[/url]�url=http://lavalife.google-msn.info/index.html]lavalife[/url]�url=http://lavalife.google-msn.info/lavalife.html]lavalife[/url]�url=http://sedu-ceramic-hair-straighteners.google-msn.info/]sedu ceramic hair straighteners[/url]�url=http://sedu-ceramic-hair-straighteners.google-msn.info/index.html]sedu ceramic hair straighteners[/url]�url=http://sedu-ceramic-hair-straighteners.google-msn.info/sedu-ceramic-hair-straighteners.html]sedu ceramic hair straighteners[/url]�url=http://sedu-flat-irons.google-msn.info/]sedu flat irons[/url]�url=http://sedu-flat-irons.google-msn.info/index.html]sedu flat irons[/url]�url=http://sedu-flat-irons.google-msn.info/sedu-flat-irons.html]sedu flat irons[/url]�url=http://sedu-tourmaline-hair-straightener.google-msn.info/]sedu tourmaline hair straightener[/url]�url=http://sedu-tourmaline-hair-straightener.google-msn.info/index.html]sedu tourmaline hair straightener[/url]�url=http://sedu-tourmaline-hair-straightener.google-msn.info/sedu-tourmaline-hair-straightener.html]sedu tourmaline hair straightener[/url]�url=http://solia-flat-iron.google-msn.info/]solia flat iron[/url]�url=http://solia-flat-iron.google-msn.info/index.html]solia flat iron[/url]�url=http://solia-flat-iron.google-msn.info/solia-flat-iron.html]solia flat iron[/url]�url=http://wikepedia.google-msn.info/]wikepedia[/url]�url=http://wikepedia.google-msn.info/index.html]wikepedia[/url]�url=http://wikepedia.google-msn.info/wikepedia.html]wikepedia[/url] at 2007/01/01 (Mon) 01:03:42
TrackBack ping me at
http://la.ma.la/blog/diary_200502282048.trackback
Post a comment

writeback message: Ready to post a comment.







spam yoke. nanimo ireruna.