¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

Esta va a ser la entrada más compleja hasta ahora sobre el curso de javascript, vamos a crear una sencilla aplicación de pujas en vivo haciendo uso de EventSource de HTML5.

Debemos tener claro que a estas alturas y para hacer cosas más complejas debemos trabajar en el servidor, he optado por utilizar php ya que es el lenguaje más utilizado en el blog.

EventSource proporciona respuestas del servidor al cliente cada cierto tiempo.

Nuestra aplicación tendrá una única página donde veremos la puja actual con el importe pujado, el usuario y el tiempo que resta para que finalice.

Las pujas serán almacenadas en una base de datos mysql y a través de EventSource iremos informando a todos los clientes cada segundo sobre el estado de la puja.

Aplicación de pujas en vivo

Ese será el aspecto final de nuestra página de pujas, y cada usuario podrá pujar poniendo su nombre y la cantidad que quiera pujar, una vez lo haga, todos los usuarios verán en vivo la nueva puja.

El formulario lo he cogido de bootsnipp, siempre que podamos ahorrar trabajo mejor hacerlo.

Lo primero de todo será añadir bootstrap a través de bower con el siguiente comando desde la terminal.


Importa el siguiente script a tu servidor mysql ya que contiene la base de datos pujas y la tabla artículos con información para el ejemplo.


Ahora que sabemos lo que vamos a hacer y tenemos nuestra base de datos podemos empezar, crea un archivo llamado index.php y añade el siguiente código, el cuál tiene el formulario y las dependencias.


Si te fijas en el formulario hay un campo oculto con una variable $_GET llamada id, nuestra página obtendrá la puja actual a través de esa url, es decir, para ver la puja con id 1 deberemos acceder a (en mi caso) http://localhost/javascript/pujas/?id=1.

Ya tenemos el archivo principal de nuestra aplicación, si te fijas, estamos incluyendo un archivo llamado pujas.js, este archivo contiene todo el código javascript que necesitamos, así que crea el archivo y añade el siguiente código.


Para nosotros lo más importante y nuevo de este script es la forma de crear un objeto EventSource y cómo utilizarlo, el resto está explicado en el blog y resto del curso. De todas formas he comentado el código para que sea más sencillo de seguir.

Como vamos a tener una conexión con nuestra base de datos y vamos a utilizar más de una vez, he creado un archivo llamado helper.php donde se incluyen varias funciones que se van a repetir, así que crea este archivo y añade el siguiente código.


Cómo ya he dicho, simplemente son funciones que se repiten, lo importante son los dos archivos que restan, el primero que vamos a tratar va a ser pujas.php, este archivo es el que hace el envío del servidor al cliente a través de EventSource obteniendo la información de la base de datos, así que crea el archivo pujas.php y añade el siguiente código.


Si la puja ha terminado devolveremos empty a través de la clave data de nuestro EventSource, en otro caso devolveremos la cadena con la información actualizada.
La clave retry es muy importante ya que es cómo le decimos cada cuanto tiempo queremos que devuelva una respuesta al cliente, en nuestro caso cada segundo.

Ahora crea el archivo procesarPuja.php y añade el siguiente código, aquí simplemente guardaremos la información del formulario de la página principal para actualizar las pujas.


Ahora ya tenemos todo el código, cómo puedes ver simplemente actualizamos la puja con los nuevos datos, automáticamente la información le aparecerá a todos los clientes conectados gracias a EventSource.

Y eso es todo lo que necesitamos saber para empezar a utilizar EventSource con HTML5 y javascript para así crear aplicaciones más complejas.

Dejo los archivos para que puedas descargar el ejemplo y jugar un poco con la aplicación.

Descargar ejemplo de pujas