Einführung

Chat-Anwendungen sind im Web sehr verbreitet. Entwickler haben auch viele Möglichkeiten, solche Anwendungen zu erstellen. Dieser Artikel stellt vor, wie man eine PHP-AJAX-basierte Chat-Anwendung implementiert, die Nachrichten ohne Aktualisierung der Seite senden und empfangen kann.

Kernlogik

Bevor wir die Kernfunktionalität der Anwendung definieren, werfen wir zunächst einen Blick auf das grundlegende Erscheinungsbild der Chat-Anwendung, wie im folgenden Screenshot gezeigt:

Geben Sie den Chat-Text über das Eingabefeld am unteren Rand des Chat-Fensters ein. Ein Klick auf die Schaltfläche Senden startet die Ausführung der Funktion set_chat_msg. Dies ist eine Ajax-basierte Funktion, sodass Chat-Text ohne Aktualisierung der Seite an den Server gesendet werden kann. Das Programm führt chat_send_ajax.php auf dem Server zusammen mit dem Benutzernamen und dem Chat-Text aus.

//
// 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);
}

Das PHP-Modul empfängt Formulardaten aus dem Query-String und aktualisiert sie in einer Datenbanktabelle namens chat. Die Datenbanktabelle chat hat eine Spalte namensID、USERNAME、CHATDATEundMSGSpalte. Das ID-Feld ist ein Auto-Increment-Feld, daher wird der Wert dieses ID-Feldes automatisch erhöht. Das aktuelle Datum und die aktuelle Uhrzeit werden in die Spalte CHATDATE aktualisiert.

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();
}

Um Chat-Nachrichten von allen Benutzern in der Datenbanktabelle zu empfangen, wird die Timer-Funktion so eingestellt, dass sie den folgenden JavaScript-Befehl alle 5 Sekunden in einer Schleife aufruft, das heißt, die Funktion get_chat_msg alle 5 Sekunden ausführt.

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

get_chat_msg ist eine Ajax-basierte Funktion. Sie führt das Programm chat_recv_ajax.php aus, um Chat-Informationen aus der Datenbanktabelle abzurufen. In der Eigenschaft onreadystatechange ist eine weitere JavaScript-Funktion namens get_chat_msg_result eingehängt. Wenn die Chat-Nachrichten aus der Datenbanktabelle zurückgegeben werden, geht die Programmsteuerung in die Funktion get_chat_msg_result über.

//
// 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);
}

Im Programm chat_recv_ajax.php werden Chat-Nachrichten von Benutzern über SQLselectBefehle gesammelt. Um die Anzahl der Zeilen zu begrenzen, wird in der SQL-Abfrage zusätzlich eine Limit-Klausel (limit 200) angegeben, die die letzten 200 Zeilen in der Datenbanktabelle chat anfordert. Die erhaltenen Nachrichten werden dann an die Ajax-Funktion zurückgegeben, um im Chat-Fenster angezeigt zu werden.

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;

Wenn die Daten bereit sind, sammelt die JavaScript-Funktion die von PHP empfangenen Daten. Diese Daten werden angeordnet und innerhalbDIVdes Tags platziert. oxmlHttp.responseText behält die vom PHP-Programm empfangenen Chat-Nachrichten und kopiert sie in die Eigenschaft document.getElementById("DIV_CHAT").innerHTML des DIV-Tags.

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;
    }
}

Mit dem folgenden SQL-Befehl CREATE TABLE kann eine Datenbanktabelle namens chat erstellt werden. Alle von Benutzern eingegebenen Informationen werden in die Datenbanktabelle geschrieben.

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

Wissenswertes

Der Code, der zur Implementierung dieser Chat-Anwendung verwendet wird, ist sehr interessant. Er kann zu einer vollständig ausgereiften HTTP-Chat-Anwendung verbessert werden. Die Logik zum Erstellen der Anwendung ist ebenfalls sehr einfach. Selbst Anfänger werden keine Schwierigkeiten haben, sie zu verstehen.

Lizenz

Dieser Artikel sowie der zugehörige Quellcode und alle zugehörigen Dateien sind unter der Code Project Open License (CPOL) lizenziert.

Quelle: http://www.codeceo.com/article/php-chart-app.html