クライアント側

kdaiba2007-06-21

JavaScriptでがりがりごりごり

サーバ側のスクリプトも載せたし，自作のJavaScriptライブラリも載せたし，後はクライアント本体です．自分にデザインセンスがないことをいやというほど思い知ったので，cssの公開はご勘弁を．動いてる画面のキャプチャを「今日の一枚」として載せてみました．win上のie6とff2，mac上のsafariとff2で動くことを確認しています．

json呼び出し

ひねりのないスクリプトなので特に説明は必要ないと思いますが，1点だけ．昨日書いてるjqueryプラグインとして作成しているjson.jsは次のように使用します．

$().json(hello, JsonCallback);

これだと"hello"というurlに対してGETメソッドを投げ，コールバックメソッド名が"JsonCallback"になります．urlが"{callback}"という文字列を含んでいた場合には，json.js中で二つ目の引数で指定したコールバックメソッド名（この場合はJsonCallback）に変換してサーバに投げます．

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="Stylesheet" href="css/screen.css" type="text/css">
<script src="src/jquery.js"></script>
<script src="src/json.js"></script>
<script type="text/javascript">

var st;
var myname;
var hello;
var msgto;
var msgs = new Array();
var mems = new Array();
var msgindex = 0;
var memindex = 0;

$(function(){
  $("#doc").hide();
  $("#setmyname").click(function(){
    myname = $("#myname").val();
    hello = '/hello?from=' + encodeURI(myname);
    $("#whoami").append(myname);
    $("#login").hide("fast");
    $("#doc").show("slow");
    $().json(hello, JsonCallback);
    return false;
  });
  $("#msgprev").click(function(){
    rotatemsg(-1);
    return false;
  });
  $("#msgnext").click(function(){
    rotatemsg(+1);
    return false;
  });
  $("#memprev").click(function(){
    rotatemem(-1);
    return false;
  });
  $("#memnext").click(function(){
    rotatemem(+1);
    return false;
  });
});

function sendmsg() {
  var msg;
  if (! $("#saying").val()){
    $("#saying").val("You must fillin textarea");
    return;
  }
  msg = $("#saying").val();
  if (!msgto){
    $("#saying").val("Who do you like to message to?");
    msgto = myname;
    $("#to").empty();
    $("#to").append(msgto);
  }
  $.post("/send", {from:myname, to:msgto, msg:encodeURI(msg)},{});
  $("#saying").val("");
}

function showmessage(jsonData) {
  msgs.unshift(jsonData.msg);
  if(msgs.length > 100){
    msgs.pop();
  }
  dispmsg();
}

function showmembers(jsonData) {
  mems = jsonData.mem.slice();
  dispmem();
}

function rotatemsg(flag) {
  msgindex = (msgindex + flag) % 10;
  if (msgindex < 0){ msgindex = 0}
  if ( msgindex * 10 > msgs.length){ msgindex--} 
  dispmsg();
}

function rotatemem(flag) {
  memindex = (memindex + flag) % 20;
  if (memindex < 0){ memindex = 0}
  if ( memindex * 20 > msgs.length){ memindex--} 
  dispmem();
}

function JsonCallback(jsonData){
  switch(jsonData.callback){
    case "showmessage" : showmessage(jsonData); break;
    case "showmembers" : showmembers(jsonData); break;
    default : alert("unknown JsonCallback: " + jsonData.callback);
  }
  $().json(hello,JsonCallback);
}

function dispmsg() {
  var copymsg = msgs.slice(msgindex * 10, msgindex * 10 + 9);
  function block(msg) {
    return '<dt>' + msg.from + '</dt><dd>' + msg.body + '</dd>';
  }

  $("#msgs").empty();
  $("#msgs").append($.map(copymsg, block).join("\n"));
}

function dispmem() {
  var copymem = mems.slice(memindex * 10, memindex * 10 + 9);

  $("#mems").empty();
  $.each(copymem, function(i){
    $("#mems").append('<li><a href="" id="' + i + '">' + this + '</a></li>');
    var target = '#' + i;
    $(target).click(function(){
      msgto = $(target).text();
      $("#to").empty();
      $("#to").append(msgto);
      return false;
    });
  });
}

</script>
</head>
<body>
<div id="login">
  <form>
    <p>What's Your Name</p>
    <input type="text" name="myname" id="myname" size=20>
   <input type="button" value="set" id="setmyname">
  </form>
</div>
<div id="doc">
 <div id="hd">
  <form>
    <p>What You Say To <span id="to"></span></p>
    <textarea id="saying"></textarea>
   <input type="button" value="send" onclick='sendmsg()'>
  </form>
 </div>

 <div id="bd">
  <div id="main">
   <p>messages
    <a href="" id="msgprev">&lt;&lt;</a>
    <a href="" id="msgnext">&gt;&gt;</a>
   </p>
   <dl id="msgs">
   </dl>
  </div>
  <div id="menu">
   <div id="me">
    <p>Welcome Back <span id="whoami"></span></p>
   </div>
   <div id="list">
    <p>Online Users
     <a href="" id="memprev">&lt;&lt;</a>
     <a href="" id="memnext">&gt;&gt;</a>
    </p>
    <ul id="mems">
    </ul>
   </div>
  </div>
 </div>

 <div id="ft">
  <p>Sample Comet Chat Page</p>
 </div>  
</body>
</html>