Comet paso a paso: ‘Hola Mundo’

Ya hace tiempo hablamos de Comet, la siguiente etapa de AJAX, y al igual que hicimos como AJAX, vamos a intentar introducirnos en esta técnica y aprender a utilizarla.

Al ser algo más difícil que AJAX, vamos a empezar con el ejemplo de ‘Hola Mundo’, pero solo será válido para Firefox. ¿Por qué?, porque son los únicos quienes para mí implementan la posibilidad real de esta técnica (si alguien piensa lo contrario, por favor, me lo comenta).

Me explico, Comet se basa en que el servidor te envia datos aunque tú no los pidas (HTTP Push), tú haces una llamada, el canal se queda abierto y el servidor te va mandando información. En Firefox se implementa usando Content-type multipart/x-mixed-replace e indicando que el canal que se abre es multipart, o lo que es lo mismo, que el servidor nos va a estar devolviendo el resultado en partes (no confundamos con vaciar el buffer de salida).

Con otros navegadores esta posibilidad no existe, y lo que se hace es abrir un canal XMLHttpRequest, durante cierto tiempo e ir comprobando a cada rato lo que nos llega del servidor. Para hacer esto, no es necesario AJAX, ni XMLHttpRequest, ni nada nuevo, simplemente un iframe y una función javascript que te realice llamadas cada cierto tiempo. Y ¿qué pasa si el servidor tarda más tiempo en devolvernos la salida de que tenemos la conexión abierta?, esto puede ser solucionable, pero también puede ser un problema.

¿Qué se distingue una llamada Comet a una AJAX en Javascript?, tan solo en que hay que indicar que va a recibir varios objetos del servidor, para eso se usará el atributo multipart:

function holaMundo () {
var obj = document.getElementById("texto");
obj.innerHTML = "";
comet = cometobj();
comet.multipart = true;
comet.open("GET", "holamundo.php", true);
comet.onreadystatechange=function() {
if (comet.readyState==4) {
obj.innerHTML += comet.responseText;
}
}
comet.send(null);
}

Hay que indicar que es multipart antes de que se abra la conexión (open) para indicar que es multipart. En el ejemplo vamos a tener un elemento p, el cual modificaremos el contenido (innerHTML) añadiendo lo que nos vaya devolviendo el servidor.

El script que devolvemos solo tiene la particularidad de que debemos indicar el Content-type que hemos dicho antes y luego dividir la salida como si fueran distintas salidas independientes. Para indicar como se divide la salida, tenemos que poner un limitador (boundary) y cada parte de la salida estará separada por ese limitador. Si queremos devolver “Hola Mundo” letra a letra, la salida sería algo parecido:

Content-type: multipart/x-mixed-replace;boundary="limite01234"
--limite01234
Content-type: text/plain
H
--limite01234
Content-type: text/plain
o
....
--limite01234
Content-type: text/plain
d
--limite01234
Content-type: text/plain
o
--limite01234--

Con boundary=”limite01234″ indicamos cual es el limitador y con –limite01234 separamos cada una de las partes. Al final tiene que ir el limitador seguido por “—” para indicar que es el último que se envía.

El código PHP necesario para devolver “Hola Mundo” letra a letra sería el siguiente:

<?php
header('Content-type: multipart/x-mixed-replace;boundary="limite01234"');
$texto = "Hola Mundo";
echo "--limite01234\n";
for ($i = 0; $i<strlen($texto); $i++) {
echo "Content-type: text/plain\n\n";
echo $texto[$i]."\n";
echo "--limite01234\n";
flush();
sleep(1);
}
echo "--limite01234--\n";
?>

Demo (Actualización: he quitado la demo porque como tiene un sleep para que se note el efecto de comunicación, la cosa no iba muy fina)

Podéis bajaros el código aquí