PHPチャットルームアプリケーションの実装方法のアイデア

はじめに

チャット アプリはオンラインで非常に一般的です。開発者には、このようなアプリケーションを構築する際にも多くのオプションがあります。この記事では、ページを更新せずにメッセージを送受信できる PHP-AJAX ベースのチャット アプリケーションを実装する方法について説明します。

コア ロジック

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

の入力ボックスにチャット テキストを入力します。チャットウィンドウの下部。 「送信」ボタンをクリックして関数 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 モジュールはクエリ文字列からフォーム データを受け取り、それを 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();
}

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

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 プログラムでは、ユーザーからのチャット メッセージが SQL select コマンドを通じて収集されます。行数を制限するために、SQL クエリに制限句 (制限 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 チャット アプリケーションに改良できます。このアプリケーションを作成するロジックも非常にシンプルです。初心者でも理解に苦しむことはありません。