[APORTE]:Chat básico con ajax(long polling)

patkoala · #1 (**permalink**) 17/11/2011, 13:52

Para los que no sepan que es long polling:
Long polling:http://es.wikipedia.org/wiki/Tecnolo...h#Long_polling
Polling:http://es.wikipedia.org/wiki/Polling
El chat constará de 4 archivos:
index.html

Código HTML:

<html><head><script type="text/javascript">
nombre = prompt("Introduce tu nombre");
function xhr(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
} else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function mostrar(){
var peticion = xhr();
peticion.onreadystatechange = function () {
if(peticion.readyState == 4){
document.getElementById('cont').innerHTML += "<br/>" + peticion.responseText;
setTimeout("mostrar()",1);
}
}
peticion.open("POST","index.php",true);
peticion.send(null);
}
function crearquery(){
var texto = document.getElementsByTagName('textarea')[0].value;
var salida = "value=" + encodeURIComponent(texto) + "&nom=" + encodeURIComponent(nombre);
return salida;
}
function cambia(){
var peticion = xhr();
peticion.open("POST","introducir.php",true);
peticion.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var query = crearquery();
peticion.send(query);
}
window.onload = mostrar;
</script>
</head><body><textarea></textarea><button onclick="cambia();">Enviar</button><div id="cont"></div></body></html>

index.php

Código PHP:

  <?php 
set_time_limit(0); 
$fpa = fopen("content.txt","r"); 
$fpa = fgets($fpa); 
while(1){ 
$fp = fopen("content.txt","r"); 
$fp = fgets($fp); 
if($fp != $fpa){ 
echo $fp; 
break; 
} 
sleep(1); 
} 
?>

introducir.php

Código PHP:

  <?php 
$fp = fopen("content.txt","w"); 
$valor = $_POST['value']; 
$nombre = $_POST['nom']; 
$valor = "<b>".$nombre."</b> : ".$valor; 
fwrite($fp,$valor); 
?>

Y por último, un archivo llamado content.txt que estará vacio.

Próximamente intentaré explicar su funcionamiento, tengo un poco de prisas

patkoala · #2 (**permalink**) 18/11/2011, 08:42

Explico el funcionamiento.
El archivo index.html envia una petición al archivo index.php.
El archivo index.php no termina de cargar ya que tiene un bucle infinito(además, nunca da error de tiempo de ejecucion gracias a set_time_limit), y en cada ciclo del bucle comprueba si el archivo context.txt ha cambiado su contenido(comparandolo con como estaba al principio).

Cita:

<?php
set_time_limit(0);
$fpa = fopen("content.txt","r");
$fpa = fgets($fpa);
while(1){
$fp = fopen("content.txt","r");
$fp = fgets($fp);
if($fp != $fpa){
echo $fp;
break;
}
sleep(1);
}
?>

Si el contenido cambia, muestra el contenido y termina el bucle.
En ese momento la peticion cambia su readyState a 4, y se ejecuta lo siguiente:

Cita:

document.getElementById('cont').innerHTML += "<br/>" + peticion.responseText;
setTimeout("mostrar()",1);

Que incluye en el div la respuesta del servidor, y acto seguido, envia otra petición igual a la primera.
Por otra parte la funcion cambia() sólo llama a un script que actualiza el contenido de context.txt con los parametros enviados(nombre y texto).

Cita:

function cambia(){
var peticion = xhr();
peticion.open("POST","introducir.php",true);
peticion.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var query = crearquery();
peticion.send(query);
}

Y, eso es básicamente long-polling.
También podeis probar a editar externamente el archivo content.txt y comprobareis que lo introducido se añade a index.html
Buff, es más fácil aprender que enseñar

victorfz · #3 (**permalink**) 03/03/2012, 10:11

Lo estoy viendo y me gusta muchismo más que otros que he visto por la red.
Seguramente para mi uso concreto tendré que sustituir el fopen por consultas a mysql pero como base este código me parece super sencillo y eficiente.
Un saludo.

clipan · #4 (**permalink**) 03/03/2012, 10:59

me encanta esto, muy bueno

tendrías un ejemplo con consultas a la base de datos

victorfz · #5 (**permalink**) 04/03/2012, 09:30

Hola en mi servidor local bajo Windows me funciona súper OK pero en el hosting lnux funciona bien hasta que lleva unos 20 min el chat abierto, me da este error.
El hosting es de pago y bueno.
¿Alguna sugerencia?
Un saludo.

<<
ERROR
The requested URL could not be retrieved

While trying to retrieve the URL: http://midominio.tk/pruebas/chat1/chat1.php

The following error was encountered:

Zero Sized Reply

Squid did not receive any data for this request.

Your cache administrator is webmaster.
>>

victorfz · #6 (**permalink**) 04/03/2012, 09:33

Cita:

Iniciado por victorfz

Hola en mi servidor local bajo Windows me funciona súper OK pero en el hosting lnux funciona bien hasta que lleva unos 20 min el chat abierto, me da este error.
El hosting es de pago y bueno.
¿Alguna sugerencia?
Un saludo.

<<
ERROR
The requested URL could not be retrieved

While trying to retrieve the URL: http://midominio.tk/pruebas/chat1/chat1.php

The following error was encountered:

Zero Sized Reply

Squid did not receive any data for this request.

Your cache administrator is webmaster.
>>

Solo decir que ya he probado el aumentar el tiempo sleep(1); hasta 20 segudos pero el fallo me lo sigue dando.
Un saludo.

Panino5001 · #7 (**permalink**) 04/03/2012, 10:21

Mi sugerencia es que tomes ese tipo de scripts (y otros semejantes: http://www.disegnocentell.com.ar/notas2.php?id=240) como experimentos interesantes, pero no para usar en casos reales sobre todo en Apache, si es que esperás muchos usuarios. Lo más probable es que estés sufriendo un mecanismo de seguridad colocado por tu administrador de hosting para evitar fugas de recursos.
Para ese tipo de cosas lo que debés usar es servidores de sockets o alguna alternativa moderna como Node.js

patkoala · #8 (**permalink**) 06/03/2012, 10:15

Cita:

Iniciado por Panino5001

Mi sugerencia es que tomes ese tipo de scripts (y otros semejantes: http://www.disegnocentell.com.ar/notas2.php?id=240) como experimentos interesantes, pero no para usar en casos reales sobre todo en Apache, si es que esperás muchos usuarios. Lo más probable es que estés sufriendo un mecanismo de seguridad colocado por tu administrador de hosting para evitar fugas de recursos.
Para ese tipo de cosas lo que debés usar es servidores de sockets o alguna alternativa moderna como Node.js

Exacto, debe ser sólo un experimento.
Sobretodo, porque tiene evidentes fallos de seguridad.
Muchas gracias a todos :)

victorfz · #9 (**permalink**) 06/03/2012, 11:16

Alguien conoce algún ejemplo muy básico que pueda usar para explotación en Intranet para un máximo de 20 usuarios de forma simultanea??
El tema de seguridad para mi no es primorcial ya que es para un entorno ya seguro.
De todas formas sustituyendo el bucle infinito que muestro abajo que es lo que me da problemas con el servidor por un setInterval() de javascript como lo veís???

Código PHP:

  <?php
set_time_limit(0);
$fpa = fopen("content.txt","r");
$fpa = fgets($fpa);
while(1){
$fp = fopen("content.txt","r");
$fp = fgets($fp);
if($fp != $fpa){
echo $fp;
break;
}
sleep(1);
}
?>

patkoala · #10 (**permalink**) 07/03/2012, 09:54

Cita:

Iniciado por victorfz

De todas formas sustituyendo el bucle infinito que muestro abajo que es lo que me da problemas con el servidor por un setInterval() de javascript como lo veís???

Funcionar funcionaría, pero eso ya es polling

eloyquispe · #11 (**permalink**) 27/06/2012, 10:52

Hola buen día, he estado probando este chat, lo implemente con JSP y java, ya lo tengo terminado y funciona correctamente en chrome y mozilla, pero en explorer (probe en las versiones 9.0.8112.16421 y el 8.0.7600 ) observo el siguiente comportamiento:

el bucle infinito del archivo INDEX, es invocado paulatinamente por: if(peticion.readyState == 4), como si el archivo de texto content.txt, cambiara, sin embargo el archivo content.txt, no ha cambiado, pareciera que : readyState == 4 , no estaria funcionando correctamente.

Por favor, si alguien puede ayudarme, gracias

patkoala · #12 (**permalink**) 28/06/2012, 11:33

Creo que no he entendido del todo la duda.
Entendí que dices que readyState no funciono.
Probé de nuevo el script y en Internet Explorer funciona.
Puedes probar a ejecutar directamente el script index.php para comprobar si hay algún error, ya que puede ser que si no es un servidor local no te permita un bucle "semi-infinito"

eloyquispe · #13 (**permalink**) 28/06/2012, 18:52

Bueno en primer lugar gracias por responder, efectivamente es un poco complicado explicar el problema que tengo, pero voy a tratar de explicarlo mejor. Por otro lado este chat lo he implementado con: RESIN, JSP y java, por lo que he renombrado el index.php como index.jps y el introducir.php como introducir.jsp

El error como tal no es de sintaxis, y tienes razón si funciona el index.php, como dije anteriormente en mozilla y en chrome me funciona correctamente, en explorer también funciona, con la excepcion de que algunas veces los mensajes enviados no se visualizan en el area de mensajes, por esta razón, estube buscando cual puede ser la razon, y creo que es esta que detallo a continuación:

1.- Cuando inicio el chat, se activa el while infinito del index.jsp, la salida la muestro en la consola del RESIN:

2.- Luego de transcurrido unos 10 segundos, sin que se haya mandado ningun mensaje, tampoco se cambio el archivo de texto content.txt, sucede lo siguiente, como dije no he mandado ningun mensaje tampoco he cambiado content.txt, el codigo if(peticion.readyState == 4) detecta como si hubiera un cambio en content.txt, es decir se pone a valor 4 y se invoca nuevamente al index.jsp, y se generan 2 instancias del while infinito, como se muestra en la imagen:

Despues de cierto tiempo, codigo if(peticion.readyState == 4), detecta como si hubiera un cambio en content.txt, y nuevamente invoca otro while y asi susecivamente.

Patkoala, de antemano agradezco tu ayuda, y solo comentarte, este chat con las bases que tu publicaste lo tengo terminado y ya lo estaba utilizando en mi sitio web gastodiario.com, para brindar soporte técnico en linea, pero como en IE todavia no funciona del todo bien lo he suspendido y bueno algun rato cuando tengas tiempo, podemos coordinar para que te muestre el chat terminado.

eagle_knight · #14 (**permalink**) 29/03/2013, 19:44

POR FAVOR!!!, alguien podria traducir de php a jsp?....