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.