ZiTALK v3.2 - xHTML/Javascript/PHP/MySQL Ajax Chat

[ZiTAL]

Hola a todos, he tenido un poco de tiempo libre y he aprovechado para añadir funcionalidades al chat que ya va por la version 3.2, las novedades son:

- Usuarios online.
- Más opciones para configurar.
- animaciones jquery opcional.
- sonido opcional.

Aqui el link del proyecto: http://zital.no-ip.org/txat/

Código fuente:
http://zital.no-ip.org/txat/zitalk_v3.2.tar.bz2

El diseño sigue siendo igual de malo jejeje.

[MaBoRaK]

loading............


Y como se chatea? :D le doy click en login, me sale el prompt y nada mas...


connection closed.

[ZiTAL]

en el prompt pones el nick y luego se abre el input para poder escribir en el chat.

[MaBoRaK]

loading............


pues no se abre el input :D, probado Firefox 2.0.0.14


connection closed.

[ZiTAL]

no se chico yo también tengo ese navegador, mira a ver si el firebug te dice algo.

[DarkSkullL]

Aver si nos curramos más las cosas, porque a mi tampoco me sirve con en el mismo navegador de nuestro amigo aquí arriba.

[GatorV]

Mmm no funciona en FF3 RC2... le pongo Login, inserto el nick y no pasa nada...

[ZiTAL]

Iniciado por GatorV

Mmm no funciona en FF3 RC2... le pongo Login, inserto el nick y no pasa nada...

Efectivamente no funciona, he puesto alert's pero no entra en la funcion ajax. Hasta que saquen el firebug jodido.

Iniciado por DarkSkullL

¿Porque no te lo bajas y me dices dónde está el fallo?

Iniciado por MaBoRaK

He probado tanto en windows XP tanto como en pclinuxos, voy a probarlo ahora en debian.

[guybrush78]

Que bueno, un chat de Ajax, GRACIAS ZITAL, está bastante completo.

He estado mirando el código, y en la pagina de funciones aparece la funcion de insertar usuario, pero no hay ningun formulario para registrar usuarios nuevos ¿no?

¿hay que insertarlos a pelo en el mysql?

¿Como se podría colaborar insertando cositas como esas para hacerlo más completo?

[ZiTAL]

no no hay formulario para registro de usuarios, de todas formas al parecer no funciona del todo bien, cuando tenga tiempo lo sigo mirando. Lo cojonudo es que funciona hasta en IE6 y en firefox no, manda cojones :(

[guybrush78]

He estado toqueteando y ya va el login:

Código PHP:

  function login() 
 { 
  
    var name=prompt("Inserta tu nombre:","") 
  if (name!=null && name!=""){ 
      var ajax = new ajaxFunction(); 
       
      ajax.open("GET",pagename+"?Login=yes&name="+name+"&"+Math.random()+"="+Math.random(),true); 
       
        ajax.onreadystatechange=function() 
      {  
        if(ajax.readyState==4) // The request is complete 
         { 
            if (ajax.status==200) // Response successfull 
             {                  
                if(ajax.responseText=='false') 
                 { 
                     alert(name+" ya existe, elige otro nombre ;)"); 
                 } 
                else  
                 {                      
                     var zitalk_name=document.getElementById('zitalk_name'); 
                     var zitalk_comment=document.getElementById('zitalk_comment'); 
                    zitalk_name.value=trim(name); 
                    onlineUsers();                     
                    if(JQ==true) 
                     { 
                         $("#inputs").slideDown('slow'); 
                         $("#logout").show('slow'); 
                         $("#login").hide('slow');                          
                     } 
                    else 
                     { 
                         toogle('block','inputs','logout'); 
                         toogle('none','login');                      
                     } 
                     zitalk_comment.focus(); 
                 } 
             } 
         } 
      }   
       
      ajax.send(null); 
    } 
    else 
    { 
        alert("Nombre no valido"); 
        return false; 
    } 
}  
   

[ZiTAL]

Gracias guybrush78, ahora lo que falla es que no refresca los mensajes nuevos, insertar el mensaje en DDBB pero luego no lo muestra, voy a mirarlo a ver...

[ZiTAL]

al parecer no quiere hacer caso al parametro SINCRONO del ajax, no me deja ponerlo en false, si pongo true funciona, pero no se si funcionara como debe.

[guybrush78]

Iniciado por ZiTAL

no no hay formulario para registro de usuarios, de todas formas al parecer no funciona del todo bien, cuando tenga tiempo lo sigo mirando. Lo cojonudo es que funciona hasta en IE6 y en firefox no, manda cojones :(

Funciona en todos menos en firefox, y creo haber dado con el conque:

Código PHP:

  function ajaxWrite() 
 { 
     if(lastSpanId==-1) // if lastSpanId is -1 the chat is loading you can't send message  
      { 
       return false; 
      } 
       sending=true; // if message is sending the chat stop loading for syncronyzing reasons 
       var comment = document.getElementById('zitalk_comment'); 
       var loading=document.getElementById('loading'); 
       var ajax = new ajaxFunction(); 
       ajax.open("POST",pagename+"?Write=yes",true); // call to zitalk with Write variable 
       ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Ajax POST header 
       ajax.onreadystatechange=function()  
      { 
        if (ajax.readyState==4) // The request is complete 
         { 
            if (ajax.status==200) // Response successfull 
             { 
               loading.innerHTML=''; // hide loading message             
               sending=false; // finish saving comment, the chat can load normally             
               sending=false; // finish saving comment, the chat can load normally 
               comment.value=''; // empty comment box 
               comment.focus(); // focus comment box 
             } 
         } 
        else 
         {         
          loading.innerHTML='Sending message...';  //show loading message 
         } 
      }     
    ajax.send("comment="+comment.value); // to send php $_REQUEST variables  
 }  
   

Código PHP:

  function pulse(hau,e) 
 { 
    var evt = e ? e : event; 
    var key = window.Event ? evt.which : evt.keyCode; 
    //var comment=document.getElementById('zitalk_comment'); 
    var chat=document.getElementById('chat'); 
    var comment = trim(hau.value); 
    if(key==13) // return key 
     { 
        if(comment=='') 
         { 
            hau.focus(); 
            return false; 
         } 
        else 
         { 
            if(sending==true) 
             { 
                return false; 
             } 
            else 
             { 
                //ajaxWrite(); 
                ajaxWrite(); 
             } 
            return false; 
         } 
     } 
     return false; 
 }  
   

Las llamadas a ajax.open parece que en firefox tiene problemas al decirle que sea false (sincrono), pasa de actualizar y no sigue escuchando, si pones true(asincrono) sigue escuchando y lo pone bien, así parece que ya va en todos.

Lo de carga asincrona en realidad no crea conflictos con la sincronía que has montado para los mensajes, ya que se controla por variables como "sending", la asincronía es solo en la carga.

Espero haber ayudado.

[guybrush78]

Jeje, hemos dado con el conque los dos a la vez :)

[guybrush78]

Iniciado por DarkSkullL

Aver si nos curramos más las cosas, porque a mi tampoco me sirve con en el mismo navegador de nuestro amigo aquí arriba.

Zital, no hagas caso a mensajes como este, Todos los demás te agradecemos lo completo que está, y no te desanimes , yo te ayudaré en lo que pueda.

[ZiTAL]

pues si, bueno, por ahora voy a generar el tar.bz2 para la descarga, muchas gracias por tu ayuda.

[ZiTAL]

guybrush78 and company, en el servidor tengo montado un servidor subversion con este proyecto, para el que le interese participar, que me mande un MP y le dare usuario y clave para paraticipar en el proyecto. Si teneis GNU/Linux aqui teneis el eclipsePDT, con el plugin de subversion:

http://zital.no-ip.org/debian/eclipsePDT/

Por ejemplo, el diseño es una mierda, pero es facil cambiarselo ya que esta aparte en la carpeta de las plantillas.

Si alguien se anima ya sabe, que escriba aqui o MP.

[MaBoRaK]

loading.............

Yo quiero participar :D

mandame user y pass a [email protected] :D


connection closed.

[ZiTAL]

OK, en cuanto vuelva de la calle te hago user y pass que ya me voy!!!!

[ZiTAL]

Aquí el servidor subversion para el proyecto:

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

MaBoRaK ya tiene usuario, si alguien más lo quiere ya sabe ;)

[MaBoRaK]

loading..............

añadime al msn: [email protected]

connection closed.

[MaBoRaK]

loading...........

Bueno, yo soy estricto (demasiado) en codigo.

1.- Para desarrollar, pon error_reporting de tu php.ini en E_ALL

Con esto verás que cometes errores comunes como.

if($_GET['peticion']='blabla') <-- es un error clásico ya que das por hecho que existe esa variable y simplemente haces la comparación... y se corrige PRIMERO verificando que exista esa variable y luego compararla. (le puse arroba a todas las variables GET que usas)

Para evitar esto, se puede usar dos variables

action: la accion a realizar
data: Los datos necesarios para realizar esta acción

De esta forma tienes acciones y una acción por defecto

Código PHP:

  $action = (isset($_GET['action']))?$_GET['action']:'failed';
$data = (isset($_GET['data']))?$_GET['data']:'';


if($action=='peticion' )
{
       echo  pedirdata(Array('id'=>$data));
}
elseif($action=='save')
{
//otro
}
else
{
    die('blabla matanza');
}  
   

de esta forma creo que haces escalable cualquier aplicación... y $data puede tener un numero, cadena u objeto JSON.

connection closed.

[ZiTAL]

Tienes razon, voy a ver que puedo hacer ;)

[guybrush78]

Venga, me gustaría tambien participar pero sacando con la base que tienes ya una linea diferente.

Querría llegar a crear un servicio de asistencia técnica, en la que se conecten administradores y usuarios de una web y puedan hablar 1 a 1, como si fuera una llamada telefonica, y de forma que pueda incrustarse en las webs.

[guybrush78]

Otra cosa, ya, siguiendo la filosofía de CSS, hemos de diferenciar entre Estilo de maquetación y contenido web, por ejemplo, el siguiente codigo:
<p>
&nbsp;
</p>
eso no es un contenido web, y se puede poner el div que va debajo de eso:
margin-top:10px;

De CSS si tienes dudas, pregunta, pregunta, que en el trabajo que estoy ahora he tenido que indagar hasta las entrañas.

[ZiTAL]

Aupa, sobre la maquetacion y estilos, yo no soy diseñador ni maquetador, vamos que si te animas y te curras un diseño guapo, por mi perfecto.

Si quieres puedes hacer un fork del proyecto, que para algo tiene esa licencia.

Mandame un MP para que te ponga user y password al subversion.

Al final quite el navegador web de subversion ya que no funcionaba del todo bien.

Si eso:

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

;)

[ZiTAL]

Sopitas para guybrush78

estoy peleandome con el CSS, quisiera tener el chat y al lado los usuarios online y todo esto centrado horizontalmente, como podria hacer eso mediante CSS, he probado con clear y float pero no lo consigo :(

[ZiTAL]

Bueno pues con la ayuda de uno del curro kba, ya he resuelto como poner el chat y los usuarios online uno al lado del otro, luego ya lo he puesto todo mas o menos bien ;)

[guybrush78]

Hola zitalk, respecto a CSS tu piensa como si tuvieras un montón de cuadros de papel de distintos tamaños.

quieres poner:
uno con usuarios online.
uno con el chat.

Todo centrado.

Entonces coge y pones un cuadro que lo englobe. ese cuadro ponle width:100% y height el que quieras.

Dentro de ese cuadro pones ahora los dos cuadros que quieres poner uno de ellos, el de mas a la izquierda, le pones float left para que el otro no se quede abajo(usuarios y chat). Y ninguno con position absolute.

como chat se compone de 2, ponle otro cuadro que contenga a esos 2 para que cuando los muevas se muevan en conjunto.

ahora, a cada cuadro (chat y usuarios) le pones el ancho que quieras en porcentaje, así cuando la ventana se ponga más pequeña, todo eso decrecerá. (ponle un minimo con min.width y max-width para definir una minima resolución.

Ahora la parte del centrado, que hay varias formas.

Puedes usar Padding, que es el hueco interno que deja el cuadro para mostrar su contenido. qué pasa, que firefox 2 peta con padding.

Puedes usar margin-left, ¿como?, en la caja usuarios, que es la que esta más pegada al left, usas un porcentaje de margen, ¿cual?, pues si usuarios:20% y chat:70%, te queda un 10%, por tanto para que quede centrado el margin left será el 5%, y queda todo centrado hasta cuando cambias de tamaño la ventana.

Si tienes más dudas, me lo dices, te pongo un resumencillo en codigo sin probarlo:

Código PHP:

  <div class="contenedor_completo"> 
...<div class="userol" style="margin-left:4%; float:left;'>codigo para usuarios</div> 
...<div class="contenedor_chat" style="margin-left:1%;'> 
......<div class="chat" style="margin-bottom:1%; clear:left;'>codigo del chat</div> 
......<div class="subchat">codigo del input del chat</div> 
...</div> 
</div>