Logo de islavisual
Logo de islavisual IslaVisual
imagen de sección

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();
?>

Sobre el autor

Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.