Server-sent events, comunicación servidor-cliente en HTTP

Unha das características engadidas a Opera dende a versión 9 son os Server-Sent Events (SSE), os cales forman parte da especificación WHATWG Web Applications 1.0. Facendo uso dos SSE podemos empuxar (push) eventos DOM dende o servidor ao navegador cliente dun xeito continuado.

Lado cliente

Para empregar esta técnica temos que definir unha etiqueta html, event-source, que conterá o atributo src apuntando a unha URL do servidor que será a fonte dos eventos.

 
    <strong>Message from Server:</strong>
    <span id="panel"><!-- os envíos do servidor incluirémolos aquí --></span>
 
    <event-source src="events.php" id="source" />

Dende javascript ligamos o evento server-message (ou o nome de evento que desexemos devolver dende o servidor), a clausura javascript que manexará a resposta. A clausura recibirá coma parámetro un evento como os tratados no DOM, no cal poderemos acceder a propiedade data que no noso caso conterá os datos transmitidos. Coa información do servidor o que facemos é chamar a función updateMessage que incluirá o contido no div con id "panel".

 
    function updateMessages(msg) {
        document.getElementById('panel').innerHTML = msg;
    }
 
    window.onload = function() {
        var oSource = document.getElementById('source');
        oSource.addEventListener('server-message', function(evt) {
            updateMessages(evt.data);
        }, false);
    };

Lado servidor

No lado servidor temos un bucle infinito que sondeará cada segundo se existe unha nova mensaxe gardada en memcached almacenada na clave "message". OLLO: a cabeceira HTTP establecida no comezo do ficheiro que lle indica ao navegador o tipo de comunicación coa que estamos a traballar.

 
header("Content-Type: application/x-dom-event-stream"); 
 
// Connect to memcached server 
$memcache = new Memcache();
$memcache->connect('localhost', 11211) or die ("Could not connect");
 
$previous = null; 
while(true) {    
    // Other application publish on $memcache->set('message', 'texto...');
    $content = $memcache->get('message');
 
    if($content !== $previous) {        
        echo "Event: server-message\n"; // event name is "server-message". You could change it
        echo "data: $content\n\n";          
 
        ob_flush();
        flush(); // clean output buffer
    }
 
    sleep(1); // wait a second
}

Outra cousa a ter en conta é o formato do envío ao navegador. Por unha parte envíase nunha liña o nome do evento Event: server-message e noutra liña van os datos seguidos do texto data: $content.

Agora só queda que dende o servidor se almacene algún valor en memcached coa clave "message". Isto podería ser feito por unha aplicación externa ou, como se pode ver nos pantallazos directamente dende o intérprete de PHP conectándose ao servidor de memcached. Pódese empregar o seguinte código como exemplo:

 
$value = rand();
 
$memcache = new Memcache();
$memcache->connect('localhost', 11211) or die ("Could not connect");
 
$memcache->set('message', $value);

^{Pantallazos do funcionamento de}

Neste exemplo empregóuse memcached para ter a información dispoñible a nivel da aplicación dun modo rápido. Dependendo das funcionalidades que queiramos proporcionar poderemos empregar outras solucións: colas de mensaxes, base de datos, couchdb, apc, ... empuxando a información directamente ao cliente en canto a teñamos dispoñible.

Este tipo de comunicación cliente-servidor-cliente é máis eficiente e sinxela que empregar Ajax ou Comet, o problema radica no soporte proporcionado polos navegadores. Coa progresiva implantación de HTML5 nos navegadores disporemos destas técnicas e outras máis potentes como os WebSockets, localStorage, ...

Referencias:

vifito.eu