Chat con Ajax – Parte 1

Deseaba desarrollar un pequeño sistema chat con el objeto XMLHttpRequest. El incoveniente, como lo comente en un articulo anterior, es que el cliente pide información al servidor y esto se debe realizar cada cierto tiempo (n segundos) y eso no es bueno, pues en un sistema de chat el servidor es el que debe enviar información al cliente (nuevos mensajes, quienes están conectados, etc). Así que empece a averiguar sobre Comet (alternativa a Ajax) pero no encontre algo digno de usarse, además de tener algunos pequeños incovenientes. Así que ¿que hacer?. Yo quería mi chat de todas maneras. Así que opte por trabajarlo con Ajax de todas maneras. Trabaje con el objeto XMLHttpRequest de forma distinta a como lo hemos venido haciendo en los ejemplos.

Recibiendo los datos

Al momento de consultar mensajes nuevos en la base de datos, mi objetivo fue que el servidor no trabaje mucho. Por ejemplo: Una aplicación para guardar datos del empleado. Cuando queremos guardar un nuevo registro en una tabla (MySQL), y pulsamos Grabar, mediante una función que trabaja con Ajax enviamos los valores a un archivo PHP que realiza el guardado de los datos, luego hacemos un include de un archivo consulta.php que muestra todos elementos en la base de datos. (Bueno así lo hemos venido haciendo). Pero esto no es lo recomendable, por supuesto son ejemplos didácticos que nos da una idea de la forma de trabajo con Ajax.

Sin embargo una forma correcta sería que el archivo consulta.php solo retorne el último registro agregado a la tabla. Esto tiene su ventaja: Si hacemos que consulta.php retorne 20 registros, eso implica un peso de +KB que envia el servidor; pero, si solo envia el último elemento el peso de envio en KB es menor.

Podemos obtener los últimos registros de una tabla de muchas formas. Puede ser mediante su id autoincrement o fecha, y hacer una pequeña consulta de ‘mayor a‘. Ejemplo: select * from empleado where id>$ultID ó select * from empleado where fecha>’$ultFecha’. Sencillo.

Supongamos ahora lo siguiente: Nuestra aplicación cuando inicia, por defecto aparecen los n últimos registros de la tabla, si los hay. Cuando agregamos un nuevo registro este debe aparecer en la lista, sin alterar al resto de registros mostrados. Para ello podemos hacer uso de diversos métodos que dispone JavaScript para el manejo del DOM. El objetivo es que, siguiendo con el ejemplo, el archivo consulta.php nos arroje solo el último registro de la tabla sin formato, para que mediante JavaScript y DOM le demos el formato o estilo adecuado y lo coloquemos después del resto de registros ya mostrados.

Como hemos visto la parte de consultar los datos al servidor debe ser lo menos pesado posible, osea consultar solo los ultimos registros de la tabla. Así no tendremos problemas al realizar consultas constantes, a intervalos de tiempos definidos.

Enviando lo datos

Esta parte es sencilla. Simplemente tenemos que enviar los datos al servidor mediante una función JavaScript que hace uso del objeto XMLHttpRequest, por ejemplo a un archivo PHP llamado registro.php. Si todo sale bien se realiza una consulta (como hemos visto arriba) para obtener el último registro de la tabla.

Bien, hasta aquí todo ha sido teoría. En la próxima entrega abordaremos el código con una breve explicación, ya que la mayor parte la hemos hecho acá.

[Ver la aplicación de esta teoría]