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:

grails install-plugin atmosphere

1	grails install-plugin atmosphere

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):

class ChatController {

    def index = { }

    def broadcast = {
		broadcaster['/atmosphere/chat'].broadcast(params.data)
	}

}

class ChatController {

def index = { }

def broadcast = {

broadcaster['/atmosphere/chat'].broadcast(params.data)

}

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

class ChatService {

	static transactional = false
	static atmosphere = [mapping: '/atmosphere/chat']

	def onRequest = { event -&gt;
		event.suspend()
	}

	def onStateChange = { event -&gt;

		if (!event.message) return

		event.resource.response.writer.with {
			write "&lt;script&gt;parent.callback('${event.message}');&lt;/script&gt;"
			flush()
		}
	}

}

class ChatService {

static transactional = false

static atmosphere = [mapping: '/atmosphere/chat']

def onRequest = { event ->

event.suspend()

}

def onStateChange = { event ->

if (!event.message) return

event.resource.response.writer.with {

write "<script>parent.callback('${event.message}');</script>"

flush()

}

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:

&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Chat - jlmonteagudo&lt;/title&gt;
    &lt;meta name="layout" content="main" /&gt;

   	&lt;link rel="stylesheet" href="${resource(dir:'css',file:'chat.css')}" type="text/css" /&gt;

	&lt;atmosphere:resources/&gt;
	&lt;script type="text/javascript"&gt;
		$(function(){

			function callback(response) {
				if (response.status == 200) {
					var data = response.responseBody;
					if (data.length &gt; 0) {
						var mensajeData = $.parseJSON(data);
						var chatValue = $('#chat').html();

						chatValue += "&lt;span class='chatUser'&gt;" + mensajeData.usuario + " dice:&lt;/span&gt; " + mensajeData.mensaje + "&lt;br/&gt;";
						$('#chat').html(chatValue);
						$("#chat").attr({ scrollTop: $("#chat").attr("scrollHeight") });
					}
				}
            		}

			$.atmosphere.subscribe('${resource(dir: '/atmosphere/chat')}',
				callback,
				$.atmosphere.request = {transport: 'streaming'});

			$('#buttonPost').click(function() {
				var data = '{"usuario":"' + $('#usuario').val() + '", "mensaje":"' + $('#mensaje').val() + '"}';
				$.get('${createLink(action: "broadcast")}?data=' + data);
				$("#mensaje").val('');
				$("#mensaje").focus();
			});

		});
	&lt;/script&gt;
  &lt;/head&gt;

  &lt;body&gt;

  	&lt;div id="pageBody"&gt;

		&lt;div class="contenedor"&gt;

		  	&lt;h3&gt;Sala de Chat - Grails y Ajax Push&lt;/h3&gt;

			&lt;div id="chat"&gt;
			&lt;/div&gt;

			&lt;div id="chatForm"&gt;

				&lt;table cellpadding="0" cellspacing="0"&gt;
					&lt;tr&gt;
						&lt;td&gt;&lt;label&gt;Usuario:&lt;/label&gt;&lt;/td&gt;
						&lt;td&gt;&lt;input type="text" id="usuario" name="usuario" value="" size="10"/&gt;&lt;/td&gt;
					&lt;/tr&gt;
					&lt;tr&gt;
						&lt;td&gt;&lt;label&gt;Mensaje:&lt;/label&gt;&lt;/td&gt;
						&lt;td&gt;
							&lt;input type="text" id="mensaje" name="mensaje" value="" size="40"/&gt;
							&lt;input type="submit" id="buttonPost" name="buttonPost" value="Enviar"/&gt;
						&lt;/td&gt;
					&lt;/tr&gt;
				&lt;/table&gt;
			&lt;/div&gt;

		&lt;/div&gt;

		&lt;div id="chatWarning"&gt;
			(*) Para probar el funcionamiento de la aplicación se recomienda abrir distintos navegadores y enviar mensajes desde cada uno de ellos.
		&lt;/div&gt;

	&lt;/div&gt;

  &lt;/body&gt;

&lt;/html&gt;

<html>

<head>

<title>Chat - jlmonteagudo</title>

<atmosphere:resources/>

$(function(){

function callback(response) {

if (response.status == 200) {

var data = response.responseBody;

if (data.length > 0) {

var mensajeData = $.parseJSON(data);

var chatValue = $('#chat').html();

chatValue += "<span class='chatUser'>" + mensajeData.usuario + " dice:</span> " + mensajeData.mensaje + "<br/>";

$('#chat').html(chatValue);

$("#chat").attr({ scrollTop: $("#chat").attr("scrollHeight") });

}

$.atmosphere.subscribe('${resource(dir: '/atmosphere/chat')}',

callback,

$.atmosphere.request = {transport: 'streaming'});

$('#buttonPost').click(function() {

var data = '{"usuario":"' + $('#usuario').val() + '", "mensaje":"' + $('#mensaje').val() + '"}';

$.get('${createLink(action: "broadcast")}?data=' + data);

$("#mensaje").val('');

$("#mensaje").focus();

});

</script>

</head>

<body>

<h3>Sala de Chat - Grails y Ajax Push</h3>

</div>

<tr>

<td><label>Usuario:</label></td>

</tr>

<tr>

<td><label>Mensaje:</label></td>

<td>

</td>

</tr>

</table>

</div>

(*) Para probar el funcionamiento de la aplicación se recomienda abrir distintos navegadores y enviar mensajes desde cada uno de ellos.

</div>

</body>

</html>

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:

$.atmosphere.subscribe('${resource(dir: '/atmosphere/chat')}',
callback,
$.atmosphere.request = {transport: 'streaming'});

$.atmosphere.subscribe('${resource(dir: '/atmosphere/chat')}',

callback,

$.atmosphere.request = {transport: 'streaming'});

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:

var data = '{"usuario":"' + $('#usuario').val() + '", "mensaje":"' + $('#mensaje').val() + '"}';
$.get('${createLink(action: "broadcast")}?data=' + data);

1 2	var data = '{"usuario":"' + $('#usuario').val() + '", "mensaje":"' + $('#mensaje').val() + '"}'; $.get('${createLink(action: "broadcast")}?data=' + data);

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.

An Army of Solipsists » Blog Archive » This Week in Grails (2011-19) dice:

mayo 15, 2011 a las 17:51

[…] Desarrollo de un Chat con Grails y Ajax Push […]
Efren dice:

octubre 5, 2011 a las 22:14

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

octubre 6, 2011 a las 09:15

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ú?
Alejandro dice:

abril 2, 2012 a las 21:34

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
Paola dice:

enero 26, 2013 a las 22:34

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?
Uriel Leal dice:

abril 2, 2013 a las 19:40

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.
Grails cette semaine (2011-19) – Traduction de l’article original | Blog de Nabil Adouani dice:

abril 4, 2015 a las 23:15

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

Jose Luis Monteagudo

Entradas recientes

Comentarios recientes

Desarrollo de un Chat con Grails y Ajax Push

Deja un comentario Cancelar respuesta

Entradas recientes

Comentarios recientes