Chat AJAX no-obstrusivo con Jquery

Posted by & filed under ajax, 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 :D

11 Responses to “Chat AJAX no-obstrusivo con Jquery”

  1. new_blood

    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!

  2. Kapry

    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

  6. andresn

    Si funciona, solo denle permisos de escritura al chat.html, es el archivo que uso para grabar la conversacion

  7. Alan Carrillo

    muchas gracias es de gran utilidad, yo habia echo uno con ajax pero no se me ocurrio generar el documento para no consultar base de datos, gracias.

  8. maxhenrry

    new_blood aque servidor gratuito lo has subido para decirte si lo que esta mal es el zip o el servidor donde lo subistes

  10. onti

    Borrar el mensaje:

    $(document).ready(
    function(){
    $(“form”).submit( function () {
    $.ajax({
    data:$.param($(this).serializeArray()),
    dataType:’script’,
    type:’get’,
    url:’chat.php’
    });
    $(‘#message’).val(“”);
    return false;

    } );
    })

Leave a Reply