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.
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:
<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);
};
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:
| Última actualización | 2012-08-15 2:46 AM (Europe/Madrid) |
| Data de creación | 2010-01-04 11:00 PM (Europe/Madrid) |
| Server-sent DOM event en Opera | |
| php javascript html5 operabrowser | |