Implémentation PHP de l'application de salon de discussion la plus simple

Introduction

Les applications de chat sont très courantes sur le Web. Les développeurs disposent également de nombreux choix lorsqu'ils créent de telles applications. Cet article présente comment implémenter une application de chat basée sur PHP-AJAX qui peut envoyer et recevoir des messages sans rafraîchir la page.

Logique principale

Avant de définir la fonctionnalité principale de l'application, examinons d'abord l'apparence de base de l'application de chat, comme le montre la capture d'écran suivante :

Saisissez le texte de chat via la zone de saisie en bas de la fenêtre de chat. Cliquer sur le bouton Envoyer lance l'exécution de la fonction set_chat_msg. Il s'agit d'une fonction basée sur Ajax, de sorte que le texte de chat peut être envoyé au serveur sans rafraîchir la page. Le programme exécute chat_send_ajax.php sur le serveur avec le nom d'utilisateur et le texte de chat.

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

Le module PHP reçoit les données de formulaire depuis la chaîne de requête et les met à jour dans une table de base de données nommée chat. La table de base de données chat possède une colonne nomméeID、USERNAME、CHATDATEetMSGcolonne. Le champ ID est un champ auto-incrémenté, donc la valeur de ce champ ID sera automatiquement incrémentée. La date et l'heure actuelles seront mises à jour dans la colonne 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();
}

Afin de recevoir les messages de chat de tous les utilisateurs dans la table de base de données, la fonction de minuterie est configurée pour appeler la commande JavaScript suivante en boucle toutes les 5 secondes, c'est-à-dire exécuter la fonction get_chat_msg toutes les 5 secondes.

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

get_chat_msg est une fonction basée sur Ajax. Elle exécute le programme chat_recv_ajax.php pour obtenir les informations de chat depuis la table de base de données. Dans la propriété onreadystatechange, une autre fonction JavaScript get_chat_msg_result est branchée. Lorsque les messages de chat de la table de base de données sont renvoyés, le contrôle du programme entre dans la fonction 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);
}

Dans le programme chat_recv_ajax.php, les messages de chat des utilisateurs sont collectés via SQLselectcommandes. Pour limiter le nombre de lignes, une clause limit (limit 200) est également donnée dans la requête SQL, ce qui nécessite les 200 dernières lignes de la table de base de données chat. Les messages obtenus sont ensuite renvoyés à la fonction Ajax pour affichage dans la fenêtre de chat.

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;

Lorsque les données sont prêtes, la fonction JavaScript collecte les données reçues de PHP. Ces données seront organisées et placées à l'intérieurDIVde la balise. oxmlHttp.responseText conserve les messages de chat reçus du programme PHP et les copie dans la propriété document.getElementById("DIV_CHAT").innerHTML de la balise DIV.

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

La commande SQL CREATE TABLE suivante peut être utilisée pour créer une table de base de données nommée chat. Toutes les informations saisies par les utilisateurs iront dans la table de base de données.

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

Points d'intérêt

Le code utilisé pour implémenter cette application de chat est très intéressant. Il peut être amélioré en une application de chat HTTP pleinement mature. La logique de création de l'application est également très simple. Même les débutants n'auront aucune difficulté à la comprendre.

Licence

Cet article, ainsi que tout code source et fichiers associés, est sous licence The Code Project Open License (CPOL).

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