PHPとAjaxでチャットを作ってみる 第2回「入室と退室とセッションと」

チャット作り第2回。
いきなり予定より大幅に遅れての更新と相成りました。


チャットを作ろうと思い立ってから3週間、暇なときにチャットの作り方を
グーグル先生に聞いてみたんですが、良さげな答えがなかったので
やっぱり手作り（というか手探り）で進めるコトに。

で、普通のチャットの場合は入室時に名前を入力すると
それ以降の入力は不要なので、その流れに従います。
前回の http://www6.atpages.jp/guardiancity/weblog/chat01.html では
毎回名前を変えられるので誰が誰だか分からなくなってしまいます。


夜明けのヴァン

ヴァン・ザ・ナイスガイ

不死身のヴァン

実際は同じ人でも別の名前だとネット上では違いが分かりにくいのです。




というコトで今回はチャットの基本「入室」を作ります。

…どう作るんだろう。



チャットそのものの作り方はなくても似たような処理のロジックがあれば
参考になるかなと思い再びグーグル先生に聞いてみたところ、セッションを
使えばいいのではないかと勝手に判断しました。

---

説明しよう！
セッションとはコンピュータシステムやネットワーク通信において、
ログインしてからログオフするまでの一連の操作や通信のことである！
- IT用語辞典より

---

名前の入力が必要になるのは入室時なので、最初は名前の入力欄を表示し、
入室後にコメントの入力欄に変更するという流れにしておきます。

<？php
    // 入室時の処理
    session_start();

    // 名前欄に入力された文字列をセッションに格納
    $_SESSION['name'] = $_GET['name'];

    $xml = simplexml_load_file('log.xml');
    $node = $xml->addChild('Log');
    $node->addChild('NAME', "お知らせ");
    $node->addChild('COMMENT', $_SESSION['name']."さんが入室しました。");
    $xml->asXML('log.xml');
?>

…と、こんな感じでログ管理のxmlファイルに書き込みます。
一度セッション変数に入れた値はセッションが切れるまで保持されるので
名前を必要とするときはずっとこの値を使います。　例↓

<？php
    // 退室時の処理
    session_start();

    $xml = simplexml_load_file('log.xml');
    $node = $xml->addChild('Log');
    $node->addChild('NAME', "お知らせ");
    $node->addChild('COMMENT', $_SESSION['name']."さんが退室しました。");
    $xml->asXML('log.xml');

    // セッション破棄
    $_SESSION = array();
    if (isset($_COOKIE["PHPSESSID"])) setcookie("PHPSESSID", '', time() - 1800, '/');
    session_destroy();
?>

退室ボタンは付け忘れたんでリロードとかしたときに退室するようにしています。

現状はこちら
http://www6.atpages.jp/guardiancity/weblog/chat02.html


作り終わってから
コレってhtmlで <input type="hidden" value="入室者名"> ってすれば良くね？
と思いましたが後の祭りです。


【現状の機能まとめ】
・画面遷移せずにリロード
・セッションによる入退室管理


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

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

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

珍事

最近めっきり書くことがなくなってしまって。
いや、面白い出来事はあるんですが、活字で表すのが苦手なんですよー。
写真とかないと上手く伝わらないんじゃないかと思って。


昨日の昼休み・実習室
友「ジャッカルー、俺の分も昼飯買ってきてー」
私「把握した。なんでもいいか？」
友「おｋ」

昼食（カレー）購入後・教室
友「サンクス。お前の行動は尊敬に値するよ。これ弁当代な」
私「あれれ～？人件費がないよ～？」
友「そうだな忘れてた。はいよ（ ＾ω＾）つ①」
私「ちょｗｗｗ一円なんかいらねーｗｗｗさっさとしまえよｗｗｗ」
スプーンで友の一円玉を攻撃！こうかは　ばつぐんだ！
友「うわなにするやめくぁｗせｄｒｆｔｇｙふじこｌｐ；＠…ｱｯｰ!」
ポトッ

一 円 玉 in the my カ レ ー　　（on じゃない点に注目）

私「な、なにをするだァー！許さん！」
友「あ、ごめｗ」
私「てめーは俺を怒らせた」
友「m9（＾д＾）ﾌﾟｷﾞｬｰｗｗｗｗｗ」
私「きみがっ！謝るまでっ！怒るのをっ！やめないっ！」
友「正直すまんかった。今は反省している」
友2「逆に考えるんだ。一円玉ぐらい食べちゃってもいいさと考えるんだ」
私・友「「その発想はなかったわ」」

…みたいな事があったんですけどね。
一円玉 in the カレーの写真撮っとけば良かったなぁ…。
久しぶりの珍事だったのに。