ejemplo de Comet con PHP: long polling

ZiTAL · #1 (**permalink**) 20/03/2009, 06:00

Hola a todos, hace unos días vi el post de Panino50001 sobre su chatino y me puse a la obra para hacer un ejemplo simple. Como bien dice Panino50001 no es un COMET total, ya que desde las misma llamada no puede hacer varias salidas por pantalla, me explico. Yo pensaba que se trataba de hacer una llamada y que esa misma llamada te devolviese los valores cuando hiciese falta, pero la cuestión es que una llamada solo devuelve un resultado, la cuestion es que con este pseudo-comet lo único que sabemos es CUANDO ha cambiado la cosa en el servidor por lo tanto si queremos que el COMET sea continuo, deberemos hacer la llamada a la misma función una y otra vez. Veamos un ejemplo:
- Tengo un fichero: contenido.txt en el cual si el contenido no esta vacío me lo muestre por pantalla:

contenido.txt -> Un fichero vacio

index.php

Código PHP:

  <?php

if($_POST)  

{

    set_time_limit(0); // para quitar el timeout    

    header("Edge-control: no-store");

    $content = trim(file_get_contents('contenido.txt'));

    while($content=='')

        $content = trim(file_get_contents('content.txt'));

    echo $content;

    exit();

}

?>

Código HTML:

<html>
<head>	
</head>
<body>
	<div id="content">Cargando...</div>
<script type="text/javascript" src="comet.js"></script>
</body>
</html>

comet.js

Código javascript:

Ver originalvar xmlhttp = function()
    {
        var a;try{a = new XMLHttpRequest();}
        catch(e){try{a = new ActiveXObject('Msxml2.XMLHTTP');}
        catch(e){try{a = new ActiveXObject('Microsoft.XMLHTTP');}
        catch(e){alert('Your browser doesn\'t support ajax');a=false;}
        }}return a;
    };  
    window.onload = function()
    {
        var a = new comet();
    };  
    var comet = function()
    {
        var a = new xmlhttp();
        a.open('post',window.location+"?"+Math.random()+"="+Math.random(), true);
        a.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        a.onreadystatechange = function()
        {
            if(a.readyState == 4)
            {
                document.getElementById('content').innerHTML = a.responseText;
            }
        };
        a.send('algo=algo');                
    };

y cargamos la página, si tenemos firebug en firefox nos mostrará que la petición ajax está esperando una respuesta.

Ahora abrimos el fichero contenido.txt y escribimos algo.

Veremos como en div 'content' ha cargado lo que hemos guardado en el fichero :)

Panino5001 · #2 (**permalink**) 20/03/2009, 07:55

Interesante! Qué hace Edge-control? Busqué pero no encontré nada clarificador acerca de su funcionalidad. (Me revaluaste

, soy apenas 5001)

ZiTAL · #3 (**permalink**) 20/03/2009, 08:30

Es lo que usamos para saltarnos la cache de akamai, creo que no deja guardarlo en cache ;)

Dentro de poco seguimos con este interesante post, ya tengo la segunda parte preparada:

Como seguir con la llamada después de el primer resultado

Gracias por la información Panino5001

ZiTAL · #4 (**permalink**) 24/03/2009, 03:09

Bueno seguimos con esto, ahora haremos que haga recursivamente con retardos de tiempo, porque? Porque sino se bloquearia el navegador, el servidor o los 2 ;):

Código javascript:

Ver originalvar xmlhttp = function()
    {
        var a;try{a = new XMLHttpRequest();}
        catch(e){try{a = new ActiveXObject('Msxml2.XMLHTTP');}
        catch(e){try{a = new ActiveXObject('Microsoft.XMLHTTP');}
        catch(e){alert('Your browser doesn\'t support ajax');a=false;}
        }}return a;
    };  
    window.onload = function()
    {
        var a = new comet();
    };  
    var comet = function()
    {
        var a = new xmlhttp();
        a.open('post',window.location+"?"+Math.random()+"="+Math.random(), true);
        a.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        a.onreadystatechange = function()
        {
            if(a.readyState == 4)
            {
                document.getElementById('content').innerHTML = a.responseText;
                window.setTimeout(function(){
                    a = new comet();                    
                },1000);
                
            }
        };
        a.send('algo=algo');                
    };

Solamente con añadir un timeout ya conseguimos ese efecto, en este caso hemos puesto como parametro 1000 ya que el valor hay que ponerlo en milisegundos ;)

Ahora de la parte de PHP:

Código PHP:

  <?php

if($_POST)  

{

    set_time_limit(0);    

    header("Edge-control: no-store");

    sleep(1);

    $content = trim(file_get_contents('content.txt'));

    while($content=='')

    {

        sleep(1);

        $content = trim(file_get_contents('content.txt'));

    }

    echo $content;

    exit();

}

?>

con sleep conseguimos parar el tiempo en segundos antes de proseguir con la ejecución, también tenemos su equivalente en microsegundos que es el usleep, en nuestro caso:

Código PHP:

  <?php

if($_POST)  

{

    set_time_limit(0);    

    header("Edge-control: no-store");

    usleep(1000);

    $content = trim(file_get_contents('content.txt'));

    while($content=='')

    {

        usleep(1000);

        $content = trim(file_get_contents('content.txt'));

    }

    echo $content;

    exit();

}

?>

eulerss · #5 (**permalink**) 24/03/2009, 10:44

wow, excelente aporte, esperamos ya la tercera parte (si es que la hay)

Cita:

(Me revaluaste , soy apenas 5001)

ZiTAL · #6 (**permalink**) 24/03/2009, 14:04

Muchas gracias ;) creo que ya ha quedado claro cual es el concepto del COMET o pseudo-comet o como le querais llamar: Tener una petición abierta hasta que nos llegue el resultado deseado, al contrario de preguntar todo el rato si el resultado deseado ha llegado (modo Homer ;)). A ver si hago un ejemplo más practico que la chorrada que he puesto antes;)

rsornes · #7 (**permalink**) 30/03/2009, 16:49

Zital una pregunta, este ejemplo no es lo mismo que hacer un iframe escondido que este preguntando cada "n" segundos si hay actualización y si encuentra una actualización esta se muestra, o hacerlo con un setInterval() que llame a una funcion y esta muestre algo cuando lo consiga.

Si ese codigo que colocas es lo mismo que lo que yo digo entonces es realmente posible hacer que el cliente se actualice solo cuando el servidor consigue una actualización y este se la envia sin que el cliente este preguntando y preguntado si hay actualizacion.

Saludos

Panino5001 · #8 (**permalink**) 30/03/2009, 17:34

No es lo mismo. Justamente lo que estás describiendo se conoce como polling. Lo descrito arriba es diferente porque no se hacen requests a intervalos regulares al servidor. En lugar de eso lo que se hace es abrir una conexión de larga duración con el servidor, que sólo es interumpida por el servidor (cuando este detecta un cambio de estado) y luego es reiniciada en el cliente cuando se detecta la interrupción de esa conexión. Si probás el código de esta faq y lo mirás en el menú red de firebug, vas a ver que, a diferencia de lo que sucede en el esquema de polling, donde contínuamente hay nuevas entradas, en este esquema sólo hay nuevas entradas cuando hay algún nuevo mensaje para mostrar.

ZiTAL · #9 (**permalink**) 31/03/2009, 01:50

creo que Panino5001 te ha respondido mejor de lo que hubiese hecho yo ;)

rsornes · #10 (**permalink**) 22/05/2009, 11:07

Ok, ahora otra inquietud, este esjemplo es con un txt pero como seria implementar este codigo con una BD, es decir, al cambiar x valor en una tabla en una BD.

Pregunto esto porque veo que el cuando se abre la conexion de larga duración en el servidor este va a consultar "n" veces la BD para ver si ocurrio algun cambio. Entonces estaremos bombardenado el servidor y la BD con consultas.

¿Esto sería la manera adecuada de hacerlo o lo estoy viendo equivocadamente?

Saludos

ZiTAL · #11 (**permalink**) 22/05/2009, 11:15

El truco está en el:

Código PHP:

  sleep

que hace un parón de x segundos para que lo vuelva a intentar. Por lo tanto ese bombardeo lo configuras tú.

La cuestión es que tipo de aplicación quieres hacer, por ejemplo si quieres hacer un chat, creo que es el modo apropiado.

chevito · #12 (**permalink**) 05/09/2009, 19:10

Hola Necesito Saber Si Ajuro tengo Que Usar Prototype, O Puedo Usar Simplemente Ajax, Me Refiero Al Ajax Normal, Sin la Clase Prototype! Gracias!

ZiTAL · #13 (**permalink**) 06/09/2009, 02:05

aquí no se usa prototype, se usa ajax normal

chevito · #14 (**permalink**) 07/09/2009, 21:08

Hola, Tengo Una Duda Como Haria! Para! Que Los Datos Del Chat No se Pierdan al Recargar O a darle Sig o atras a la Pagina!, Asi Como facebook, Con Un Iframe!?..Me Refiero a Q No Se Pierdan Las Ventanas De Las Personas Con Q Se Esta ChateandO..Espero Q Me Puedan Aclarar Esa Duda!, Pense Q Con Sesiones!, Bueno Espero Q Me Puedan ayudar y Darme Un Ejemplo!

AndyFG · #15 (**permalink**) 09/10/2010, 21:32

Me gustaria tener una idea de como implementa Comet pero no la variante long polling sino la streaming, si pueden ayudenme con eso

jabaruben · #16 (**permalink**) 18/04/2011, 01:56

Chicos, lo siento pero no veo que este ejemplo funcione correctamente. Lo he probado en mi servidor, y en lugar de dejar una peticion viva, hace peticiones que mueren, como un pooling normal......

Podriais confirmarme que el ejemplo esta mal? O he hecho algo mal yo???

Un saludo

clipan · #17 (**permalink**) 26/03/2012, 11:51

tengo una duda, como puedo hacer que cuando se envié o se recibe un mensaje la barra de desplazamiento baje al mensaje recibido

intente lo siguiente

Código Javascript:

Ver originaldocument.getElementById('content').scrollTop = document.getElementById('content').scrollHeight;

pero el problema que tengo es que esta continuamente bajando y no deja ver todo el resto de la conversación

agradezco alguna ayuda.