Como un anexo a mi reciente tutorial sobre WebSockets en este pequeño artículo quiero explorar una tecnología relacionada que si es posible realizar en una cuenta de Shared Hosting. Me refiero a «Server Sent Events» o SSE.
El modelo es muy sencillo, usando el API nativo de JavaScript en el navegador establecemos una conexión permanente a un recurso en el servidor y este recurso envía mensajes uni-direccionales al cliente de manera no determinística.
En este sitio podemos ver una demostración de esta tecnología funcionando. Combinada con endpoints tipo POST (para que el cliente le envíe mensajes al servidor) es una opción bastante versátil para aplicaciones tipo chat.
https://sse-test.costaricamakers.com
Sesión 1:
Sesión 2:
Nótese que usamos un sub-dominio específico para esta prueba con el fin de evitar problemas generados por los aceleradores (caché) que se usan en sitios de WordPress como el nuestro.
El código del lado del servidor nuestro archivo server.php luce así:
<?php
date_default_timezone_set("America/New_York");
header("Cache-Control: no-cache");
header("Content-Type: text/event-stream");
header("Content-Encoding: none");
$counter = 0;
$randomId = substr(sha1(date(DATE_ISO8601).rand(1,1000000)),0,5);
echo "data: YOUR ID IS $randomId \n\n";
while(true){
$curDate = date(DATE_ISO8601);
$number = rand(1, 10000);
echo "data: $randomId - Message #$counter from server sent on $curDate - RN: $number \n\n";
ob_flush();
flush();
if ( connection_aborted() ) break;
usleep(500000);
$counter ++;
}
Usando unos encabezados particulares para control de caché, para el tipo de contenido como texto/event-stream, generamos un bucle infinito que envía mensajes cada segundo al cliente. Una vez que el sistema detecta que el navegador ha cerrado la conexión con el servidor, sale del bucle.
Del lado del navegador, nuestro archivo index.html luce así:
<html>
<head><meta charset="us-ascii">
<title>SSE TEST</title>
</head>
<body>
<script>
var source = new EventSource("server.php");
source.onmessage = function(event) {
console.log("Event!", event);
document.getElementById("result").innerHTML = event.data + "<br>";
};
</script>
<div id="result">Loading...</div>
</body>
</html>
En el lado del cliente usamos un API nativo de JavaScript denominado EventSource.
Cada vez que nuestro servidor emite un mensaje se ejecuta la función onmessage y actualiza el contenido de nuestra página en el navegador.
El API de Event Source provee un número importante de facilidades. Se menciona sin embargo una limitante sobre la cantidad de conexiones que se pueden mantener abiertas como un máximo de 6.
5,437 total views, 3 views today
Comentarios