Dale aqui para ver el demo (solo internet explorer 6+)
Descargar codigo fuente

Antes de comenzar

Resulta que tengo unos dias libres entre 25 y 30 no estoy seguro y me propuse aprender algo de javascript porque tenia muy olvidada esa area de la web, navegando por la web lei mucho sobre algunos frameworks de javascript al parecer muy populares, jquery, mootools y demas, el caso es que me decidi a tomar mootools y darle, que porque elegi mootools? pues nomas porque si.

Tengo algunas ideas en mente para aplicar mootools, aclaro que antes hacer este chat no tenia ningun conocimiento sobre mootools y sobre javascript apenas se lo mas basico y de esto se daran cuenta si es que analizan el codigo javascript que incluyo aqui.

Bueno tambien comento que algunas de las cosas que tenia pensadas no pude implementarlas por falta de manejo de javascript especialmente del DOM, pero esta aplicacion cumple el objetivo al 100%, lo que me falto implementar solo fueron adornos y algunos efectos.

Otra cosa que me sucedio es que no me di cuenta que este chat solo funciona en internet explorer 6+, tanto en mozilla como en safari el codigo javascript no jala. Esto fue precisamente porque son mis primeras lineas de codigo en js y no contemple esta situacion.

Implementacion de la sala de chat

Esta aplicacion la dividi en 3 grandes partes.

1. Cliente (en javascript)
2. Servidor ( php y mysql )
3. La interfaz ( css + html)

La idea general en como trabaja el chat es la siguiente, entras a la pagina del chat y te muestra un pantalla para hacer login, eliges un nombre de usuario y una sala para entrar, en caso de haber algun error en uno de los campos se despliega un error descriptivo al usuario.

Si lo anterior paso bien te has loguado y aparece una segunda pantalla hay un campo de texto para escribir mensajes, un textarea para visualizar los mensajes escritos por todos lo usuarios de la sala, y textarea para ver los usuarios que se encuentran en la sala.

Hasta ahi todo va bien como en cualquier pagina de chat, veamos la parte tecnica, cuando un usuario hace login los datos qu introduce en la primer interfaz del login se comparan con los que hay en la base de datos, si no hay problema se registra al usuario en la bd, los mensajes que envie el usuario tambien se almacenan en la bd especificando la hora de envio y el tiempo de envio del mensaje, (si .. tiempo y hora son cosas diferentes).

El tiempo de envio es un entero grande que se obtiene con la funcion del php time(). Cada segundo el explorador hace peticiones al programa servidor.php solicitandole los mensajes mas recientes enviados por usuarios que se encuentran en la misma sala que yo. Mientras que el campo hora almacenara un dato tipo time.

El cliente recibe los mensajes nuevos (en caso de haberlos) y los despliega en el campo de texto. Algo similar sucede con el campo de texto destinado a mostrar los usuarios que se encuentran en la misma sala que yo, con el detalle de que las peticiones para obtener a los usuarios se realizan cada 3 segundos.

Y aqui viene una situacion especial, todo usuario que entra al chat se registra en la bd junto con su hora de entrada. Existe un tiempo de inactividad permitido para los usuarios, el tiempo de inactividad es el tiempo que ha pasado un usuario sin haber escrito al menos un mensaje.

Cada vez que un usuario nuevo entra al chat se revisa la bd buscando usuarios inactivos, si existen se borran de la bd. Si entro al chat y exedo el tiempo de inactividad el cliente enviara un mensaje al servidor indicandole que debo ser borrado de la bd al mismo tiempo que el cliente me redirecciona al la interfaz del login.

Lo anterior es con la intencion de tener la bd limpia de mensajes antiguos y garantizando que la caja de texto para mostrar a los usuarios de una sala simpre este actualizada y no me muestre usuarios que se logearon hace 20 dias al chat.

La verdad es que por el tercer punto que es la interfaz ocupe el codigo css y html de lo mas basico, y en realidad es muy poco el codigo que abarca esa parte.

En el segundo punto en la parte del servidor.php, se ocupan principalmente las operaciones basicas a la bd, sentencias select, insertar y borrar registros. A grandes rasgos el servidor recibe una peticion del cliente identificada por un numero entero y a partir de ahi ejecuta cierta funcion y devolviendo un resultado al cliente. aqui pongo un esquema de la bd muy general.

Y por el ultimo el cliente en javascript seencarga de solicitar informacion al servidor y desplegarla en el navegador.

Voy a anexar una carpeta comprimida con todos los archivos y con instrucciones de configuracion por si alguien quiere hecharle un ojo, no quiero colocar el codigo entero porque son como unas 400 lineas entre php y javascript, tampoco pienso explicar el programa linea por linea pues me llevaria algunas decenas de hojas.

Y ya para terminar la idea no era hacer una aplicacion comercial de un chat, simplemente queria empezar a conocer mootools y como ejercico de programacion esta exelente, y pues si a alguien le sirve el codigo pues adelante.