PHPとAjaxでチャットを作ってみる

今更ですが、あけましておめでとうございます。

仕事で土曜出社や23時帰宅がデフォになり、サイトの更新作業が全くできない状況です。（それでなくても今まで怠けてましたけど）

一応プログラマー職という事でプログラミングなら勉強と更新作業を両立できると思い、
まずはチャットを作ってみるコトにしました。目標は現行チャット（レンタル）を越えるコト。
週1回ぐらいのペースで更新していこうと思っています。


まず、そもそもチャットはどういう仕組みなのか。
・コメント書き込んだらサーバーのログファイルを更新
・ログファイルを定期的に取得する
基本的にはコレだけですね。（たぶん）

それを踏まえた上でチャットの作り方を探してみたところ、こんなサンプルを発見しました。
http://www6.atpages.jp/guardiancity/weblog/chat00.php

…初めてチャットというものを見た記憶が蘇りました。
サンプルに言うのもアレですが、現行チャットにはほど遠い存在ですね。
まず何よりもリロードがダサい。

調べたところ、現行チャットのような「画面遷移をせずにリロードする」というのは
Ajaxなるものを使えば実現できるそうです。


Ajax「俺のリロードはレボリューションだ！」

今回はAjaxの一つ、prototype.jsを使用します。
Javascript内での読み込み用ソースはこんな感じ。

  new Ajax.Request(url,      // 読み込みをするURL
    {
      method: 'get',         // GETで送信する
      onSuccess: getData,    // 呼び出し成功時にgetData関数を呼ぶ
      onFailure: errMsg,     // 呼び出し失敗時にerrMsg関数を呼ぶ（今回は省略）
      parameters: paramList  // URLに付加する引数（これも省略）
    });

  function getData(data)
  {
    var item = data.responseXML.getElementsByTagName('Log');
    var log = "";
    
    for(i = 0; i < item.length; i++)
    {
      var nameTag = item[i].getElementsByTagName('NAME');       // 発言者名
      var name = nameTag[0].firstChild.nodeValue;
      
      var commentTag = item[i].getElementsByTagName('COMMENT'); // コメント
      var comment = commentTag[0].firstChild.nodeValue;
      
      log += name + "　" + comment + "\n";          // ログ出力用変数に追加
    }
    
    result.innerHTML = log;  // html側の取得結果表示部分に
}

流れとしては
・urlにログファイルのアドレスを指定
・成功するとgetData関数が呼ばれる
・getData関数でxmlの中身を取り出す

そして書き込みはphpで行います。これも同様にAjaxのRequestで呼びます。

<？php
  $name = $_GET['name'];       // GETで送られてきた発言者名を変数に格納
  $comment = $_GET['comment']; // コメントも同様
  
  $xml = simplexml_load_file('log.xml'); // ログのxmlをロードする
  $node = $xml->addChild('Log');         // 新規ノードLogを作る
  $node->addChild('NAME', $name);        // Logの子要素NAMEに発言者名を出力
  $node->addChild('COMMENT', $comment);  // コメントも同様
  $xml->asXML('log.xml');                // xmlに書き込む
?>

こうして画面遷移をせずにリロードが可能となりました。
まずは満足。
http://www6.atpages.jp/guardiancity/weblog/chat01.html

チャット作りはまだまだ続く。
続くったら続く。