mayo 12, 2011 Uncategorized

Desarrollo de un Chat con Grails y Ajax Push

Puedes ver la demo del chat en la siguiente dirección: http://jlmonteagudo.cloudfoundry.com/chat

Puedes descargarte el código fuente en la siguiente dirección: chat

Muchas de las aplicaciones con interfaces ricas que actualmente tenemos que desarrollar requieren actualizaciones automáticas, es decir, el servidor envía información al cliente, y éste actualiza los datos de su interfaz de forma automática. Este tipo de actualizaciones actualmente suelen llevarse a cabo a través de AJAX, y con AJAX podemos utilizar dos sistemas de comunicación diferente, pull y push.

Mediante pull, es el cliente quien solicita información al servidor, que puede estar programado para esta solicitud la realice cada cierto periodo de tiempo. Mediante push, el cliente se subscribe a un canal, y cada vez que éste se actualiza el servidor envía automáticamente la información a todos los clientes subscritos al canal.

Con este post quiero demostrar cuán sencillo y rápido es desarrollar un sistema con comunicación AJAX Push y con Grails. Una aplicación de chat nos sirve perfectamente para este cometido, ya que un cliente envía información al servidor y éste automáticamente envía esa misma información a cada uno de los clientes subscritos al canal.

Vamos a ver cómo con unas pocas líneas de Groovy, con el plugin Atmosphere de Grails y con un poco de Javascript podemos crear una aplicación de chat. Toda la documentación del plugin puedes consultarla en la siguiente dirección: https://docs.google.com/View?id=dfdr5d2x_14ccbgm8dm

Una vez creada la aplicación de Grails tenemos que instalar el plugin Atmosphere, que es un framework que nos permite establecer una comunicación Ajax Push:

A continuación creamos un controlador que sólo necesita declarar una closure, en nuestro caso la closure broadcast. El plugin Atmosphere inyecta a todos los controladores de la aplicación el objeto Broadcaster, que como vemos en la aplicación se encarga de difundir un mensaje a todos los clientes subscritos al canal /atmosphere/chat (tan sólo con una línea de código):

Por otra parte, creamos un servicio en el que declaramos una propiedad estática llamada atmosphere, y dos closures onRequest y onStateChange:

Lo importante aquí es saber que cuando algún cliente invoca la closure broadcast del controlador, se desencadena la ejecución de la closure onStateChange del servicio. Como vemos, esta closure llama el método javascript callback del cliente, que a continuación veremos cómo se define.

Finalmente, tenemos la siguiente página gsp, que es la que mediante Javascript envía la información al servidor y procesa la información recibida por el servidor:

En esta página son tres las cosas que tenemos que tener en cuenta:

  • Al cargarse la página el cliente se conecta automática al canal /atmosphere/chat:

  • Al pulsar el botón Enviar, mediante Javascript se genera un mensaje JSON (que contiene el usuario que ha escrito el mensaje, así como el mensaje en sí), y se envía el JSON al servidor:

  • Finalmente, cuando el servidor envía información al cliente, se ejecuta la función Javascript callback, que proceso el mensaje JSON y lo agrega al div llamado chat.

Esta aplicación es extremadamente sencilla y en ningún momento pretende explotar todas las funcionalidades que el plugin ofrece, pero sirve para poder ver el tipo de aplicaciones que pueden desarrollarse con este framework.

  1. […] Desarrollo de un Chat con Grails y Ajax Push […]

  2. Efren dice:

    Vi el demo del chat pero esta extremadamente lento… se supone que tendria q ser rapido y eficiente. xq pasa eso?

  3. jl_monteagudo dice:

    Hola Efren,

    Lo acabo de probar en mi red local con dos ordenadores diferentes y me ha funcionado correctamente. Lo he probado con Chrome y con Firefox. ¿Qué navegadores utilizas tú?

  4. Alejandro dice:

    De antemano muchas gracias es lo que estaba buscando pero creo que no sirve para todos los navegadores en especifico Chrome, intente debugearlo rapidamente pero pude ubicar el error.

    Intentare mejorar en todo caso

  5. Paola dice:

    Soy nueva en Grails…lo he provado en Grails version 2.2.0 y no funciona el index.gsp marca error en toda la parte del script … y no sé el por qué, actualize el plugin, será por eso?

  6. Uriel Leal dice:

    Hola he visto tu aplicacion y se me hace muy interesante, ya lo he implementado y todo va muy bien silo tengo un a pregunta.
    ¿Como se puede crear salas de conversacion?
    ya que solo esta una sala general.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Back to top