Banner

Ultima revisión 26/01/2013

HTML5: Eventos Server - Sent

Un evento Server Sent se define cuando una página web se actualiza automáticamente desde un servidor y queremos que los Clientes se actualicen sin refrescar. Puede resultar un poco raro ya que estamos acostumbrados a ver HTTP como un protocolo de petición-respuesta, lo que significa que el Cliente envía una solicitud HTTP y espera hasta que la respuesta HTTP que se recibe.

Por lo tanto, normalmente el servidor no puede comunicarse con el cliente a menos que sea solicitado con anterioridad. HTML5 tiene definida una API para abrir una conexión HTTP para recibir notificaciones push desde un servidor.

Esto también fue posible antes, pero la página web tendría que preguntar si hay actualizaciones disponibles. Con los eventos Server Sent, las actualizaciones vienen automáticamente.

Ejemplos: Facebook / Twitter actualizaciones, actualizaciones de precios de acciones, noticias, resultados deportivos, etc

Server Sent está soportado por la inmensa mayoría de los navegadores excepto Internet Explorer (como siempre ayudando al personal).

Comprobar si El Navegador soporta Server Sent

Sólo hay que preguntar por el typeof de EventSource y según la respuesta actuamos.

if(typeof(EventSource)!=="undefined")
  {
  // Yes! Server-sent events support!
  // Some code.....
  }
else
  {
  // Sorry! No server-sent events support..
  }

Y cómo se hace para recibir las notificaciones

Mediante el objeto EventSource

var source=new EventSource("time.php");
source.onmessage=function(event){
    document.getElementById("result").innerHTML+=event.data + "
"; };

Primero creamos un nuevo objeto EventSource y especificamos la dirección URL de la página que envía las actualizaciones (en este ejemplo "time.php"). Cada vez que se recibe una actualización, se produce un evento onmessage y, cuando este sucede, se insertan los datos nuevos en el elemento apuntado con el id = "result".

La sintaxis de los eventos del lado del servidor es muy simple. Estableciendo las cabeceras Content-Type a text / event-stream y poco más se puede comenzar a enviar flujos de eventos.

El Fichero time.php

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>