紹介

チャットアプリケーションはウェブ上で非常に一般的です。開発者がこの種のアプリケーションを構築する際の選択肢も多くあります。この記事では、PHPとAJAXに基づくチャットアプリケーションを実装する方法を紹介します。ページをリフレッシュすることなくメッセージを送受信できます。

コアロジック

アプリケーションのコア機能を定義する前に、以下のスクリーンショットに示すようなチャットアプリケーションの基本的な外観を見てみましょう。

チャットウィンドウの下部にある入力ボックスからチャットテキストを入力します。Sendボタンをクリックすると、関数set_chat_msgの実行が開始されます。これはAjaxベースの関数であり、ページをリフレッシュすることなくチャットテキストをサーバーに送信できます。サーバー上では、chat_send_ajax.phpがユーザー名とチャットテキストとともに実行されます。

//
// Set Chat Message
//

function set_chat_msg()
{
    if(typeof XMLHttpRequest != "undefined")
    {
        oxmlHttpSend = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
       oxmlHttpSend = new ActiveXObject("Microsoft.XMLHttp");
    }
    if(oxmlHttpSend == null)
    {
       alert("Browser does not support XML Http Request");
       return;
    }

    var url = "chat_send_ajax.php";
    var strname="noname";
    var strmsg="";
    if (document.getElementById("txtname") != null)
    {
        strname = document.getElementById("txtname").value;
        document.getElementById("txtname").readOnly=true;
    }
    if (document.getElementById("txtmsg") != null)
    {
        strmsg = document.getElementById("txtmsg").value;
        document.getElementById("txtmsg").value = "";
    }

    url += "?name=" + strname + "&msg=" + strmsg;
    oxmlHttpSend.open("GET",url,true);
    oxmlHttpSend.send(null);
}

PHPモジュールはQuery String（クエリ文字列）からフォームデータを受け取り、chatという名前のデータベーステーブルに更新します。chatデータベーステーブルには、次の名前のID、USERNAME、CHATDATEとMSG列があります。IDフィールドは自動インクリメントフィールドなので、このIDフィールドの値は自動的にインクリメントされます。現在の日付と時刻はCHATDATE列に更新されます。

require_once('dbconnect.php');

db_connect();

$msg = $_GET["msg"];
$dt = date("Y-m-d H:i:s");
$user = $_GET["name"];

$sql="INSERT INTO chat(USERNAME,CHATDATE,MSG) " .
      "values(" . quote($user) . "," . 
      quote($dt) . "," . quote($msg) . ");";

      echo $sql;

$result = mysql_query($sql);
if(!$result)
{
    throw new Exception('Query failed: ' . mysql_error());
    exit();
}

データベーステーブル内の全ユーザーからのチャットメッセージを受信するために、timer関数は以下のJavaScriptコマンドを5秒ごとに呼び出すように設定されています。つまり、5秒間隔でget_chat_msg関数を実行します。

var t = setInterval(function(){get_chat_msg()},5000);

get_chat_msgはAjaxベースの関数です。データベーステーブルからチャット情報を取得するためにchat_recv_ajax.phpプログラムを実行します。onreadystatechange属性には、別のJavaScript関数get_chat_msg_resultが接続されています。データベーステーブルからチャットメッセージが返されると、プログラムの制御はget_chat_msg_result関数に移ります。

//
// General Ajax Call
//

var oxmlHttp;
var oxmlHttpSend;

function get_chat_msg()
{
    if(typeof XMLHttpRequest != "undefined")
    {
        oxmlHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
       oxmlHttp = new ActiveXObject("Microsoft.XMLHttp");
    }
    if(oxmlHttp == null)
    {
        alert("Browser does not support XML Http Request");
       return;
    }

    oxmlHttp.onreadystatechange = get_chat_msg_result;
    oxmlHttp.open("GET","chat_recv_ajax.php",true);
    oxmlHttp.send(null);
}

chat_recv_ajax.phpプログラムでは、ユーザーからのチャットメッセージはSQLselectコマンドによって収集されます。行数を制限するために、SQLクエリにはLIMIT句（limit 200）も指定されています。つまり、チャットデータベーステーブルの最後の200行を要求します。取得されたメッセージはAjax関数に返され、チャットウィンドウでの表示に使用されます。

require_once('dbconnect.php');

db_connect();

$sql = "SELECT *, date_format(chatdate,'%d-%m-%Y %r') 
as cdt from chat order by ID desc limit 200";
$sql = "SELECT * FROM (" . $sql . ") as ch order by ID";
$result = mysql_query($sql) or die('Query failed: ' . mysql_error());

// Update Row Information
$msg="";
while ($line = mysql_fetch_array($result, MYSQL_ASSOC))
{
   $msg = $msg . "" .
        "" .
        "";
}
$msg=$msg . "<table style="color: blue; font-family: verdana, arial; " . 
  "font-size: 10pt;" border="0">
  <tbody><tr><td>" . $line["cdt"] . 
  " </td><td>" . $line["username"] . 
  ": </td><td>" . $line["msg"] . 
  "</td></tr></tbody></table>";

echo $msg;

データの準備が整うと、JavaScript関数はPHPから受信したデータを収集します。これらのデータは、次のタグのDIV中に配置されます。oxmlHttp.responseTextはPHPプログラムから受信したチャットメッセージを保持し、DIVタグのdocument.getElementById("DIV_CHAT").innerHTMLプロパティにコピーされます。

function get_chat_msg_result(t)
{
    if(oxmlHttp.readyState==4 || oxmlHttp.readyState=="complete")
    {
        if (document.getElementById("DIV_CHAT") != null)
        {
            document.getElementById("DIV_CHAT").innerHTML =  oxmlHttp.responseText;
            oxmlHttp = null;
        }
        var scrollDiv = document.getElementById("DIV_CHAT");
        scrollDiv.scrollTop = scrollDiv.scrollHeight;
    }
}

以下のSQL CREATE TABLEコマンドは、chatという名前のデータベーステーブルを作成するために使用できます。ユーザーが入力したすべての情報はデータベーステーブルに入力されます。

create table chat( id bigint AUTO_INCREMENT,username varchar(20), 
chatdate datetime,msg varchar(500), primary key(id));

興味深い点

このチャットアプリケーションを実装するためのコードは非常に興味深いものです。これは、本格的なHTTPチャットアプリケーションに改善することができます。このアプリケーションを作成するロジックも非常にシンプルです。初心者でも理解するのにまったく困難はありません。

ライセンス

この記事、および関連するすべてのソースコードとファイルは、The Code Project Open License (CPOL) の下でライセンスされています。

出典：http://www.codeceo.com/article/php-chart-app.html