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.
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.
22 comentarios, 0 referencias
+
#