jueves, 27 de diciembre de 2012

Pusheame: Notificaciones push al navegador

Esta semana pasada, en Kaleidos hemos celebrado la 3ª Edición de nuestra PiWeek. Aunque en la web viene explicado lo que es, la PiWeek es la Personal Innovation Week y básicamente consiste en que cada 6 meses, "cerramos" una semana para hacer proyectos de innovación. Existen únicamente dos reglas, sólo se permite usar software libre para el desarrollo y al final de la semana hay que hacer una demo funcional.

En esta ocasión he aprovechado la semana para probar los plugins de grails platform-core y events-push de los que ya hablé en mi anterior artículo sobre la Groovy & Grails eXchange.

La idea que hay detrás de "notificaciones push" del servidor al cliente es enviar información en tiempo real al navegador justo en el momento en que se obtiene. Normalmente, cuando desde una aplicación web queremos actualizar un contador, número de mensajes,... lo que solemos hacer es preguntar cada cierto tiempo (10-30 segundos) al servidor si hay mensajes nuevos. Esto implica estar constantemente haciendo llamadas al servidor y además tener un pequeño retraso en la obtención de los mensajes. Con el paradigma push es el servidor el que envía los datos al cliente sin que éste tenga que estar preguntando constantemente.

Mi idea era hacer una pequeña prueba de concepto haciendo push de números aleatorios desde el servidor al cliente. Una vez conseguido, he utilizado el API en tiempo real de Instagram para obtener fotos geolocalizadas e irlas mostrando en un mapa y en un muro.

El resultado es Pusheame, que se encuentra desplegado en http://pusheame.cloudfoundry.com.
Una vez ahí existen dos páginas de pruebas, el mapa, que muestra fotos geoetiquetadas de 28 ciudades de Estado Unidos.



y el muro, que muestra esas mismas fotos en formato muro o album de fotos:



Lo único que tenéis que hacer es abrir el navegador y esperar a que vayan apareciendo las fotos automáticamente.

Si no quieres esperar también puedes ver este pequeño vídeo que he hecho.

Pusheame: Instagram Real-Time pictures from Iván López on Vimeo.


Como indico en la página, para los curiosos, el código fuente del proyecto se encuentra disponible en mi cuenta de github: https://github.com/lmivan/pusheame.

Si perteneces a una empresa tecnológica y te gustaría participar en la próxima edición de la PiWeek, no dudes en contactar con nosotros.
En la primera edición celebrada en diciembre de 2011 sólo participamos Kaleidos. En la segunda edición de julio de 2012 participaron junto con nosotros Secuoyas y Yaco, y finalmente, en esta tercera edición se han apuntado de nuevo Secuoyas y también Wadobo.

3 comentarios:

Andrés Viedma dijo...

Enhorabuena, mola. :-)

No entiendo mucho cómo se pueden enviar eventos push desde un servidor a un cliente web puro y duro (es decir, que no puede abrir sockets en un puerto ni nada así). ¿Se mantiene abierta en el servidor la petición inicial que le hizo el cliente y luego el servidor le va enviando cosas poco a poco según las va generando él?. Y si es así, ¿qué se utiliza entonces, Jsonp, para ejecutar un script en el cliente cada vez que se envía algo?.

Iván dijo...

Hola Andrés,

me alegro de que te guste :-)

El plugin events-push por debajo utiliza la librería Atmosphere que se encarga de negociar cual es el mejor protocolo entre el cliente y el servidor.

En el mejor de los casos elegirá WebSockets, pero si el cliente no lo soporta, irá probando distintas soluciones hasta que alguna sea soportada.

En la web de Atmosphere hay mucha documentación disponible, por ejemplo, una lista de clientes/servidores compatibles con según qué tecnología.

Saludos, Iván.

Andrés Viedma dijo...

Muy interesante, gracias!

Publicar un comentario