lunes, 20 de abril de 2015

sERVER sENT eVENTS

Hola sukarrats... Hace unos días intenté poner la versión web de whatsapp en el iPad y me he encontrado lo siguiente:


Curioso porque el navegador que estaba utilizando era Chrome... He buscado información y me he encontrado con la siguiente noticia de Gizmondo http://es.gizmodo.com/exclusiva-por-que-whatsapp-web-no-esta-en-ios-ni-lo-e-1680954309# donde los ingenieros de iOS en San Francisco responden al problema:

Las APIs de multitarea en iOS sólo nos permiten hacer ciertas funciones concretas cuando una aplicación se encuentra en el background. Para lo que trata de hacer WhatsApp, una aplicación de iOS tendría que ser capaz de mantener una conexión abierta a un servidor, o bien aceptar conexiones entrantes desde el navegador, sin importar que el usuario haya puesto la aplicación en segundo plano.

Ante esto, me pregunto, y qué hay de los Server Side Events de JavaScript, compatibles con el navegador Safari de iOS? http://caniuse.com/#feat=eventsource ... A mi esto me suena a una excusa barata.

Los Server Side Events permiten a una web html5 recibir eventos desde un servidor. Con esto conseguimos que la web que estamos viendo en el navegador pueda interactuar con el servidor y responder dinámicamente a cambios en el servidor sin la interacción del usuario (vamos, sin darle al botón de recargar la página).

En un caso práctico, imaginando una web de noticias, permitiría que nuestra página web nos indicara cuando hay una noticia nueva. Y aplicándolo al desarrollo de aplicaciones híbridas o webapps, implimentar una notificación de aviso.

En cuanto al código, no resulta muy compleja la implementación, veamos:

En el servidor, en nuestro caso PHP, podemos tener un fichero llamado servidor.php con el siguiente código:

header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");

donde hemos dicho que no use el caché y que el tipo de contenido es event-stream.

Luego hacemos un echo de la información que queremos enviar al cliente, precedido por data:

echo "data: Tienes un mensaje nuevo";

finalmente hacemos un flush(); para enviar la información al cliente.


En la parte cliente, usamos JavaScript para implementar el evento que escuche al servidor:

if(typeof(EventSource)!=="undefined" && typeof(source)==="undefined") {
  var source = new EventSource("servidor.php");
  source.onmessage = function(event) {
    // nuestro código donde recuperamos la información enviada por el servidor en event.data
  ...
  };
}

El primer if comprueba si nuestro navegador soporta Server Sent Event.

En un próximo artículo os explicaré como utilizo esta artimaña para implementar avisos en la app que estoy desarrollando. Más información en la página de w3schools, una web muy útil para iniciarse en la programación.

6 comentarios:

Albert dijo...

Tampoco veo que tiene de diferente con el ajax, que se viene haciendo desde tiempos pleistocenicos... No es exclusivo de html5

Albert dijo...

On September 1, 2006, the Opera web browser implemented this new technology in a feature called "Server-Sent Events"

Baterpruf dijo...

Pero al principio dices que según ellos las aplicaciones de iOS no pueden ,cuando están en segundo plano, hacer lo que al final propones. No?

PPi dijo...
Este comentario ha sido eliminado por el autor.
PPi dijo...

La gracia está precisamente en su adopción como estándar por lo que todos los navegadores deben adoptarlo... Ya no se depende del uso o no de Opera para implementarlo. Aunque la compatibilidad para todos los browser puede verse en el link caniuse del artículo.

PPi dijo...

Bater, por eso mismo hago el artículo, para desmentir este supuesto. En breve podré aportar una demo que lo corrobora.