Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   Frameworks JS (http://www.forosdelweb.com/f127/)
-   -   MiniChat con PHP/AJAX (http://www.forosdelweb.com/f127/minichat-con-php-ajax-519392/)

ZiTAL 15/09/2007 12:12
MiniChat con PHP/AJAX
 
Bueno estaba aburrido y he hecho un mini-chat en php/ajax, es muy facil de comprender y bueno esta bien para empezar con esto del Ajax:

ajax.js
Código:
function ajaxFunction01()
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    return xmlHttp;
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      return xmlHttp;
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        return xmlHttp;
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
  }
function ajaxFunction02()
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    return xmlHttp;
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      return xmlHttp;
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        return xmlHttp;
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
  }
index.php
Código PHP:
<?php
if($_GET["Bota"]=="bai")
 {
  $file = fopen("file.txt", "a");
  fwrite($file,date("Y/m/d - H:i:s")." ".$_REQUEST["text"]."\n");
  fclose($file);
  exit();
 }
elseif($_GET["Leidu"]=="bai")
 {
  $file = fopen("file.txt", "r");
  while (!feof($file)) 
   {
    $buffer = fgets($file, 4096);
    echo $buffer."<br />";
   }
  fclose($file);
  exit();
 }
?>
Código HTML:
<html>
<head>
<title>Txat-tsue :)</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function fajax()
{
    var text = document.getElementById('text').value;
    var ajax=ajaxFunction01();
    ajax.open("POST","?Bota=bai",true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send("text="+text);
    document.getElementById('text').value="";
    document.getElementById('text').focus();
    fajax2();
}
function fajax2()
 {
    var ajax=ajaxFunction02();
    ajax.onreadystatechange=function()
      {
      if(ajax.readyState==4)
        {
        document.getElementById('txat').innerHTML=ajax.responseText;
        }
      else
      {
        document.getElementById('txat').innerHTML="kargaten...";
      }
      }
    ajax.open("GET","?Leidu=bai",true);
    ajax.send(null);   
 }
setInterval("fajax2()",500);
</script>
</head>
<body>
<input type="text" id="text" size="50" maxlength="50" />
<input type="button" value="bota" onclick="fajax()" />
<div id="txat">
</div>
<script type="text/javascript">
    document.getElementById('text').value="";
    document.getElementById('text').focus();
 fajax2();
</script>
</body>
</html>
Bueno solo necesitamos un archivo llamado file.txt con los permisos correspondiestes de escritura en caso de duda
Código:
chmod 777 file.txt
En ajax.js he tenido que poner 2 objetos ajax ya que no se puede utilizar uno para mas de una funcion.

Bueno me voy de fiesta que son fiestas!!!!

Se me olvido comentar que con una base de datos seria mas optimo hacerlo pero bueno es que en mi pclinuxos no tengo mysql instalado ;)

AbdelioR 15/09/2007 19:07
Re: MiniChat con PHP/AJAX
 
No me va, me aparecen cuadros de texto uno detras de otro, van apareciendo sin más pero no pasa nada.

ZiTAL 16/09/2007 05:19
Re: MiniChat con PHP/AJAX
 
que navegador usas? Es que no tengo windows y no puedo probarlo en internet explorer.

Lo he probado en firefox.

De todas formas puedes cambiar la parte de:

setInterval("fajax2()",500);

y en vez de ponerle 500 ponerle un numero mas grande para que no actualize tan rapido ;)

AbdelioR 16/09/2007 07:09
Re: MiniChat con PHP/AJAX
 
Uso firefox también, como debe ser :p

Actualiza a cada segundo, o un poco más rápido tal vez, y solo aparece el cuadro de introducción de texto y el boton de enviar, pero aunque escriba no pasa nada.

ZiTAL 16/09/2007 07:26
Re: MiniChat con PHP/AJAX
 
lo he subido aqui y funciona:

http://usuarios.lycos.es/zitalman3/

no se que problema puedes tener, seguramente seran los permisos del archivo file.txt

AbdelioR 16/09/2007 08:10
Re: MiniChat con PHP/AJAX
 
:o Si que funciona :S y encima es justo lo que busco

Voy a ver. Gracias tio :P


Una cosa, se podria hacer que el refresco general en la web, (del chat me refiero) fuera solo cuando alguien envia un mensaje? Hacerse imagino que se podrá claro pero.. es muy dificil?

ZiTAL 16/09/2007 08:35
Re: MiniChat con PHP/AJAX
 
Eso se debe a:

ajax.open("GET","?Leidu=bai",true);

hace referencia a la misma pagina, podria haber puesto

ajax.open("GET","index.php?Leidu=bai",true);

que como puedes hay un exit en la condicion, por eso no sigue cargando la pagina.

Con un HTML no podras verlo funcionar.

Respondiendo a tu pregunta, se podria cargar solo cuando alguien metiese una entrada, pero igualmente se tendria que comprobar cada x tiempo si alguien a metido algo.

AbdelioR 16/09/2007 08:37
Re: MiniChat con PHP/AJAX
 
No te entendí muy bien... la solución que dices que es, llamarlo desde un archivo php en vez de uno html?

ZiTAL 16/09/2007 08:41
Re: MiniChat con PHP/AJAX
 
es que no se como pretendes hacer un chat con HTML, tiene que haber algun script para guardar/mostrar los datos en el archivo.

En tu ejemplo le dices:

meteme en esta capa toda la pagina cada x segundos ya que el ajax hace referencia a la misma pagina,en la mia le pongo condiciones para que haga una cosa y otra.

AbdelioR 16/09/2007 08:52
Re: MiniChat con PHP/AJAX
 
Vale, he puesto lo de ajax.open("GET","index.php?Leidu=bai",true); y funciona bien.

Me interesaba esto por que quiero una especie de tagboard lateral en el menu de mi web, y que salgan los mensajes nada mas enviarlos los usuarios. Si entras lo puedes ver, pero solo se refresca al refrescar la página.

Entonces, lo que te decia de hacer las comprobaciones... debe ser bastante más eficiente comprobar si hay nuevos mensajes que mostrar a cada segundo todos los que hay no?

EDIT: lo he probado en IE y no funciona.

AbdelioR 17/09/2007 05:49
Re: MiniChat con PHP/AJAX
 
Zital no nos dejes con este chat a medias! vamos a ver si lo mejoramos, no te vayas! xD

ZiTAL 17/09/2007 05:56
Re: MiniChat con PHP/AJAX
 
no no me he ido, no se porque no funciona en IE y al parecer tampoco en safari.

Pensaba que era por el codigo sucio que les meten los de lycos pero no es de eso ya que lo subi a :

http://zital.no-ip.org/txat/

y tampoco va, sigo buscando el fallo a ver...

AbdelioR 17/09/2007 07:08
Re: MiniChat con PHP/AJAX
 
Para hacer el chat más del estilo tagboard, se podrian mostrar los mensajes al reves? es decir el más reciente arriba? la cosa seria guardar los mensajes así ya en el fichero de texto no?

ZiTAL 17/09/2007 07:15
Re: MiniChat con PHP/AJAX
 
lo mas optimo seria hacerlo con una base de datos y hacer un

order by id desc

por ejemplo y asi te lo ordenaria sin hacer muchas historias ya que con el fichero de texto seria un poco engorroso.

A ver si me ayudais a buscar el fallo eh!!!

AbdelioR 17/09/2007 07:23
Re: MiniChat con PHP/AJAX
 
Vale, voy a probar de hacerlo con base de datos.

AbdelioR 17/09/2007 07:32
Re: MiniChat con PHP/AJAX
 
Bueno, en el primer "bota bai" he introducido los mensajes en la BBDD y en el otro "leidu bai" he conectado con la BBDD y hago un "echo" igual que antes pero para cada comentario.

Hasta aquí correcto no?

ZiTAL 17/09/2007 07:42
Re: MiniChat con PHP/AJAX
 
Leidu=bai

Lee el archivo y lo saca por pantalla

Bota=bai

Envia el comentario.

Voy a ver si puedo ingresar el mensaje por el metodo GET.

AbdelioR 17/09/2007 07:46
Re: MiniChat con PHP/AJAX
 
Ok, pero es optimo este sistema, de en cada segundo leer lo de la base de datos para mostrarlo? es mucha faena? que tal irian los recursos ejecutando la funciona a cada segundo?

AbdelioR 18/09/2007 12:19
Re: MiniChat con PHP/AJAX
 
Nadie sabe como es que no funciona en IE?

gvargas 18/09/2007 13:19
Re: MiniChat con PHP/AJAX
 
Cita:
Iniciado por AbdelioR (Mensaje 2131565)
Ok, pero es optimo este sistema, de en cada segundo leer lo de la base de datos para mostrarlo? es mucha faena? que tal irian los recursos ejecutando la funciona a cada segundo?

Pues no hay otra forma de hacerlo, quiza estes pensando en que el servidor detecte actividad y luego mande al cliente información cada que se genera. Esto no lo puede hacer el protocolo HTTP.

Por lo tanto, hay que hacer peticiones periodicas para saber si hay nuevos datos.

Pero no necesariamente cada segundo..... vamos, que cada 5 0 10 segundos me parece bien.


Cita:
Iniciado por AbdelioR (Mensaje 2133055)
Nadie sabe como es que no funciona en IE?
La siguiente función esta probada en IE y en cualquier navegador....


Código PHP:
function getAjax(){
        var xmlhttp=false;
        try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); }
        catch(e){
            try    {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
            catch(E) { xmlhttp=false; }
        }
        if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp=new XMLHttpRequest(); }
        return xmlhttp;
} 

Sustituirla en las funciones que crean el objeto ajax.

Saludos

AbdelioR 18/09/2007 15:26
Re: MiniChat con PHP/AJAX
 
La acabo de probar i va igual, en IE no refresca :/

Respecto lo del refresco, lo hago a cada segundo por que es como un chat... por eso preguntaba si era mucha faena para estar repitiendola a cada segundo.

gvargas 18/09/2007 16:26
Re: MiniChat con PHP/AJAX
 
En ocaciones cuando se hace la petición por Ajax, no es lo mismo decir:

Código PHP:
ajax.open("POST","?Bota=bai",true);( 

que:

Código PHP:
ajax.open("post","?Bota=bai",true); 
A mi me ha pasado.... sería cuestión de probar.


Saludos

AbdelioR 18/09/2007 17:06
Re: MiniChat con PHP/AJAX
 
Perfecto, creo que ya va. Lo estaba probando ahora pero no se que pasa que mi conexión a internet hoy va fatal, así que no lo he podido comprobar bien del todo, pero los mensajes aparecen en ambos exploradores ya.

gvargas, te cuento el sistema que tengo pensado para ver si me puedes orientar un poco? ni que sea con algun tutorial o algo.

Yo lo que tenia pensado era hacer esto, y que cada vez que un usuario enviara un mensaje, que en la web sonara un sonido, como un "click" para que si un usuario está viendo una sección, se entere de que un mensaje ha sido enviado.

La duda me surge ahora, primero si se puede hacer esto con ajax, y segundo, no veo en que momento hacerlo ya que el refresco del chat lo hago a cada segundo.

Bueno, pues es esto más o menos; mañana me pondré a buscar esto de enviar sonidos con ajax a ver si se puede que no tengo ni idea.

Buenas noches.

ZiTAL 19/09/2007 07:19
Re: MiniChat con PHP/AJAX
 
no se pero a mi no me va en IE 6, a ver si subis vuestros ejemplos.

ZiTAL 19/09/2007 07:53
Re: MiniChat con PHP/AJAX
 
Bueno ya lo he resuelto, al parecer el problema esta en el cache del internet explorer, solucion? Crear una variable aleatorio y mandarle por GET:

Código:
var aleatorio=Math.random();
    ajax.open("post","index.php?Bota=bai&cache="+aleatorio,true);
Código:
var aleatorio=Math.random();
ajax2.open("get","index.php?Leidu=bai&cache="+aleatorio,true);

AbdelioR 19/09/2007 15:25
Re: MiniChat con PHP/AJAX
 
Bueno yo tenia pensado subir la versión definitiva en cuanto la tuviera lista, aún tengo que mirar como hacer que suene un sonidito cuando alguien envia un mensaje. Ahora me acabo de comprar la ps3 y tengo que darle cariños así que otro rato sigo.. xD

ZiTAL 19/09/2007 15:31
Re: MiniChat con PHP/AJAX
 
Bueno al final creo que modificando la cabecera en PHP hara bien, lo encontre aqui:

http://www.formatoweb.com.ar/ajax/ca...o_de_datos.php

Código PHP:
header("Cache-Control: no-store, no-cache, must-revalidate"); 
en un nuevo post pongo el resultado, primero voy a probar en el explorer ;)

ZiTAL 19/09/2007 15:49
Re: MiniChat con PHP/AJAX
 
index.php
Código PHP:
<?php
if($_GET["Bota"]=="bai")
 {
  $file = fopen("file.txt", "a");
  fwrite($file,date("Y/m/d - H:i:s")." ".$_REQUEST["text"]."\n");
  fclose($file);
  exit();
 }
elseif($_GET["Leidu"]=="bai")
 {
  header("Cache-Control: no-store, no-cache, must-revalidate");
  $file = fopen("file.txt", "r");
  while (!feof($file)) 
   {
    $buffer = fgets($file, 4096);
    echo $buffer."<br />";
   }
  fclose($file);
  exit();
 }
?>
Código HTML:
<html>
<head>
<title>Txat-tsue :)</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript"> 
setInterval("fajax2()",5000);
</script>
</head>
<body>
<input type="text" id="text" size="50" maxlength="50" />
<input type="button" value="bota" onclick="fajax()" />
<div id="txat">
</div>
<script type="text/javascript">
    document.getElementById('text').value="";
    document.getElementById('text').focus();
 fajax2();
</script>
</body>
</html>
y el javascript ajax.js
Código:
function ajaxFunction01()
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    return xmlHttp;
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      return xmlHttp;
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        return xmlHttp;
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
  }
function ajaxFunction02()
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    return xmlHttp;
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      return xmlHttp;
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        return xmlHttp;
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
  } function fajax()
{
    var text = document.getElementById('text').value;
    var ajax=ajaxFunction01();   
    ajax.open("post","index.php?Bota=bai",true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send("text="+text);
    document.getElementById('text').value="";
    document.getElementById('text').focus();
    fajax2();
}
function fajax2()
 {
    var ajax2=ajaxFunction02();   
    ajax2.onreadystatechange=function()
      {
      if(ajax2.readyState==4)
        {
        document.getElementById('txat').innerHTML=ajax2.responseText;
        }
      else
      {
        // si queremos mostrar algo mientras carga
        //document.getElementById('txat').innerHTML="kargaten...";
      }
      }
    ajax2.open("get","index.php?Leidu=bai",true);
    ajax2.send(null);   
 }
solo falta tener el file.txt con permisos de escritura.

-------------------------------------------

Bueno pues eso es todo.

Bueno para el siguiente paso propongo:

txat con bases de datos y que cargue solo cuando sea necesario.


Mi idea es tener un input hidden con el valor del ultimo mensaje hash-eado por ejemplo con:

id + (fecha+hora) y cada 5 segundos mirar el has del ultimo mensaje, si son iguales no cargar, si son diferentes se carga.

Creo que es viable, ahora es tarde y tengo trabajo pero mañana a ver si nos ponemos a ello, OK?

AbdelioR 20/09/2007 05:02
Re: MiniChat con PHP/AJAX
 
Actualmente yo tengo el chat con las bases de datos y con la fecha+hora guardadas para cada mensaje, pero repito, no he tocado ajax nunca y no sabria muy bien como hacer lo de refrescar solo con los mensajes enviados.

Bueno, aquí lo dejo con bases de datos:

ajax.js
Código:
function ajaxFunction01()
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    return xmlHttp;
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      return xmlHttp;
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        return xmlHttp;
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
  }
function ajaxFunction02()
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    return xmlHttp;
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      return xmlHttp;
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        return xmlHttp;
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
  } function fajax()
{
    var text = document.getElementById('text').value;
    var ajax=ajaxFunction01();   
    ajax.open("post","index.php?Bota=bai",true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send("text="+text);
    document.getElementById('text').value="";
    document.getElementById('text').focus();
    fajax2();
}
function fajax2()
 {
    var ajax2=ajaxFunction02();   
    ajax2.onreadystatechange=function()
      {
      if(ajax2.readyState==4)
        {
        document.getElementById('txat').innerHTML=ajax2.responseText;
        }
      else
      {
        // si queremos mostrar algo mientras carga
        //document.getElementById('txat').innerHTML="kargaten...";
      }
      }
    ajax2.open("get","index.php?Leidu=bai",true);
    ajax2.send(null);   
 }

index.php
Código PHP:
<?php
if($_GET["Bota"]=="bai")
 {
  
  $mensaje = $_REQUEST["text"];
  $nick = $_REQUEST["nick"];

  //En conf.php tenemos nuestros datos de configuración con la base de datos.
  include ("../conf.php");
  mysql_select_db(BBDD,$conn) or die('Could not select database');
 
  /*Tenemos una tabla "chat" formada por los campos: "id"(autoincrement), nick"(varchar), "mensaje"(varchar) y fecha(datetime).*/

  mysql_query ("INSERT INTO chat (nick, comentario, fecha) VALUES ('$nick', '$mensaje', '$fecha')");
 
  exit();
 }
elseif($_GET["Leidu"]=="bai")
 {
 
  include ("../conf.php");
  mysql_select_db(BBDD,$conn) or die('Could not select database');
  $comentario = mysql_query("SELECT * FROM chat ORDER BY fecha DESC") or die(mysql_error());
  
  while($fila = mysql_fetch_array($comentario)){ 
      
    echo "<b>".$fila['nick'].":</b> ".$fila['comentario']."<br />";
  }
 }
?>

principal.html
Código HTML:
<html>

<head>
<title>Txat-tsue :)</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">

function fajax()
{
    var text = document.getElementById('text').value;
    var nick = document.getElementById('nick').value;
    var ajax=ajaxFunction01();
    ajax.open("post","index.php?Bota=bai",true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send("text="+text+"&nick="+nick);
    document.getElementById('text').value="";
    document.getElementById('text').focus();
    fajax2();
}
function fajax2()
 {
    var ajax=ajaxFunction02();
    ajax.onreadystatechange=function()
      {
      if(ajax.readyState==4)
        {
        document.getElementById('txat').innerHTML=ajax.responseText;
        }
      else
      {
        //document.getElementById('txat').innerHTML="kargaten...";
      }
      }
    ajax.open("get","index.php?Leidu=bai",true);
    ajax.send(null);   
 }
setInterval("fajax2()",2000);
</script>
</head>

<body>
  <div id="txat"></div>
  <p>
    <input name="mensaje" type="text" id="nick" value="Nick" size="17" maxlength="50" />
  </p>
  <p>
    <input name="mensaje" type="text" id="text" size="50" maxlength="50" />
</p>
  <p>
    <input name="boton" type="button" onClick="fajax()" value="Enviar" />   
  </p>
  <script type="text/javascript">
    document.getElementById('text').value="";
    document.getElementById('text').focus();
 fajax2();
</script>
</body>
</html>

jose_sv 01/11/2007 22:12
Re: MiniChat con PHP/AJAX
 
Me colé, pero ya he visto que esto está evolucionando

http://www.forosdelweb.com/f77/minic...v2-0-a-520948/


La zona horaria es GMT -6. Ahora son las 19:01.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.