Chat AJAX no-obstrusivo con Jquery
El desarrollo web actual esta evolucionando gracias a la tecnología que cambia dia a dia, perfeccionándose, pero esto puede ser inútil si no va ligada a una metodología o guias de estilo proporcionadas por personas con experiencia, recientemente apareció el termino de javascript no obtrusivo, que la propia wikipedia define como:
- Separación de la funcionalidad JavaScript (la “capa del comportamiento”) de las capas de estructura/contenido y de presentación de un página.
- Uso de buenas prácticas a fin de evitar los problemas de incompatibilidad de la programación tradicional en JavaScript (tales como inconsistencias entre navegadores y falta de escalabilidad)
Esto es que se crea dentro de cada pagina Html normal, tres capas distinguibles que son:
- La capa de información (Html)
- La capa de presentación y diseño (CSS)
- La capa de interacción y eventos (Javascript)
Esto nos recuerda al patrón MVC utilizada en Ruby on Rails y otros frameworks actuales (Django, Cake, Code Igniter, etc.), esto facilita enormemente el desarrollo ya que focaliza y ordena las funciones de cada capa.
Ahora con esta pequeña introducción veamos como podemos ver en la practica la teoría, para ello utilizaremos a la biblioteca javascript: Jquery, que dentro de ella ya tiene las funciones comunes para desarrollo como: Ajax, manipulación de Dom, effectos, etc.
Bien empezamos desarrollando lo que sera el esqueleto de la aplicación el html en si:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Chat con jquery unobtrusivo</title>
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="chat.js" type="text/javascript"></script>
</head>
<body>
<h1>
Chat con jquery unobtrusivo.
</h1>
<div id="chat">
</div>
<form action="chat.php" method="GET">
<input id="name" name="name" size="10" type="text"> -
<input id="message" name="message" size="10" type="text" class="message">
<input name="commit" value="Enviar" type="submit">
</form>
</body>
</html>
Como vemos el código html esta liberado de todo enlace a funciones javascript dentro de los eventos, solamente se hace referencia a dos archivos javascript que son: el propio jquery y un archivo chat.js que tiene las funciones y el manejo de eventos a acciones del HTML.
Ahora el código de la presentación::
style.css
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
body{
padding:30px;
font:13px/15px 'helvetica neue',arial,helvetica,sans-serif;
color:#343434;
}
h1{
padding:10px;
}
#chat{
padding:25px;
font-family:Monaco,Courier,monospace;
font-size:12px;margin-bottom:15px;
-webkit-border-radius:9px;
-moz-border-radius:9px;
background-color:#1F1100;
border:0;
color:#E7ECF1;
overflow:auto;
width:400px;
height:380px;
}
.footer{
margin-top:50px;
font-style:italic;
}
Y finalmente el código javascript:
chat.js
$(document).ready(
function(){
$("form").submit( function () {
$.ajax({
data:$.param($(this).serializeArray()),
dataType:'script',
type:'get',
url:'chat.php',
complete : function(){
$("#chat").animate({
scrollTop: 2000
}, 15 );
$('input#message').val("");
}
});
return false;
} );
})
setInterval(function() {
$.ajax({
success:function(request){
$('#chat').html(request);
},
url:'chat.html',
cache: false
})
}, 2000)
Aquí quiero dar énfasis a la manera en que se encadeno el evento del submit con una función ajax que actualiza el documento chat.html a traves de un script PHP que encontré por internet que realiza las funciones de chat, bloqueando palabras ofensivas y el uso por spammers, recomendable.
dejo el codigo fuente del chat para que lo puedas ver, además si quieres verlo en acción al chat:
Sala de Chat unobtrusivo. (actualizado)
Notas 13/feb/2010: Actualize el script, y de nuevo hice funcional el demo 
Manual de Jquery y lo que debes de saber antes de meterte a Ajax | carakan => web 2.0 y otras cosas. dijo
28 de Agosto del 2008 a las 11:50 am
[...] Actualizacion (28/08/2008): He desarrollado un Chat no obtrusivo con jquery. [...]
new_blood dijo
2 de Septiembre del 2009 a las 2:41 pm
Hola,
He estado tratando de hacer funcionar el código que empaquetaste en el zip, pero no hace nada :S (solo me aparece el chat, y cuando coloco el nombre de usuario y el mensaje al darle click al botón enviar queda congelado y no refresca). Lo subí a un server gratuito que soporta php, podrías hecharme una manito si no es mucha la molestia?
Saludos!
Kapry dijo
6 de Octubre del 2009 a las 1:14 am
Muy bueno
Lo he probado desde este sitio
Solo una recomendación estaría bueno que al enviar el mensaje el campo del mensaje se limpiase cuando se envié el mensaje
Saludos
akus dijo
24 de Noviembre del 2009 a las 11:32 pm
Comparto el mismo comentario que Kapry, sl2
El Rola dijo
23 de Diciembre del 2009 a las 7:27 pm
El demo dice esto:
HACKED BY
HaCKeR-MaN & XroGuE
Dusk dijo
13 de Febrero del 2010 a las 4:56 pm
Vieja, arregla la demo, es una pena que dejes asi tirado todo.
andresn dijo
17 de Agosto del 2010 a las 12:41 pm
Si funciona, solo denle permisos de escritura al chat.html, es el archivo que uso para grabar la conversacion