[APORTE] Como hacer tiempo real con AJAX

Kenichi · #1 (**permalink**) 16/08/2010, 11:28

Buenas, hace tiempo estaba buscando una forma de hacer aplicaciones en tiempo real con PHP y JavaScript. Intenté usar AJAX pero la única forma era actualizar cada X segundos.
Y al fin logré hacer tiempo real, esta es la idea de como hacerlo:

Mantener actualizada una conexion AJAX buscando un archivo en el servidor
Si el archivo existe, actualizo la aplicación
Si la el archivo no existe, la aplicación no ha sufrido cambios y no actualizo

Y parece que lo anterior funciona perfecto :D
Aca les dejo los archivos:

servidor.html (el archivo que recibe los mensajes)

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <script type="text/javascript" src="funciones.js"></script>
  <title>Tiempo real AJAX</title>
  </head>
  <body></body>
</html>

funciones.js (la magia :P)

Código Javascript:

Ver original// ################################## AJAX ########################################
  function crearAJAX()
  {
   try 
   {
    var AJAX = new ActiveXObject("Microsoft.XMLHTTP"); 
   }
   catch (e)
   {
    try
    {
     var AJAX = new XMLHttpRequest();
    }
    catch (e)
    {
     alert("El navegador que estas usando no soporta AJAX.\nPor favor, descarga uno mas moderno");
     return false;
    }
   }
   return AJAX;
  }    
  // ########################## Tiempo Real (magia) ##################################
  var ajax;
  var actualizaciones = 0;
  function mantener_actualizado()
  {
   // Crear una conexion nueva
   ajax = crearAJAX();
   // Procesar los cambios de estado
   ajax.onreadystatechange = function()
   {
    if (ajax.readyState == 4)
    {
     // Aca esta la magia de nuevo
     if (ajax.status == 200)
     {
      // Si el archivo existe procesamos los cambios
      hay_cambios(ajax.responseText);
     }
     else
     {
      // Sino esperamos 300 milisegundos y actualizamos nuevamente
      setTimeout("mantener_actualizado()", 300);
     }
    }
   }
   ajax.open('GET','ajax/sin_cambios.txt', true);
   ajax.send(null);
  }
  window.onload = function()
  {
   // Crear al AJAX
   ajax = crearAJAX();
   // Procesar los cambios en la conexion
   ajax.onreadystatechange = function()
   {
    if (ajax.readyState == 4)
    {
     // Aca esta la magia
     if (ajax.status == 200)
     {
      // Si el archivo existe significa que hay cambios
      // Obtenemos los cambios con responseText
      hay_cambios(ajax.responseText);
     }
     else
     {
      // Si todavia no hay cambios esperamos un momento y actualizamos
      // Si o si hay que esperar al menos 300 milisegundos, no se por que
      setTimeout("mantener_actualizado()", 300);
     }
    }
   }
   // Abrimos el archivo que nos dira si hay cambios o no
   ajax.open('GET','ajax/sin_cambios.txt', true);
   ajax.send(null);
   // y... volvemos
   return;
  } 
  function hay_cambios(texto)
  {
   // Creamos una conexion nueva
   ajax = crearAJAX();
   // Hay que cambiar la direccion que se carga
   // para avisar que ya sabemos que hubo cambios
   ajax.onreadystatechange = function()
   {
    if (ajax.readyState == 4 && ajax.status == 200)
    {
     // Cuando ya se borro el archivo ajax/sin_cambios.txt volvemos a actualizar
     setTimeout("mantener_actualizado()", 300);
    }
   }
   // Aca abrimos una URL diferente
   // Este archivo que abrimos borra el ajax/sin_cambios.txt para "avisar" que ya mostramos los cambios
   ajax.open('GET','actualizado.php', true);
   ajax.send(null); 
   // No pasa nada despues se va a ejecutar mantener_actualizado() 
   // y volvera a verificar cambios ;)
   // Modificamos el titulo y el contenido de la pagina
   document.title = 'Tiempo real AJAX (1)';
   document.body.innerHTML = texto;
   // Despues de 3 segundos vuelve a cambiar el titulo por el inicial
   setTimeout(function(){
    document.title = 'Tiempo real AJAX';
   }, 3000);
   // ...y eso es todo
   return;
  }

cliente.php (el archivo que envia los mensajes)

Código PHP:

 
Estas listo para la magia? Escribi un mensaje y pone enviar :P<br>
<form action="" method="post">
 <textarea style="width:300px;height:150px;padding:3px;" name="mensaje"></textarea><br>
 <input type="submit" value="Enviar">
</form>
<?php
if (isset($_POST['mensaje']))
{
 // Recibimos el mensaje
 $mensaje = htmlentities($_POST['mensaje'], ENT_QUOTES);
 echo '<hr>';
 // Y despues intentamos crear el archivo
 $fp = fopen('ajax/sin_cambios.txt','a');
 fputs($fp, $mensaje);
 fclose($fp);
 // Le damos permisos chmod 777 para que luego se pueda borrar
 @chmod('ajax/sin_cambios.txt', 0777);
 // Avisamos que enviamos el mensaje
 echo "Mensaje enviado.";
 // Facil no?
}
?>

actualizado.php (borra los cambios luego de mostrarlos)

Código PHP:

  <?php
// Si el archivo existe lo borra
// Esto es porque ya sabemos que hubo cambios
@unlink('ajax/sin_cambios.txt');
?>

Como ven traté de comentar todo para que puedan entenderlo lo mejor posible.
Pueden ver una demo aqui:
El cliente: http://linkenforos.com.ar/lab/tiempo_real/cliente.php
Servidor: http://linkenforos.com.ar/lab/tiempo_real/servidor.html
Para que puedan verlo bien deben abrir las dos cosas y enviar un mensaje desde el cliente.php, la otra pagina automáticamente lo mostrará

Bugs conocidos:
- Si se esta ejecutando en un servidor NO local, no se pueden enviar varios mensajes
- Debe tomarse al menos 300 milisegundos de espera antes de actualizar los datos, no se por que

Espero que este aporte sea útil.
Saludos.

pato12 · #2 (**permalink**) 17/08/2010, 19:07

Buen post, pero fíjate que no anda bien en google chrome ;)

christianphp · #3 (**permalink**) 20/08/2010, 10:56

Muy buena la magia pero se actualiza al recargar la web , estyo con Firefox pero gran aporte ademas se puede, agregar cosas en un futuro, gran aporte felicidades!

Kenichi · #4 (**permalink**) 20/08/2010, 15:21

Muchas gracias, pero lo de que se actualiza al recargar la web, eso no se por que pasa cuando esta en un servidor, porque cuando esta en localhost con xampp u otro funciona perfecto. Todavia no se que pasa pero igual puede servir ;)

programando · #5 (**permalink**) 14/11/2011, 13:34

hola muy bueno tu aporte pero hay k recargar la pagina para poder ver el mensaje

maycolalvarez · #6 (**permalink**) 14/11/2011, 13:46

Cita:

Iniciado por programando

hola muy bueno tu aporte pero hay k recargar la pagina para poder ver el mensaje

Favor no revivir temas muertos.

PD: la mejor forma de un AJAX en tiempo real es utilizar una técnica tipo Comet, como Ajax Longpolling, APE, o HTML5 WebSockets

matyrock98 · #7 (**permalink**) 25/01/2015, 14:40

Con tu permiso bro, es mi unico mensaje, ojala no te molestes.

Quiero aclararle a todos que hay que recargar la pagina porque el script esta en el header, que se procesa una sola vez, no como el body que puede sufrir constantes cambios y se debera procesar de nuevo...

La solucion al problema de que es necesario recargar la pagina para ver el mensaje, es simplemente poner el script funciones.js en antes de </body>, a mi me funciono incluso en mi web de pruebas online.

Saludos.

PD: Esto tecnicamente no es tiempo real, porque puede demorar hasta 300ms en procesar datos, aunque funciona muy parecido.