Micaela 13 de agosto de 2009 a las 09.03
   Imprimir artículo
elWebmaster.com

Crea tu propia aplicaci贸n de chat con PHP y jQuery


jqueryPara tu sitio web, un sistema de chat puede ser perfecto si planeas incorporar soporte en vivo, o si simplemente quieres permitir a tus visitantes conocerse e intercambiar opiniones y comentarios.

En esta nota, te ense帽aremos a trav茅s de pocos pasos c贸mo crear una simple aplicaci贸n web de chat utilizando conocimientos de PHP y jQuery. 驴Est谩s preparado? 隆Comencemos!

Introducci贸n

final product

La aplicaci贸n de chat que crearemos ser谩 bastante simple. La misma incluir谩 un sistema de logueo y deslogueo, propiedades estilo AJAX, y tambi茅n ofrecer谩 soporte para usuarios m煤ltiples.

Paso 1 : C贸digo HTML

Comenzaremos creando nuestro primer archivo llamado index.php.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Chat – Customer Module</title>
<link type=”text/css” rel=”stylesheet” href=”style.css” />
</head>

<div id=”wrapper”>
<div id=”menu”>
<p class=”welcome”>Welcome, <b></b></p>
<p class=”logout”><a id=”exit” href=”#”>Exit Chat</a></p>
<div style=”clear:both”></div>
</div>

<div id=”chatbox”></div>

<form name=”message” action=””>
<input name=”usermsg” type=”text” id=”usermsg” size=”63″ />
<input name=”submitmsg” type=”submit”聽 id=”submitmsg” value=”Send” />
</form>
</div>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

});
</script>
</body>
</html>

  • Comenzamos nuestro html con el DOCTYPE usual, etiquetas html, head y body. En la etiqueta head a帽adimos nuestro t铆tulo y el link a nuestra hoja de estilos css (style.css).
  • Dentro de la etiqueta body, estructuramos nuestro dise帽o dentro del div #wrapper. Tendremos tres bloques principales: un simple men煤, nuestra caja de chat y nuestra entrada de mensajes, cada uno con su div y id respectivos.
  • El div #menu consistir谩 de dos elementos de p谩rrafo. El primero ser谩 una bienvenida al usuario y har谩 float a la izquierda, y el segundo ser谩 un link de salida y har谩 float a la derecha. Tambi茅n incluimos un div para aclarar los elementos.
  • El div #chatbox contendr谩 nuestra caja de chat. Cargaremos nuestro formulario de log desde un archivo externo utilizando una petici贸n ajax de jQuery.
  • El ultimo 铆tem en nuestro div #wrapper ser谩 el formulario, el cual incluir谩 una entrada de texto para el mensaje del usuario y un bot贸n de “enviar”.
  • Finalmente incluimos nuestros script para que la p谩gina cargue m谩s r谩pido. Primero haremos links a Google jQuery CDN, dado que estaremos usando la librer铆a jQuery para este tutorial. Nuestra segunda etiqueta de script ser谩 en lo que estaremos trabajando. Cargaremos todo nuestro c贸digo una vez que el documento est茅 listo.

Paso 2 : estilado CSS

Ahora a帽adiremos algo de CSS para hacer que nuestra aplicaci贸n de chat luzca mejor. El c贸digo que dejamos a continuaci贸n ser谩 a帽adido a nuestro archivo style.css:

/* CSS Document */
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }

form, p, span {
margin:0;
padding:0; }

input { font:12px arial; }

a {
color:#0000FF;
text-decoration:none; }

a:hover { text-decoration:underline; }

#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:504px;
border:1px solid #ACD8F0; }

#loginform { padding-top:18px; }

#loginform p { margin: 5px; }

#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }

#usermsg {
width:395px;
border:1px solid #ACD8F0; }

#submit { width: 60px; }

.error { color: #ff0000; }

#menu { padding:12.5px 25px 12.5px 25px; }

.welcome { float:left; }

.logout { float:right; }

.msgln { margin:0 0 2px 0; }

No hay nada especial en el CSS de arriba, m谩s que el hecho de que algunas clases o ids, para las cuales hemos programado un estilo, ser谩n a帽adidas despu茅s.

Como pueden ver, ya hemos terminado de construir la interfaz de usuario de nuestro chat.

Paso 3 : Utilizando PHP para crear un formulario de login

Ahora implementaremos un simple formulario que le preguntar谩 al usuario su nombre antes de seguir adelante.

<?
session_start();

function loginForm(){
echo’
<div id=”loginform”>
<form action=”index.php” method=”post”>
<p>Please enter your name to continue:</p>
<label for=”name”>Name:</label>
<input type=”text” name=”name” id=”name” />
<input type=”submit” name=”enter” id=”enter” value=”Enter” />
</form>
</div>
‘;
}

if(isset($_POST['enter'])){
if($_POST['name'] != “”){
$_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
}
else{
echo ‘<span class=”error”>Please type in a name</span>';
}
}
?>

La funci贸n loginForm() que hemos creado est谩 compuesta de un simple formulario de login que le pide al usuario su nombre. Cuando usamos una declaraci贸n if y else es para verificar que la persona ingres贸 su nombre. Si lo hizo, programamos ese nombre como $_SESSION['name']. Dado que estamos usando una sesi贸n basada en cookies para almacenar el nombre, debemos llamar session_start() antes de que algo sea mostrado en el navegador.

Una cosa a la que puede que quieras prestarle atenci贸n es que hemos utilizado la funci贸n htmlspecialchars(), la cual convierte caracteres especiales en entidades HTML, para as铆 proteger a la variable nombre de convertirse en una v铆ctima de Cross-site scripting (XSS). M谩s tarde tambi茅n a帽adiremos esta funci贸n a la variable texto que usaremos en el log de chat.

Paso 4: Mostrando el formulario de Login

Para poder mostrar el formulario de login en el caso de que un usuario no haya ingresado al sistema, utilizamos otra declaraci贸n if y else alrededor del div #wrapper y las etiquetas script de nuestro c贸digo original. En el caso opuesto, esto ocultar谩 el formulario de login, y mostrar谩 la caja de chat si el usuario ya ha ingresado al sistema y ha creado una sesi贸n de chat.

<?php
if(!isset($_SESSION['name'])){
loginForm();
}
else{
?>
<div id=”wrapper”>
<div id=”menu”>
<p class=”welcome”>Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
<p class=”logout”><a id=”exit” href=”#”>Exit Chat</a></p>
<div style=”clear:both”></div>
</div>
<div id=”chatbox”></div>

<form name=”message” action=””>
<input name=”usermsg” type=”text” id=”usermsg” size=”63″ />
<input name=”submitmsg” type=”submit”聽 id=”submitmsg” value=”Send” />
</form>
</div>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>
<script type=”text/javascript”>
// jQuery Document
$(document).ready(function(){
});
</script>
<?php
}
?>

Paso 5: Men煤 de bienvenida y de Logout

Ahora necesitamos a帽adir el log out del usuario y el cierre de la sesi贸n de chat. Si lo puedes recordar, nuestro c贸digo HTML original inclu铆a un men煤 simple. Volvamos a eso y a帽ad谩mosle algo de PHP que le dar谩 al men煤 m谩s funcionalidades.

Primero que nada, debemos a帽adir el nombre de usuario al mensaje de bienvenida. Hacemos esto mostrando la sesi贸n del nombre de usuario.

<p class=”welcome”>Welcome, <b><?php echo $_SESSION['name']; ?></b></p>

Para permitir al usuario desloguearse al final de la sesi贸n, utilizaremos un poco de jQuery.

<script type=”text/javascript”>
$(document).ready(function(){
//Si el usuario quiere dejar la sesi贸n
$(“#exit”).click(function(){
var exit = confirm(“Are you sure you want to end the session?”);
if(exit==true){window.location = ‘index.php?logout=true';}
});
});
</script>

El c贸digo jQuery de arriba simplemente muestra una alerta de confirmaci贸n si un usuario hace clic en el link #exit. Si el usuario confirma la salida, decidiendo as铆 cerrar la sesi贸n, entonces lo mandamos a index.php?logout=true. Esto simplemente crea una variable llamada logout con el valor true. Necesitamos tomar esta variable con PHP:

if(isset($_GET['logout'])){

//Mensaje simple de salida
$fp = fopen(“log.html”, ‘a’);
fwrite($fp, “<div class=’msgln’><i>User “. $_SESSION['name'] .” has left the chat session.</i><br></div>”);
fclose($fp);

session_destroy();
header(“Location: index.php”); //Redirige al usuario
}

Ahora nos fijamos si una variable get de ‘logout’ existe usando la funci贸n isset(). Si la variable ha sido pasada por medio de una url, tal como el link mencionado anteriormente, procedemos a terminar la sesi贸n del nombre de usuario.

Antes de destruir la sesi贸n del nombre de usuario con la funci贸n session_destroy(), queremos escribir un simple mensaje de salida en el chat log. El mismo dir谩 que el usuario ha dejado la sesi贸n de chat. Logramos esto mediante las funciones fopen(), fwrite() y fclose() para manipular nuestro archivo log.html, que como veremos m谩s adelante, ser谩 creado como nuestro log de chat. Noten que hemos creado una clase de ‘msgln’ para el div. Tambi茅n ya hemos definido el estilo CSS para este div.

Luego de hacer esto, destruimos la sesi贸n y redireccionamos al usuario a la misma p谩gina donde el formulario de login aparecer谩.

Paso 6: Manejando las entradas del Usuario

Una vez que el usuario env铆a nuestro formulario, deseamos tomar su entrada y escribirla en nuestro log de chat. Para lograr esto, debemos usar jQuery y PHP para trabajar de forma sincronizada en los lados del cliente y el servidor.

jQuery

Casi todo lo que vamos a hacer con jQuery para poder manejar nuestra informaci贸n, se basar谩 en la petici贸n post jQuery.

$(“#submitmsg”).click(function(){
var clientmsg = $(“#usermsg”).val();
$.post(“post.php”, {text: clientmsg});
$(“#usermsg”).attr(“value”, “”);
return false;
});

  • Antes de hacer nada, debemos tomar la entrada del usuario, o lo que 茅l ha tipeado en la entrada #submitmsg. Esto se puede lograr mediante la funci贸n val(), la cual obtiene el valor programado en un campo del formulario. Ahora almacenamos este valor dentro de la variable clientmsg.
  • Aqu铆 viene la parte m谩s importante: la petici贸n de post jQuery. Esto env铆a una petici贸n POST al archivo post.php que crearemos en un momento. Esto postea la entrada del cliente, o lo que ha sido guardado dentro de la variable clientmsg.
  • Finalmente, limpiamos la entrada #usermsg, programando el valor del atributo en blanco.

Noten que el c贸digo de arriba ir谩 en nuestra etiqueta script, d贸nde hemos colocado el c贸digo jQuery de logout.

PHP – post.php

Al momento tenemos informaci贸n POST siendo mandada al archivo post.php cada vez que el usuario env铆a el formulario y manda un nuevo mensaje. Nuestra meta es recoger esta informaci贸n y escribirla en nuestro log de chat.

<?
session_start();
if(isset($_SESSION['name'])){
$text = $_POST['text'];

$fp = fopen(“log.html”, ‘a’);
fwrite($fp, “<div class=’msgln’>(“.date(“g:i A”).”) <b>”.$_SESSION['name'].”</b>: “.stripslashes(htmlspecialchars($text)).”<br></div>”);
fclose($fp);
}
?>

  • Primero debemos comenzar el archivo post.php file con la funci贸n session_start() dado que estaremos usando la sesi贸n del nombre de usuario en este archivo.
  • Utilizando el isset boolean, nos fijamos si la sesi贸n para ‘name’ existe antes de hacer algo m谩s.
  • Ahora tomamos la informaci贸n POST que ha sido enviada a este archivo mediante jQuery. Luego almacenamos esta informaci贸n en la variable $text.
  • Esta informaci贸n ser谩 almacenada en el archivo log.html. Para lograr esto abrimos el archivo con el modo en la funci贸n fopen seteado en ‘a’, que de acuerdo a php.net abre el archivo para s贸lo escritura; y coloca el puntero del archivo al final del mismo. Si el archivo no existe, debes crearlo. Luego escribimos nuestro mensaje para el archivo usando la funci贸n fwrite().
  • El mensaje que escribiremos ser谩 incluido dentro del div msgln. 脡ste contendr谩 la fecha y hora generada por la funci贸n date(), la sesi贸n del nombre de usuario, y el texto, que tambi茅n est谩 rodeado por la funci贸n htmlspecialchars() para prevenirlo de XSS.
  • Finalmente, cerramos nuestro archivo usando fclose().

Paso 7: Mostrando el contenido del Chat Log (log.html)

Todo lo que el usuario ha escrito se maneja y postea por medio de jQuery. Se escribe en el log del chat con PHP. Lo 煤nico que resta hacer es mostrarle al usuario el chat log actualizado.

Para ahorrar algo de tiempo, precargaremos el log de chat en el div #chatbox si 茅ste tiene algo de contenido.

<div id=”chatbox”><?php
if(file_exists(“log.html”) && filesize(“log.html”) > 0){
$handle = fopen(“log.html”, “r”);
$contents = fread($handle, filesize(“log.html”));
fclose($handle);

echo $contents;
}
?></div>

Utilizamos una rutina similar a la usada con el archivo post.php, salvo que ahora s贸lo estamos leyendo y mostrando el contenido del archivo.

La petici贸n de jQuery.ajax

La petici贸n Ajax es el coraz贸n de todo lo que estamos haciendo. Esta petici贸n no s贸lo nos permite enviar y recibir informaci贸n a trav茅s del formulario sin tener que actualizar la p谩gina, sino que tambi茅n nos permite manejar la petici贸n de informaci贸n.

//Carga el archivo que contiene el log de chat
function loadLog(){

$.ajax({
url: “log.html”,
cache: false,
success: function(html){
$(“#chatbox”).html(html); //Inserta el log de chat en el div #chatbox
},
});
}

Envolvemos nuestra petici贸n ajax dentro de una funci贸n. Como ven arriba, s贸lo utilizamos 3 de los objetos de petici贸n de jQuery Ajax.

  • url: Un string de URL a petici贸n. Usaremos nuestro nombre de archivo del log de chat de log.html.
  • cache: Esto prever谩 que nuestro archivo sea cacheado. Se asegurar谩 que obtengamos un chat log actualizado cada vez que enviemos una petici贸n.
  • sucess: Esto nos permitir谩 adjuntar una funci贸n que pasar谩 la informaci贸n que hemos solicitado.

Como pueden ver, luego movemos la informaci贸n que hemos solicitado (html) dentro del div #chatbox.

Auto-scrolling

Como puede que hayan visto en otras aplicaciones de chat, el contenido autom谩ticamente hace scroll hacia abajo si el contenedor del log de chat (#chatbox) se llena. Nosotros implementaremos una funci贸n simple y similar, que comparar谩 la altura del scroll del contenedor antes y despu茅s de que hagamos la petici贸n Ajax. Si la altura del scroll es mayor despu茅s de la petici贸n, usaremos un efecto animado jQuery para hacer scroll en el div #chatbox.

//Carga el archivo que contiene el log de chat
function loadLog(){
var oldscrollHeight = $(“#chatbox”).attr(“scrollHeight”) – 20; //La altura del scroll antes de la petici贸n
$.ajax({
url: “log.html”,
cache: false,
success: function(html){
$(“#chatbox”).html(html); //Inserta el log de char en el div #chatbox

//Auto-scroll
var newscrollHeight = $(“#chatbox”).attr(“scrollHeight”) – 20; //La altura del scroll despu茅s del pedido
if(newscrollHeight > oldscrollHeight){
$(“#chatbox”).animate({ scrollTop: newscrollHeight }, ‘normal’); //Autoscroll hacia el fondo del div
}
},
});
}

  • Antes de hacer la petici贸n almacenamos la altura del scroll del div #chatbox en la variable oldscrollHeight.
  • Luego de que la petici贸n ha resultado exitosa, almacenamos la altura del scroll del div #chatbox en la variable newscrollHeight.
  • Luego comparamos ambas alturas de scroll usando una delcaraci贸n if. Si newscrollHeight es mayor que oldscrollHeight, utilizamos el efecto animado para hacer scroll en el div #chatbox.

Actualizando constantemente el Chat Log

Ahora puede que surja la pregunta 驴C贸mo actualizaremos constantemente la nueva informaci贸n que es enviada por los usuarios?

setInterval (loadLog, 2500);聽聽 聽//Recarga el archivo cada 2500 ms o x ms si deseas cambiar el segundo par谩metro

La respuesta a nuestra pregunta descansa en la funci贸n setInterval. Esta funci贸n correr谩 nuestra funci贸n loadLog() cada 2.5 segundos, y la funci贸n loadLog solicitar谩 el archivo actualizado y har谩 autoscroll del div.

隆Listo!

S铆, ya hemos terminado. Pueden utilizar esto como base para construir una sala de chat m煤ltiple, a帽adir emoticones, etc. 隆El cielo es el l铆mite!

Fuente: Net Tuts +


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (72)

  1. juegos online multijugador dice:

    Me interesa muchisimo esta entrada, me va a servir para aprender un poco mas de Jquery, yo es que aprendo con ejemplos , no me van los tutoriales jejee. saludos

  2. nicol谩s dice:

    mm… pero si esto lo publico anieto2k hace meses puaj! Xd

  3. jonhy dice:

    Muy interesante, me parecia que lo habia visto en net-tuts, pero en espa帽ol se entiende mejor, gracias!!

  4. Julio dice:

    interesante verlo en espa帽ol jeje en Net-Tuts estaba en ingl茅s pero m谩s f谩cil cuando est谩 en nuestros t茅rminos xD

  5. Claudio dice:

    Esta todo muy lindo pero funciona solo en chrome y en Firefox, no se por que, pero en internet explorer 7 y en IE6 no funciona correctamente…

    Existe alguna funci贸n para hacerlo funcionar en IE6 e IE7

  6. victor dice:

    Hola alguien me puede ayudar con este tutorial es soy todavia aprendiz. bueno ps los dejo mi msn vicber7777@hotmail.com

  7. harold cruz dice:

    exelente, como siempre banguardistas

  8. Erick dice:

    Hola, alguien sabe de algun chat que funcione en google sites y que no guarde lo que se escribe use xat pero todo lo guarda aunque lo haya escrito desde hace un mes.

    Saludos

  9. Esteban Andrade dice:

    Excelente aporte!!!!
    Justo lo que andaba buscando.

    Ahora quedar谩 investigar c贸mo cargar las imagenes y sonidos. 驴Es posible cargar sonidos?

    Much铆simas Gracias

  10. Jose Chen dice:

    Exelente tutorial me ayudara tanto a mi como a otros usuarios a crear una aplicacion de chat…! Gracias..!

  11. Nora Costa dice:

    Hola muy bueno el chat, lo que necesitar铆a es poder limipiar los mesajes, porque cuando vuelvo a entrar queda el historial, pero me gustar铆a poder borrarlo despues de un tiempo. Gracias

  12. Hemo Vintage dice:

    Jquery tiene problemas con Ie6 y el Ie7, por lo que es normal que no ande.

    para borrar los textos o el “log” lo que hice fue escribir otro archivo en paralelo que con cada sesion de logueo de un nuevo usuario me incrementa en 1 el valor guardado, sobreescribiendolo y lo resta en 1 con cada salida de sesion. Si esta Resta nos deja en 0, o sea, si no hay usuarios en el chat, se borra el log.html, si es 1 o mas lo conservar谩.

    seria util que alguien que sepa sobre jquery nos tire una punta para hacerlo andar en ie6 y el ie7. en Opera anda deluxe.

    saludos

  13. Adri谩n Olmedo dice:

    Hice los pasos esactamente como me piden (creo) y me s谩le este error en php:

    Warning: session_start() [function.session-start]: Cannot send session cache limiter – headers already sent (output started at C:\AppServ\www\chat\index.php:7) in C:\AppServ\www\chat\index.php on line 20.

    Y para m谩s no me muestran los mensajes que escribo, me meto en http://localhost/chat/log.html y si aparecen los mensajes escritos pero abajo del marco.

    Ha, otra cosa, me he copiado el scritp de google que aparec铆a ya que habeces se me va la conexi贸n de internet y me quise ahorrar tiempo y llamar ese script en el html desde mi mismo servidor local 驴estar谩 bien eso que hice? es decir me guarder el jquery.main.js en mi servidor local (localhost).

  14. Daniela dice:

    @Adrian Olmedo: F铆jate que antes del session_start(); no haya nada que saque algo por pantalla, quiz谩s hayas puesto un “echo” o algo similar. Aseg煤rate que session_start(); sea la primera l铆nea despu茅s de < ?php.

    En cuanto a alojar localmente jQuery, es totalmente recomendable justamente por lo que comentas: a veces el server de Google que lo aloja tarda en devolver el pedido o la conexi贸n se cae. Simplemente b谩jate el archivo desde http://jquery.com/ y refi茅relo directamente a su ubicaci贸n local.

  15. Dinael dice:

    lo que no tengo claro es como agregar otro campo en el formulario le estoy dando vueltas pero no llego a la solucion.

    muchas gracias.

  16. HECTOR dice:

    Hola que tal porfavor ayudame :P jeje mira lo que pasa esque ay un chat al que entro seguido y note que aveces es un poco molesto lo del autoscroll y en la ventana general del chat le sugeri a los creadores de la pagina que lo quitaran que por que aveces era molesto que quisieras subir y se auto bajara cada vez que alguien hablaba y el wey como que me contesto de mala manera jaja y me dijo que todos los chats son asi y que primero me informara y que sabe que y que que sugeria yo jaja en fin un buen de cosas y pues le puse de ejemplo el msn que podias subir comodamente la conversacion por que no recordava que chat era sin autoscroll pero solo me dijo que el msn era personal que solo era una charla entre 2 personas y que ahi en el chat era un flujo de muchas personas :S pero yo creo que es la misma no tiene nada que ver que sean muchos o no..Y QUISIERA QUE ME AYUDARAS A DEMOSTRARLE QUE SI SE PUEDE O QUE POR LO MENOS QUE EL CHAT TUBIERA LA OPCION DE QUITAR Y PONER EL AUTOSCROLL POR EL USUARIO YO SE QUE SI SE PUEDE PORFAVOR MANDAME ALGUN CODIGO O SCRIPT O NO SE JEJE QUE SIRVA PARA ESTO :) ESPERO ME AYUDES GRACIAS!!!

  17. Cescorp dice:

    Soy muy neuvo en esto y no lo entendi me pierdo despues del paso 2 por favor ya no se onde va el codigo que sigue es en archivos independientes o en uno solo por favor alguien me ayude

  18. JorgeR dice:

    hola, tengo una gran duda, lo que pasa es que estoy tratando de hacer una pagina web, y lo que quiero hacer es, tener una comunicacion por chat pero los usuario no dialoges entre ellos sino que solamente conmigo, si me podrian ayudar, estaria muy agradecido, este es mi correo chicoromo@hotmail.com

  19. Mar铆a del Mar dice:

    驴por qu茅 no puedo chatear?

  20. Mar铆a del Mar dice:

    Intento chatear con los amigos conectados y no puedo 驴por qu茅?

  21. jahir dice:

    muy buen aporte, pero necesito saber donde poner el codigo de la peticion del jquery.ajax por que no me hubico donde ingresarla por favor es mur urgente

  22. freed dice:

    Por que no publican los sources? entre otras no esta claro que partes van enque archivo.

  23. Ricardo dice:

    Me interesa este tema ya que quiero implementar un chat, sera que como dijo el amigo arriba pueden publicar los fuentes o enviarlos??? se los agradecer铆a mucho ya que me parece una aplicaci贸n ensilla pero muy buena y potente…

  24. Morton dice:

    NOTA: A trav茅s de esta traducci贸n, elWebmaster.com busca difundir este pr谩ctico e interesante art铆culo a la comunidad de webmasters de habla hispana. No ser谩n respondidas las consultas que sean realizadas a trav茅s de los comentarios. En caso de tener alguna duda o inconveniente con respecto al funcionamiento de lo aqu铆 explicado, les rogamos consultar al autor del art铆culo original. Muchas gracias.

  25. cesar dice:

    Hola. a todos.. con el tema que no funciona en IE6 y IE7 solo miren bien si estan tipiando de la menra correcta el ajax o post de jquery, ya que IE es muy exigible en la estructura de los m茅todos del DOM.

  26. cesar dice:

    Hola a todos de nuevo, En primer lugar Gracias por este buen tutorial, esta excelente . con el problema de IE que a algunos no le corre, es muy f谩cil de solucionarlo como lo dije en un post arriba, solo fijen que ayan escrito bien los metodos del DOM, en especial la funciones que utilizan metodos ajax ($.ajax, $.post), el problema esta en $.ajax en el metodo success que al terminar esa funcion no debe tener una “,” de finalizaci贸n ya que es la ultima variable que envian entre {} no lleva coma. si lo ponen o no no pasa nada en cualquier navegador execto en IE. les muestro el codigo ya implementado.

    Todos los archivos esta en una carpeta: chat/
    Crear los archivo: log.html , index.php , post.php , style.css

    Archivo log.html:
    Crear este archivo y asegurarse que no tenga ningun contenido, osea dejarlo basio.

    archivo index.php
    <?
    session_start();

    if(isset($_GET['logout'])){
    //Mensaje simple de salida
    $fp = fopen(“log.html”, ‘a’);
    fwrite($fp, “User “. $_SESSION['name'] .” has left the chat session.“);
    fclose($fp);
    session_destroy();
    header(“Location: index.php”); //Redirige al usuario
    }

    function loginForm(){
    echo’Please enter your name to continue:Name:';
    }
    if(isset($_POST['enter'])){
    if($_POST['name'] != “”){
    $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
    }
    else{
    echo ‘Please type in a name';
    }
    }

    if(!isset($_SESSION['name'])){
    loginForm();
    }
    else{
    ?>

    Chat – Customer Module

    Bienvenido,
    Salir Chat

    0){
    $handle = fopen(“log.html”, “r”);
    $contents = fread($handle, filesize(“log.html”));
    fclose($handle);
    echo $contents;
    }
    ?>

    $(document).ready(function(){
    //Si el usuario quiere dejar la sesi贸n
    $(“#exit”).click(function(){
    var exit = confirm(“驴Est谩 seguro que desea finalizar la sesi贸n?”);
    if(exit==true){window.location = ‘index.php?logout=true';}
    });
    //enviar en log de mensaje
    $(“#submitmsg”).click(function(){
    var clientmsg = $(“#usermsg”).val();
    $.post(“post.php”, {text: clientmsg});
    $(“#usermsg”).attr(“value”, “”);
    return false;
    });
    //Carga el archivo que contiene el log de chat
    function loadLog(){//Inicio de loadLog
    var oldscrollHeight = $(“#chatbox”).attr(“scrollHeight”) – 20; //La altura del scroll antes de la petici贸n
    $.ajax({//Inicio ajax
    url: “log.html”,
    cache: false,
    success: function(html){//Inicio del success
    $(“#chatbox”).html(html); //Inserta el log de chat en el div #chatbox
    //Auto-scroll
    var newscrollHeight = $(“#chatbox”).attr(“scrollHeight”) – 20; //La altura del scroll despu茅s del pedido
    if(newscrollHeight > oldscrollHeight){//inicio del if verificar scroll
    $(“#chatbox”).animate({ scrollTop: newscrollHeight }, ‘normal’); //Autoscroll hacia el fondo del div
    }//Fin del if verificar scroll
    }//Fin del success
    });//Fin ajax
    }//Fin de loadLog
    //Recarga el archivo cada 2500 ms o x ms si deseas cambiar el segundo par谩metro
    setInterval (loadLog, 2500);
    });//fin del Jquery

    Contenido del archivo post.php
    <?
    session_start();
    if(isset($_SESSION['name'])){
    $text = $_POST['text'];
    $fp = fopen(“log.html”, ‘a’);
    fwrite($fp, “(“.date(“g:i A”).”) “.$_SESSION['name'].”: “.stripslashes(htmlspecialchars($text)).””);
    fclose($fp);
    }
    ?>

    contenido del archivo style.css
    /* CSS Document */
    body {
    font:12px arial;
    color: #222;
    text-align:center;
    padding:35px; }
    form, p, span {
    margin:0;
    padding:0; }
    input { font:12px arial; }
    a {
    color:#0000FF;
    text-decoration:none; }
    a:hover { text-decoration:underline; }
    #wrapper, #loginform {
    margin:0 auto;
    padding-bottom:25px;
    background:#EBF4FB;
    width:504px;
    border:1px solid #ACD8F0; }
    #loginform { padding-top:18px; }
    #loginform p { margin: 5px; }
    #chatbox {
    text-align:left;
    margin:0 auto;
    margin-bottom:25px;
    padding:10px;
    background:#fff;
    height:270px;
    width:430px;
    border:1px solid #ACD8F0;
    overflow:auto; }
    #usermsg {
    width:395px;
    border:1px solid #ACD8F0; }
    #submit { width: 60px; }
    .error { color: #ff0000; }
    #menu { padding:12.5px 25px 12.5px 25px; }
    .welcome { float:left; }
    .logout { float:right; }
    .msgln { margin:0 0 2px 0; }

    Nota: Gracias al man que elaboro este tutorial esta excelente, espero haber echo bien mi aporte suerte.

  27. cesar dice:

    Disculpen que cuando pege el cotenido de index.php, no se muestra todo el codigo ya que lo leeo como html. en fin lo unico que tienen que modificar en realidad es solo esto: dentro de index.php en la parte del
    script jquery. remplazar el $.ajax({});,

    $.ajax({//Inicio ajax
    url: “log.html”,
    cache: false,
    success: function(html){//Inicio del success
    $(“#chatbox”).html(html); //Inserta el log de chat en el div #chatbox
    //Auto-scroll
    var newscrollHeight = $(“#chatbox”).attr(“scrollHeight”) – 20; //La altura del scroll despu茅s del pedido
    if(newscrollHeight > oldscrollHeight){//inicio del if verificar scroll
    $(“#chatbox”).animate({ scrollTop: newscrollHeight }, ‘normal’); //Autoscroll hacia el fondo del div
    }//Fin del if verificar scroll
    }//Fin del success
    });//Fin ajax

  28. beto gayosso dice:

    entend铆 la parte uno, de ah铆 en adelante no supe donde pegar los codigos…

  29. Daniel dice:

    Segui todas las instrucciones, en localhost funciona perfectamente, incluso pude lograr hacer la conexion a una base de datos… pero el hecho esta que cuando subo el chat a un servidor, al principio funciona perfectamente, pero si dejas unos minutos de usar el chat se blokea completamente… ya no guarda los mensajes, y por consecuente ya no muestra el archivo actualizado porke no se registra ya nada solo lo que ya existia… alguien podria decirme que es lo que pasa???.. acaso es el servidor???… por cierto cuando se “traba” el chat trato de actualizar y dice que ya no se encuentra disponible el servidor.. y ya despues de unas horas vuelve a funcionar como si nada… :S

  30. Antonio Perez Hernandez dice:

    Hola,

    todo esta claro, solo tengo la duda de como nombrar los archivos! para poder realizar una prueba, espero y me puedan ayudar lo mas pronto posible

  31. Maria dice:

    hola si la verdad al principio esta bien explicado conque nombres se van a guardar pero luego no se sabe conque nombre se guardan porfa si me ayudan esque necesito hacer un chat

  32. andree dice:

    no tiene un link de descarga?

  33. albert dice:

    porque me sale este errror:Call to undefined function loginForm() in C:\xampp\htdocs\chat\index.php on line 46
    entiendo que dice que no esta definida la funcion,pero no entiendo porque si si esta definda,

  34. kheynner dice:

    hola me yamo kheynner y tengo problemas com mi chat , esta creado en php ,html,css,js ect… esta muy lento cada vez que escribo en la sala para que los demas user vean lo que escribi se tarda como 15 o 20 cegundos estoy buelto loco, no se ya que hacer ….si ustedes fueran tan amable de ayudarme aqui le dejo el lin del chat para que lo vean y entren gracias ..latinouniverso.org

  35. kheynner dice:

    otro detaye el index de mi chat es solo html php solo tengo un archibo que es el motor de la coneccion a la base de datos

  36. cecilia dice:

    Muy bueno!!

  37. Gato Blaco dice:

    MUUUUUUUCHISIMAS GRACIAS!!!!

    LO LOGRE!!! ^_^

    TUVE PROBLEMAS PERO LO LOGRE, PERSISTI HASTA EL FINAL Y LO LOGRE!

    YA SE CREAR CHATS! ^_^

    Y YA CREE UNO!

    ESTOY CONTENTO ^_^

  38. Gato Blanco dice:

    Hola soy yo de nuevo ^__^

    Me podriais recomendar una pagina web que me de un buen servicio de hostin gratuito para subir mi chat?

  39. Gato Blanco dice:

    Daniel es el Server, a mi me pasaba lo mismo al principio pero lo liego lo aloje en my-place.us y ya nunca me volvio a suceder . En my-place.us no se cae nunca y pueden entrar todos los usuarios que quieran. a diferencia de 000webhost.com que se me caia y solo podian entrar 3 personas. me choka 000webhost y que bueno que encontre my-place.us :D porque aqui si ya me va muy bien :D y lo recomiendo por eso porque mi cha funka muy bien en ese server , y solo por eso.

  40. Anonymous dice:

    Gracias por este tutorial y codigo fuente, pero tengo un pequelo problema, como hago para controlar o checar que no se registren usuarios con el mismo nombre o nick?

  41. Edgardo dice:

    Viendo EL tutorial me parece fantastico el chat, pero por desgracias no eh podido hacerlo funcionar es por eso que le pido a algunos de las personas que si le ah funcionado a ver si me lo puede mandar a mi correo el cual es: zeronorondo@hotmail.com, para poder usarlo, les agardeceria que alguien lo haga por favor.

  42. Anonimo dice:

    Hola Yo ya cree mi propio chat y ya se crear chats, Muchas Gracias miren aqui esta mi chat:

    http://chatbox.my-place.us/

    Esta Funcionando ahora mismo.

    Es un chat especialmente creado para Iphone y Ipod Touch.

    Es Recomendable entrar desde un iPhone o un Ipod Touch.

    Esa es una version de prueba. En Ficiembre subire la version oficial a la app store y esta tendra privados y muchas mas cosas.

    Y Sera Gratis!

    Esta version de prueba tiene Emoticones y BBcode para poner los Nicks y las Letras a Color y para Poner Urls.

    Gracias a este tutorial pude hacerlo y ya se crear chats.

    Me costo un poco de esfuerzo, fue un poco dificil… pero JAMAZ imposible.

    Y tambien le agregue un Script PHP que me da el “poder” de Bloquear a cualquier usuario mediante su Direccion Ip(la cual queda registrada en un archivo que cree cada vez que el usuario hace login se registra su ip).

    Y tmb puedo bloquear a esos usuarios “malintencionados” en tiempo real gracias a ese Script PHP. osea los puedo bloquear de forma instantanea.

    Es muy facil, para bloquear al usuario yo solo tengo que agregar su Ip al archivo que contiene el Script PHP(el que me permite bloquear) y al instante ese usuario es redirecionado a otra pagina donde se le informa que hasido bloqueado.

    Yo lo que hago es cargar ese archivo junto con el Log del chat, osea yo tengo el script php bloqueador en un archivo unico y lo meti en el archivo del Log.html usando un “. ASI que cada vez que se cargar el log se ejecuta ese archivo php y se verifica si ese usuario esta bloqueado.

    El archivo Bloqueador PHP es mas o menos asi:

    Para bloquear a alguien yo solo tengo que agregar la ip a ese archivo.(1 cosa mas, para hacer eso yo cambie la extension del archivo(log.html) por log.php porque para que se pueda ejecutar el Script PHP el archivo debe ser *.php)

    Y tmb programe el chat para que cuando el log.html alcanze los 8,000 OCHO BYTS el contenido del archivo se borre automaticamente y asi se limpia el historial de mi chat.

    Bueno y pues eso era .
    Graciass!!

  43. Anonimo dice:

    No me dejo poner el codigo…

    El archivo bloqueador es mas o menos asi

    ?php
    $ip1 = “111.111.111.111”;
    $ip2 = “222.222.222.222”;
    if($ip1==$_SERVER['REMOTE_ADDR']){
    header(“Location: accesodenegado.html”);
    }
    if($ip2==$_SERVER['REMOTE_ADDR']){
    header(“Location: accesodenegado.html”);
    }
    ?

    E incluyo ese archivo a principio del codigo del archivo index.php y del log.html(que en este caso lo cambie por log.php para poder incluir el bloqueador.php) usando un:

    ? include(“bloqueador.php”); ?

  44. Omar Hernandez dice:

    Hola…

    Solo para comentarle que si me funciono el script, esta un poco complidado, de hecho lo realize en dreamweaver cs6, y no me salian errores, pero al momento de correrlo en un navegador, no aparecia nada, revise y revise y nada, pero me percate de las 鈥濃 que no sirven las tuve que sustituir con las ” ” o ‘ ‘, haciendo todo y revisando de nuevo me corrio excelentemente:

    De hecho tienes que crear dos archivos uno que es el “index.php”, el otro que es “post.php” y por ultimo el “style.css”, el log.html se va a crear automaticamente.

    “Estructura del index.php” :

    <?php

    session_start();

    if(isset($_GET['logout'])){
    //Mensaje simple de salida
    $fp = fopen(“log.html”, ‘a’);
    fwrite($fp, “User “. $_SESSION['name'] .” has left the chat session.“);
    fclose($fp);
    session_destroy();
    header(“Location: index.php”); //Redirige al usuario
    }

    function loginForm(){
    echo ‘

    Please enter your name to continue:
    Name:

    ‘;
    }
    if(isset($_POST['enter'])){
    if($_POST['name'] != “”){
    $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
    }
    else{
    echo ‘Please type in a name';
    }
    }
    ?>

    Chat – Zcool

    Welcome,
    Exit Chat

    0){
    $handle = fopen(“log.html”, “r”);
    $contents = fread($handle, filesize(“log.html”));
    fclose($handle);
    echo $contents;

    }
    ?>

    // jQuery Document
    //Carga el archivo que contiene el log de chat
    function loadLog(){
    var oldscrollHeight = $(“#chatbox”).attr(“scrollHeight”) – 20; //La altura del scroll antes de la petici贸n
    $.ajax({
    url: “log.html”,
    cache: false,
    success: function(html){
    $(“#chatbox”).html(html); //Inserta el log de char en el div #chatbox
    //Auto-scroll
    var newscrollHeight = $(“#chatbox”).attr(“scrollHeight”) – 20; //La altura del scroll despu茅s del pedido
    if(newscrollHeight > oldscrollHeight){
    $(“#chatbox”).animate({ scrollTop: newscrollHeight }, ‘normal’); //Autoscroll hacia el fondo del div

    }
    },
    });
    }
    $(document).ready(function(){
    $(“#submitmsg”).click(function(){
    var clientmsg = $(“#usermsg”).val();
    $.post(“post.php”, {text: clientmsg});
    $(“#usermsg”).attr(“value”, “”);
    return false;
    });
    setInterval (loadLog, 100);
    });

    $(document).ready(function(){
    //Si el usuario quiere dejar la sesi贸n
    $(“#exit”).click(function(){
    var exit = confirm(“Are you sure you want to end the session?”);
    if(exit==true){window.location = ‘index.php?logout=true';}
    });
    });

    “Estructura del post.php” :

    <?
    session_start();
    if(isset($_SESSION['name'])){
    $text = $_POST['text'];
    $fp = fopen(“log.html”, ‘a’);
    fwrite($fp, “(“.date(“g:i A”).”) “.$_SESSION['name'].”: “.stripslashes(htmlspecialchars($text)).””);
    fclose($fp);
    }
    ?>

    “Estructura del style.css”:

    body {
    font:12px arial;
    color: #222;
    text-align:center;
    padding:35px; }
    form, p, span {
    margin:0;
    padding:0; }
    input { font:12px arial; }
    a {
    color:#0000FF;
    text-decoration:none; }
    a:hover { text-decoration:underline; }
    #wrapper, #loginform {
    margin:0 auto;
    padding-bottom:25px;
    background:#EBF4FB;
    width:504px;
    border:1px solid #ACD8F0; }
    #loginform { padding-top:18px; }
    #loginform p { margin: 5px; }
    #chatbox {
    text-align:left;
    margin:0 auto;
    margin-bottom:25px;
    padding:10px;
    background:#fff;
    height:270px;
    width:430px;
    border:1px solid #ACD8F0;
    overflow:auto;
    }
    #usermsg {
    width:395px;
    border:1px solid #ACD8F0; }
    #submit { width: 60px; }
    .error { color: #ff0000; }
    #menu { padding:12.5px 25px 12.5px 25px; }
    .welcome { float:left; }
    .logout { float:right; }
    .msgln { margin:0 0 2px 0; }

    El log.html se crea automaticamente no pasa ningun problema.

    NOTA: todos los archivos deben de estar en una carpeta en mi caso es “chat”.

    Espero y les sirve mucho de ayuda, que a mi me funciono perfectamente.

    Saludos desde Tlax. Mex.

    Correo: saherz90@yahoo.com

  45. Jose dice:

    Hola, muy buenos dias, les saludo desd Peru, e visto el video tutorial como tambien e leido st post y me parece interesante, quisiera que me enviaran los archivos a mi correo arthur_1460@hotmail.com, como para ir giandome poco a poco, soy novato en esto!!!!gracias

  46. Anonimo dice:

    Quiero compartir algo ya que gracias a este tutorial yo aprendi a hacer mi primer chat :)

    Bien voy a compartir 1 cosa muy importante…

    La seguridad Anti-Flood.

    Bien yo uso este script para protejer mi chat contra ataques de Flooding(Inundacion de Mensajes basura).

    var antiFlood=tomar_elTiempo();

    var tiempo=1; //Esta variable define cuantos segundos se debe esperar para enviar un nuevo mensaje

    var mensajeDeSeguridad=”FLOOD DETECTADO”; //Esta variable define el mensaje que se mostrara en un alert si se detecta un intento de flood

    function tomar_elTiempo(){
    return parseInt(new Date().getTime() / 1000);
    }

    $(鈥#submitmsg鈥).click(function(){
    if(antiFlood > (tomar_elTiempo() – tiempo)){
    alert(mensajeDeSeguridad);
    $(“#usermsg”).attr(“value”,””);
    antiFlood=tomar_elTiempo();
    return false;
    }
    else{
    antiFlood=tomar_elTiempo();
    var clientmsg = $(鈥#usermsg鈥).val();
    $.post(鈥漰ost.php鈥, {text: clientmsg});
    $(鈥#usermsg鈥).attr(鈥漹alue鈥, 鈥溾);
    return false;
    }
    });

    Y YA TA!! Ese es el script antiFlood que yo uso, la verdad sirve para frenar a usuarios normales y molestosos…

    Pero NO sirve para frenar a un “hacker” porque es un script escrito en Javascript (lenguaje local) y se puede manipular con solo teclear en el navegador “javascript:antiFlood=0″ asi que si lo que quieres es frenar a un “hacker” esto no te servira de mucho.

    Bueno pero si es para frenar a usuarios normales esto te sirve ;)

    Saludos volvere a compartir mas cositas.

  47. Anonimo dice:

    Hola soy yo de nuevo.. al parecer volvi muy pronto jaajajaja.

    Aqui SEGURIDAD ANTI-FLOOD + ANTI-SPAM

    El ANTI-SPAM evitara que un usuario envie el mismo mensaje 2 veces de forma consecutiva, lo cual le dara mas seguridad a tu chat :) bien lo hacemos?

    var antiFlood=tomar_elTiempo();

    var tiempo=1;

    var mensajeDeSeguridad=鈥滷LOOD DETECTADO鈥;

    var mensajeDeSeguridad_2=”SPAM DETECTADO”; // El mensaje a mostrar si se detecta spam

    var ultimoMensajeEnviado=””; //En esta variable guardaremos el ultimo mensaje que se envio

    function tomar_elTiempo(){
    return parseInt(new Date().getTime() / 1000);
    }
    $(鈥#submitmsg鈥).click(function(){
    if(antiFlood > (tomar_elTiempo() – tiempo)){
    alert(mensajeDeSeguridad);
    $(鈥#usermsg鈥).attr(鈥漹alue鈥,鈥”);
    antiFlood=tomar_elTiempo();
    return false;
    }
    else{
    antiFlood=tomar_elTiempo();
    var clientmsg = $(鈥#usermsg鈥).val();
    //Ahora comprobobamos si el mensaje que se intenta enviar es identico al ultimo mensaje que se envio
    if(ultimoMensajeEnviado==clientmsg){
    alert(mensajeDeSeguridad_2); //Mostramos el mensaje de seguridad
    $(“#usermsg”).attr(“value”,””); //Borramos lo que el usuario habia escrito
    return false; //Y retornamos falso para que no se haga nada mas
    }
    else{
    $.post(鈥漰ost.php鈥, {text: clientmsg});
    ultimoMensajeEnviado=clientmsg; //Guardamos el ultimo mensaje que se envio en la variable ultimoMensajeEnviado
    $(鈥#usermsg鈥).attr(鈥漹alue鈥, 鈥溾);
    return false;
    }
    }
    });

    Y YA TA AHORA TIENES TU CHAT MAS PROTEGIDO :)

    BYE BYE!

  48. Anonimo dice:

    YO DE NUEVO!!

    Cito a HECTOR, SI HECTOR SI SE PUEDE LO QUE DICES DEL AUTOSCROLL , ADEMAS FRENAR EL AUTOSCROLL NO AFECTARIA A LOS DEMAS USUARIOS PORQUE ESO ES ALGO LOCAL DUH!!… ESE ADMIN ERA UN CABRON. CLARO SI SE PUEDE PONER UNA OPCION PARA FRENAR Y HACER EL AUTOSCROLL COMO UN BOTON, ES ALGO SENCILLO BUF QUE ADMIN NI MAS CABRON!!.

    POR EJEMPLO:

    Es simple solo tendriamos que poner el AUTOSCROLL en funcion aparte de la funcion “loadLog()” ya veras como, mira:

    /*Aqui empieza el codigo Javascript ^_^ *\

    //Carga el archivo que contiene el log de chat
    function loadLog(){
    $.ajax({
    url: 鈥渓og.html鈥,
    cache: false,
    success: function(html){
    $(鈥#chatbox鈥).html(html); //Inserta el log de char en el div #chatbox
    }
    });
    }
    setInterval(“loadLog()”,2500);

    //La funcion para hacer autoScroll
    function autoScroll(){
    $(“#chatbox”).animate({scrollTop: 1000000000}, ‘normal’);
    }
    /*
    Crea un bucle setInterval para hacer autoscroll y lo asocia a la variable autoscroll
    *\
    var autoscroll=window.setInterval(“autoScroll()”,2500); //Hace el autoscroll
    //La funcion que detendra el autoscroll
    function detenerAutoscroll(){
    window.clearInterval(autoscroll); //Detiene el autoscroll
    }

    //La funcion que hara autoscroll si este se fue detenido
    function hacerAutoscroll(){
    var autoscroll=window.setInterval(“autoScroll()”,2500); //Hace el autoscroll de nuevo
    }
    /*Aqui finaliza el codigo JavaScript ^_^*\

    Ahora vamos con el codigo HTML con el que haremos que al hacer click en un boton el autoscroll se frene o se vuelva a ejecutar

    #!–Codigo HTML PRINCIPIO–#

    #!–El boton para detener el autoscroll–#
    #input type=”button” id=”control_1″ value=”Detener Autoscroll” onClick=”detenerAutoscroll()”#

    #!–El boton para hacer autoscroll si lo hemos detenido–#
    #input type=”button” id=”control_2″ value=”Hacer Autoscroll” onClick=”hacerAutoscroll()”#

    #!–FIN–#

    ESTE ES SOLO UN SENCILLISIMO EJEMPLO NO ES NADA COMPLICADO, ES SOLO PARA DEMOSTRAR QUE SI SE PUEDE HACER LO QUE DICE HECTOR O MEJOR DICHO SI SE PUEDE DETENER EL AUTOSCROLL Y EJECUTARLO OTRA VEZ CUANTAS VECES UNO QUIERA , ESTO SIRVE POR SI UNO TIENE GANAS DE VER EL HISTORIAL, CLARO SI UNO ES UN USUARIO NORMAL Y QUIERE VER!.

    EL ADMIN SOLO TENDRIA QUE ENTRAR AL log.html Y YA TA! PERO IGUAL ES UTIL.

    AUNQUE TMB SE PUEDE PONER UN LINK QUE APUNTE HACIA EL LA PAGINA DEL HISTORIAL Y YA TA!

    PD:para el codigo HTML reemplaza los signos de numero # por los signos correpondientes ya sabes los de “mayor que” y “menor que” (los que se usan en todas las etiquetas(tags) html) parece que no se ponen aqui

    BYE BYE

  49. Anonimo dice:

    Yo otra vez, miren mi chat aqui http://free.hostultra.com/~Cherry00/

    es para usuarios de iphone y ipod touch , entra desde tu iphone o ipod touch con el Safari Movil :)

    Aunke se puede entrar por PC pero la visualizacion es distinta XD ….

    Bueno yo logre hacer que se guarden solamente 47 mensajes en la pagina del log (historial) de mi chat ( OJO que yo NO uso MySQL) es puro PHP.

    Osea logre hacer que en mi pagina del historial solo se guarden exactamente 47 mensajes maximo usando solamente PHP, cuando el historial de mi chat llega a los 47 mensajes se borran los primeros 40 mensajes y se quedan los ultimos 7 mensajes solamente y asi sucesivamente cada vez que el historial llega a los 47 mensajes (es algo muy simple en realidad aunque no lo parezca)

    Yo no digo esto solo para que digan “WOW Mira lo que logro este!!” NE NE …

    Yo lo que deseo es ayudar a las personas que No saben como mantener su historial limpio.

    Si quieren saber como hacer esto comuniquense conmigo a mi E-mail gatofelizfeliz@yahoo.es y yo les ense帽are con lujo de detalles a hacerlo, les enviare el codigo PHP GRATIS!!.

    Con este simple codigo PHP pueden hacer que cuando el historial tenga 100 mensajes (por ejemplo) este se borre y deje solamente los 10 ultimos mensajes(por ejemplo). Asi es como yo lo hago en mi chat porque quiero pero en realidad con ese mismo codigo PHP puedes hacer que en el historial siempre alla solamente 20 mensajes (por ejemplo) .

    Ademas este codigo te servira para tener contados los mensajes que hay en el chat ^_^ GENIAL!!

    entra a mi chat y ve la prueba http://free.hostultra.com/~Cherry00/

  50. Anonimos dice:

    OTRA VEZ YO.

    No es necesario usar el “setInterval(‘loadLog()’,2500);”

    Tambien pueden hacer esto:

    //Carga el archivo que contiene el log de chat
    function loadLog(){
    $.ajax({
    url: 鈥渓og.html鈥,
    cache: false,
    success: function(html){
    $(鈥#chatbox鈥).html(html); //Inserta el log de chat en el div #chatbox
    loadLog(); //Aqui esta el truco.
    /* Como vez, cuando se cargue el log del chat la funcion loadLog() se volvera a ejecutar y como la funcion loadLog() es la que carga el log del chat se producira un ciclo infinito que mantendra tu chat actualizado de la forma mas rapida posible
    */
    }
    });
    }
    loadLog();//Se ejecuta por primera vez la funcion loadLog()

    Vieron que facil es? hahaha

  51. Leo dice:

    SEGURIDAD ANTI-FLOOD DEL LADO DEL SERVIDOR BY GOOGLE (ejeje)

    Este es un script Anti-Flood escrito en PHP lo he probado y funciona muy bien.

    Codigo:

    ?php
    if(!isset($_SESSION)){
    session_start();
    }
    if($_SESSION['up'] > time() – 2){
    /*… Aqui pones lo que se hara si se detecta un intento de flood, yo en este ejemplo pondre “exit;” para cerrar el programa y no hacer nada mas…*/
    exit;
    }
    else{
    /*… Aqui pone lo que si No se detecta el flood, por ejemplo postear el mensaje del chat…*/
    }
    $_SESSION['up']=time();
    ?

  52. Leo dice:

    CONTINUACION DEL SCRIPT ANTI FLOOD BY GOOGLE

    El numero 2 que hay en el codigo le indica al programa “que si alguien hace mas de una peticion HTTP GET, POST, en menos de 2 segundos se ejecute lo que hay dentro de la condicion if”

    Osea ese numero es para poner cuanto tiempo debe tardar la persona para poder enviar un nuevo mensaje a nuestro chat.

    Por ejemplo, si tu usas ese codigo en tu chat cada vez que una persona envie un mensaje esa persona tiene que esperar 2 segundos para poder enviar otro mensaje.

    Y si esa persona intenta enviar ese mensaje antes de que pasen esos 2 segundos, el mensaje simplemente no se posteara. No sucedera nada si lo envia antes de que pasen esos 2 segundos.

    Modificando ese numero modificas el tiempo el usuario tendra que esperar despues que envie un mensaje para poder enviar otro.

    Adios

  53. Xavier dice:

    Hola a todos!! sabes yo realize un chat con menos codigo… usando php, AJAX y MYSQL en fin aplicarle un poco de dise帽o queda exactamente muy bueno….

  54. Edu dice:

    ya tengo mi chat ahora a modificarlo luego lo colgare:D para que lo vean

  55. Josue dice:

    Xavier como hiciste tu chat en php ?

  56. Javier dice:

    No me corre, no se actualiza el contenido del chat de forma automatica, solo cuando un usuario escribe algo se le actualiza, pero si le responden no aparece la respuesta

  57. benito camelo dice:

    a mi si me funciono, tks

  58. Huicho dice:

    Cuando doy enviar mi mensaje dentro del chat me regresa nuevamente a la pagina de login, alguno tendra una idea de porque este problema?

  59. frank dice:

    me funciono, incluyendo los antiflood; pero como haria si quisiera mostrar los mensajes de ese usuario, y ademas borrar la conversacion cuando se cierre la session?

  60. Jaqueline dice:

    Hola por favor.!!
    ahy alguien a quien le a salido sin ningun problema?
    xfavor enviarmelo a mi correo: Jaqueline_la12@hotmail.com
    les agradeceria de ante mano…

  61. David Reyes dice:

    Hola podr铆an pasarme los archivos por favor, soy nuevo en esto y no puedo hacer que me funcione. de antemano gracias

  62. Luis dice:

    Excelente articulo, muchas gracias por el aport, solo una cosa, En lugar de un SetInterval, yo aplicar铆a un long polling, con esto reduces la carga del sistema ya que en muchas ocaciones vas a tener peticiones innecesarias.

    Saludos

  63. Irack dice:

    Yo he probado el de http://chatgratis.com.mx/ es gratis y se implementa de una manera sencilla en cualquier web.

  64. luis arreta dice:

    buenisimo, muchas gracias.
    podeis poner porfavor el codigo completo para los torpes como yo?

  65. Borrar archivo cuando llegue a 1mb o despus de un determinado tiempo | Da Webmasters dice:

    [...] puede, vi por ah铆 mucha gente que hizo eso pero no dicen como Edito: este es el c贸digo que tengo: http://www.elwebmaster.com/articulos…n-php-y-jquery Me gustar铆a poder borrar el archivo log.html cuando llegue a un tama帽o o tiempo establecido. Sigo [...]

  66. neo dice:

    hola muy buena info….

  67. camilo dice:

    sera que alguien me lo puede pasar en un .rar es que soy novato y no entiendo como unir los codigos

  68. paholo dice:

    me podr铆as enviar los archivos por favor

    Gracias

    Saludos,

  69. Miguel dice:

    Hola.
    En localhost funciona perfectamente, pero cuando lo subo al servidor web deja de funcionar, la p谩gina no para de refrescarse y aparece en blanco..
    驴Alguien sabe por que puede ser?, si quito el setInterval la p谩gina no se actualiza nunca.

    Gracias, saludos.

  70. Daniel De la Cruz Trejo dice:

    Alguien que me pueda enviar todo en un archivo .zip , estoy trabajando en la plataforma Ubuntu, y no me me permite visualizar todo el contenido en el navegador, me ocasiona problemas, si serian tan amables, gracias

  71. felix dice:

    Hola se帽ores no se pero no me funciona, no se que estoy haciendo mal pero nada. alguien tiene los archivos listos y me los mande al correo para probarlos. muchas gracias

  72. dina dice:

    hola yo tengo la traducci贸n en asp clasico, con algunas mejoras como enviar una alerta de sonido por el administardor a los demas usaurios

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder