Contenido

Creemos un chat sencillo con Ajax y MooTools

5 ago

+ 22

He recibido más de un comentario solicitando un chat que mediante Ajax nos permitiera añadir un sistema de comentarios a un web, esta mañana para otras cosillas he tenido que montar uno, muy sencillo y mínimalista, pero funcional y ligero, sin necesidad de emplear una base de datos donde alojar los datos, aunque modificando un poco el script seguro que podemos conseguir que se aloje donde queramos.

¿Que necesitamos?

  • Un editor de texto
  • Un servidor con php
  • MooTools

Empecemos

He optado por MooTools, principalmente por que era el que estaba usando en el proyecto que me tenía enfrascado, pero puede valer cualquier framework, con unas mínimas modificaciones podremos hacerlo funcionar con cualquiera.

Primero hemos de descargar el MooTools personalizado, una de las cosas que me gusta de MooTools es el sistema de descargas desde la página del proyecto, ya que te permite descargar solo lo que necesitas haciendo que el framework sea lo más ligero posible.

mootools_ajax_chat.jpg

Para nuestro caso, nos basta con seleccionar el elemento Ajax y Window.onDomReady.

El HTML

El HTML de nuestro chat será realmente sencillo, simplemente necesitamos un contenedor (chatwindow) y un formulario (charform) que encargará de enviar los datos a nuestro .php que salvará los datos.

<html>
	<head>
		<title>Mi primer Chat</title>
		<script type="text/javascript" src="mootools.js"></script>
		<script type="text/javascript" src="michat.js"></script>
	</head>
	<body>
	<div id="chatwindow"> </div>
	<form id="chatform" action="salvar.php" method="post">
		<label for="nick"><input name="nick" type="text" value="Nombre" /></label>
		<label for="mensaje"><input name="mensaje" type="text" value="..." /></label>
		<input type="submit" valur="Enviar" />
	</form>	
	</body>
</html>

Como podemos ver en las primeras líneas, llamamos a mootools.js y a nuestro fichero JS, que se encargará de realizar todo el trabajo con Ajax.

El Javascript

Nuestro javascript será muy ligero y muy compacto para que el peso del fichero sea ridículo, pero sin perder nada de eficiencia.


var tiempoRecarga = 2000; // 2seg

function recargaChat() { new Ajax("chat.txt", {method: 'get', update:$('chatwindow')}).request(); }

function DomCargado() {
	recargaChat.periodical(tiempoRecarga);
	$('chatform').addEvent('submit', function(e) {new Event(e).stop();this.send({onComplete:recargaChat});});
}
window.addEvent('domready',DomCargado);

Como podemos ver el fichero michat.js, se compone de estas 7 líneas (más que suficiente) con las que podemos dotar de la mágia de la recarga asincrona a nuestro chat. Hemos dejado en una variable al inicio del fichero el tiempo con el que queremos que se recargue nuestro chat, este tiempo dependerá de nuestro criterio a la hora de usar el chat. Hay que tener en cuenta que este tiempo será en caso de no insertar comentarios, ya que cuando escribimos actualizamos el chat automáticamente.

Si seguimos el orden de ejecución vemos que al acabar de cargar el DOM, controlado por la línea

Window.onDomReady(DomCargado);

lanzamos la función DomCargado(), que se encarga de definir el intervalo de recarga y la propiedad onsubmit() de nuestro formulario.

El PHP

Nuestro PHP, siguiendo el estilo ya definido, será tambien muy ligero y pequeño, y como no queremos almacenar datos en la base de datos, usaremos funciones de escritura en fichero, que es donde almacenaremos las líneas del chat.

<?php

if (isset($_POST['nick'],$_POST['mensaje'])) {
	$n = htmlspecialchars(stripslashes($_POST["nick"]));
	$msg = htmlspecialchars(stripslashes($_POST["mensaje"]));
	
	$out = "<p><strong>".$n."</strong> | ".$msg."</p>";
	$handle = fopen ("chat.txt", 'a');
	fwrite ($handle, $out);
	fclose($handle);
}
header("Location: chat.html");
?>

El script, requiere los parámetros que pasamos de nuestro formulario para grabar el mensaje, una vez enviados, limpiamos los datos, para evitar problemas con tags HTML, y acto seguido realizamos la insercción al fichero a la que le pasamos la línea con el formato deseado.

Conclusión

Hacer un chat es fácil, como todo en este mundo nos podemos complicar hasta el infinito, y el límite siempre es nuestra imaginación.

Actualización

Daniel Niquet, me pega un repaso con MooTools y me ayuda a mejorar el script para adaptarlo a las nuevas funcionalidades de MooTools.

  • aaaaah no inventes bro, lo voy a probar :D Gracias por el tip.

  • ¬¬’ porqué demonios apareció kamikaze en mi nick :S? eso está raro!

  • Estoy de pruebas, ahora te lo cambio :D

  • Creo que en la función recargaChat() el archivo a servir sería “chat.php” y no “chat.txt”, para así mandarle los datos por el post a chat.php, que a su vez se encarga de guardar la conversación en el archivo de texto, es correcto esto? . Adicionalmente unas observaciones que creo convenientes, sobre todo si consideramos la última versión de mootools, 1.11:

    1.- Window.onDomReady(DomCargado); creo que se depreciará en futuras versiones y ahora lo correcto es window.addEvent(‘domready’,DomCargado);

    2.- En la función recargaChat(), el objeto Ajax utiliza por default el método POST para envío de información, así que si se omite, no hay problema. Además, si el método onComplete no hará más que actualizar el elemento con la información servida, conviene utilizar la propiedad “update”, que se encarga de lo mismo, quedando algo como:

    function recargaChat() { new Ajax(“chat.txt”, {update:$(‘chatwindow’)}).request(); }

    3.- Para la parte DomCargado(), importante comentar que mootools ya maneja un método para el manejo de setInterval, encargándose de la parte “crossover”, para que funcione correctamente en cualquier navegador.

    setInterval(“recargaChat()”, tiempoRecarga);

    podría quedar algo como

    recargaChat.periodical(tiempoRecarga);

    Se pueden hacer más cosas con periodical, pero en este caso su uso es sencillo.

    4.- Y pues a esto no le veo nada de incorrecto, pero pues aprovechando que ya se está usando mootools, pues en lugar de

    $(‘chatform’).onsubmit

    yo pondría

    $(‘chatform’).addEvent(‘submit’);

    Es lo mismo, pero creo que también toma en cuenta algunas cosillas para la parte de crossover.

    Bueno, tomando en cuenta estos puntos ahora sí consideraría este chat Ajax totalmente mooToorizado.

    Saludos Andrés!!!

  • Ah, en el comentario anterior, en el punto 2, inclusive se puede manejar la propiedad update del objeto Ajax como:
    * update:’chatwindow’
    La diferencia es hacer referencia sólo al nombre de ID del elemento html, sin necesidad de mandarle el elemento entero por medio del método $. Pura vanidad, para ahorrar cuantos bytes se puedan, en cuestión de peso del script. Ahora sí creo que es todo….
    Muy buen script. Con esto vemos que hay cosas que con muy poco se pueden llegar a lograr, como un chat, en unas cuantas líneas.
    Saludos de vuelta andrés!

  • Muchas gracias Daniel por las aclaraciones. La verdad es que no llevo muy bien el programar en javascript sin frameworks en el trabajo y MooTools en mi tiempo libre.

    La función recargaChat() se encarga únicamente de cargar el contenido de “chat.txt” que es donde se almacenan los datos enviados por el evento submit del formulario.

    Es cierto que periodical() es mucho mejor opción que setInterval(), el tema de addEvent() me pasa lo mismo…. las malas costumbres :D

    Gracias ;)

  • Pues esta muy bueno el tutorial.
    Y lo estoy probando

    http://chat.blackhorn.org

    Pero encuentro un detalle, en Safari funciona perfectamente pero en Firefox no me carga el archivo .txt

    :S

  • Javier, esto es debido a que se está llamando al Ajax en modo POST, por defecto, habría que especificar en modo GET para que no nos de este problema.

    Cambia la función recargaChat() por esta.

    
    function recargaChat() { new Ajax("chat.txt", {method: 'get', update:$('chatwindow')}).request(); }
    
  • hola andres, antes que nada, dejame felicitarte por éste tan excelente recurso. no me lo vas a creer pero justo algo como esto estaba buscando, como estoy empezando a meterme en el mundillo de javascript y ajax me viene a ser de mucha utilidad.
    cuando lo estaba probando me surgió una duda, ¿existe la posibilidad de marcar los mensajes que se van publicando en último momento?, es decir, que el mensaje que acaba de ser enviado de un parpadeo o se marque con algún color por unos segundos (un efecto muy visto en esto de la web2.0).
    de poderse, te agredecería enormemente que dijeras cómo se ahce para implementarlo en el chat y ver cómo funciona.
    de antemano, gracias :) suerte y salu2.

  • Hola tengo un problemita… he probado el ejemplo y funciona muy bien en el firefox pero lamentablemente no carga en el IE. osea al enviar una palabra en el chat, no carga en el IE. pero si se ve en el firefox.. cual seria el problemita?

  • Hola amigos, he visto que es un chat bien compacto y muy bien consevido pero tiene problemas con respecto al fichero .txt que genera pues cuando guarda el fichero chat.txt en el cache tanto de firefox o IE no lo modifica y por tanto no se agrega nada al mismo… de que forma evitariamos este problemita?

  • Cuantos usuarios en línea soportaría el chat con un equipo 1024 en ram con 3.5 de procesador y un Disco duro de 120 gb, ¿será que con unos 5 concurrentes y persistentes podría funcionar?

  • [CORRECCION]
    Cuantos usuarios en línea soportaría el chat con un equipo 1024 en ram con 3.5 de procesador y un Disco duro de 120 gb, ¿será que con unos 5000 concurrentes y persistentes podría funcionar bien y sin sobrecargar el apache?

  • komo le pongo musica a mi xat e imagenes y juegos ayudenme porfa

  • hola soy cristian y me encantaria de que me pasaras a mi email un sencillo modelo de “chat” o un cursillo que se pueda realizar con dreamweaver u otro programa hermano a dreamweaver mi email es:cristian_ctc@hotmail.com espero respuestas gracias

  • al descargar el moo Tools personalizado no vienen las opciones

    Ajax y Window.onDomReady.

    Que estoy haciendo mal?

    Gracias.

  • @Ricardo: A mi me pasa igual, he descargado el mootools1.2 y al crear el chat no funciona y genera el siguiente error: Ajax is not defined.

    Saludos

  • hola compas podrian ayudarme con esta linea

    Window.onDomReady(DomCargado);

    Y bueno tambien he estado probando pero no me sirve nada d nada

  • Hola como estas disculpa se puede utilizar mootool y asp.net de visual studio .net 2005 y cual seria el codigo en aspx con c#

  • Adres como el compañero
    @Junior: No funciona en IE, yo lo he porteado a un sistema de base de datos con emoticons y que pueda interpretar URL’s y email’s, pero podrías ayudarnos para que funcione en IE, yo lo probé en Firefox, Opera, Safari y Chrome bajo windows y funciona de maravilla.

    También le arregle un problema con comillas simples no las publicaba si los Shout tenían comillas simples.

    Les dejo una captura: http://farm4.static.flickr.com/3375/3511668873_21585b7a04_o.jpg

  • Ya funciona todo bien con el chat???

  • Que version de Mootools se esta utilizando para este ejemplo?

    Baje la mas nueva y con todas las opciones seleccionadas
    y no me funciona me pasa lo que a dos usuarios

    AJAX undefined

    Le cambio por: Native
    y me arroja otro error

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.