jQueryのAJAXを使ったシンプルなチャット

time 2011年2月6日 14時44分23秒   category くだらない開発   editor ギヤマシン@所長  

最速インターフェース研究会さんのAJAXを使ったシンプルなチャットをjQueryに移植しました。

jQueryのAJAXを使ったシンプルなチャット

サーバー側のperlソースは(無理やり)5行です。単純にログに書き込むだけ。
最速インターフェース研究会さんのソースから大分変わってます。perl5.8から内部文字列のエンコードがutf8に変わったので、以前のものだと文字化けするためです。これをwrite.cgiという名前でutf8な保存をして、チャットと同じ場所に属性755とかで置いてください。


#!/usr/bin/perl
use utf8;use CGI":all";use Encode;
open(LOG,">>log.txt");print LOG join("<>",time,
encode('utf8', escapeHTML(decode('utf8', param("n")))),encode('utf8', escapeHTML(decode('utf8', param("c"))))),"n";
put header;

当方jQuery初心者なので、習得するため素材を何にしようかと考えてました。やっぱりjQueryなら、それっぽいぬるっとしたアニメーションを使いたかったので、非同期にログが更新されるチャットがちょうどよいかなと。シンプルながらだいぶモダンな感じのチャットに自己満足。

挙動の詳しい解説は最速インターフェイスさんを参照ください。
ログを差分だけとってくるというスマートな実装は、当時衝撃をうけだなー。


で、何がしたいのか?

私みたいなサンデーwebプログラマが何か始めるならRuby+jQueryのコンビは鉄板かと。なのでjQueryの最初の一歩として既存のものから移植あたりから初めてみました。

これのチャットのような「ぬるっと更新システム」を使って、現在開発中の「くだらない音声システム」を作ります。

いやー、わき道それまくった感はありますが。

 

コメントを書く

Free WordPress Theme

WordPress Blog