La aplicación de sala de chat más simple implementada en PHP

Introducción

Las aplicaciones de chat son muy comunes en Internet. Los desarrolladores tienen muchas opciones al crear este tipo de aplicaciones. Este artículo explica cómo implementar una aplicación de chat basada en PHP-AJAX que pueda enviar y recibir mensajes sin necesidad de actualizar la página.

Lógica central

Antes de definir las funciones principales de la aplicación, echemos un vistazo a la apariencia básica de la aplicación de chat, como se muestra en la siguiente captura de pantalla:

El texto del chat se introduce mediante el campo de entrada en la parte inferior de la ventana de chat. Al hacer clic en el botón Send, se comienza a ejecutar la función set_chat_msg. Esta es una función basada en Ajax, por lo que puede enviar el texto del chat al servidor sin necesidad de actualizar la página. El programa ejecuta chat_send_ajax.php en el servidor junto con el nombre de usuario y el texto del 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);
}

El módulo PHP recibe los datos del formulario desde la Query String (cadena de consulta) y los actualiza en la tabla de base de datos denominada chat. La tabla de base de datos chat tiene columnas denominadasID、USERNAME、CHATDATEyMSGLas columnas. El campo ID es un campo de incremento automático, por lo que la asignación de este campo ID aumentará automáticamente. La fecha y hora actuales se actualizarán en la columna 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();
}

Para recibir los mensajes de chat de todos los usuarios en la tabla de la base de datos, la función timer se configura para llamar al siguiente comando JavaScript en un bucle de 5 segundos, es decir, ejecutar la función get_chat_msg cada 5 segundos.

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

get_chat_msg es una función basada en Ajax. Ejecuta el programa chat_recv_ajax.php para obtener la información de chat de la tabla de la base de datos. En la propiedad onreadystatechange, se conecta otra función de JavaScript, get_chat_msg_result. Mientras se devuelven los mensajes de chat de la tabla de la base de datos, el control del programa pasa a la función 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);
}

En el programa chat_recv_ajax.php, los mensajes de chat de los usuarios se recopilan mediante el comando SQLselectLos mensajes de chat de los usuarios se recopilan mediante el comando SQL. Para limitar el número de filas, también se incluye una cláusula de límite (limit 200) en la consulta SQL, es decir, se solicitan las últimas 200 filas de la tabla de la base de datos de chat. Los mensajes obtenidos se devuelven a la función Ajax para mostrar el contenido en la ventana 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;

Una vez que los datos están listos, la función JavaScript recoge los datos recibidos de PHP. Estos datos se colocarán dentro deDIVDentro de la etiqueta. oxmlHttp.responseText conservará los mensajes de chat recibidos del programa PHP y se copiarán en la propiedad innerHTML de document.getElementById(“DIV_CHAT”) de la etiqueta 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;
    }
}

El siguiente comando SQL CREATE TABLE se puede utilizar para crear la tabla de base de datos llamada chat. Toda la información introducida por el usuario se insertará en la tabla de la base de datos.

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

Puntos de interés

Este código para implementar la aplicación de chat es muy interesante. Se puede mejorar para convertirlo en una aplicación de chat HTTP completamente funcional. La lógica para crear esta aplicación también es muy simple. Incluso un principiante no tendrá ninguna dificultad para entenderla.

Licencia

Este artículo, así como cualquier código fuente y archivos relacionados, están licenciados bajo The Code Project Open License (CPOL).

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