Jaxerを使ってみた。
ついでにdojoxのdtl(テンプレートエンジン)も使ってみた。普通に素直に動くのが恐ろしい。
試しにチャットをスクラッチから書いてみたんだけど、sampleのやつはsqlite使ってて、面倒だったからJaxer.pageを使ってみた。persistentらしい*1、Javascriptのオブジェクトのままデータを突っ込めるので、serialize/deserializeの手間が省けるのが大幅に楽。
ただ、問題が、
Jaxer.page.foo.bar++;
これは反映されない。どうやらJaxer.page直下のプロパティが変わっているかしかチェックしていないようなので、
Jaxer.page.foo = {bar : Jaxer.page.foo.bar + 1};
こう書けばpersistする。
ちなみに以下が大雑把なコード。
if (!Jaxer.page.chat) {
Jaxer.page.chat = {currentid:0,mbox:};
}sendMessage.proxy = true;
function sendMessage(message) {
var newMbox = ;
for (var i in Jaxer.page.chat.mbox) {
newMbox.push(Jaxer.page.chat.mbox[i]);
}
newMbox.push({id:Jaxer.page.chat.currentid + 1, msg:message});
while (newMbox.length > 10) {
newMbox.shift();
}
Jaxer.page.chat = {mbox : newMbox,
currentid : Jaxer.page.chat.currentid + 1};
}retrieveMessage.proxy = true;
function retrieveMessage(from) {
var ret = [];
for (var i in Jaxer.page.chat.mbox) {
var m = Jaxer.page.chat.mbox[i];
if (m.id > from) {
ret.push(m);
}
}
return ret;
}
あとはクライアント側からこれらのスタブを叩いて結果を表示するだけ。
以下クライアント側の部分。
Jaxer.setEvent(document.getElementById("btn"), "onclick", function() {
var txt = document.getElementById('txt');
sendMessage(txt.value);
txt.value = "";
});var currentId = 0;
function poll() {
var newMessages = retrieveMessage(currentId)
for (var i in newMessages) {
var m = newMessages[i];
currentId = m.id;
document.getElementById("msg").innerHTML += "
*" + m.msg;
}
setTimeout(poll, 1000);
}
poll();
HTML部分は略。
こうして書くとサーバとクライアントに分かれてるコードに見えるけど、実際は一つのコードで書けるので、結構シームレスに書ける感がある。
たったこれだけでAjaxなチャットが書けるというだけでも評価したい。
*1:どうシリアライズしてるかわかんないし、どんな排他があるかもわからんけど、とりあえずサーバ落として上げても大丈夫だった