Chat Con PHP y jQuery

MICAELA 13 DE AGOSTO DE 2009 A LAS 09.03

Crea tu propia aplicación dechat con PHP y jQuery

PHP, APLICACIONES, RECURSOS, CHAT, JQUERY, DISEÑO WEB,

CHATLOG

Para 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

Honda - Official UK Sitehonda.co.uk

View Our Range Of Honda Cars Find Out More And Book A Test Drive

Crea tu propia aplicación de chat con PHP y jQuery - elWebmaster.com http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...

1 de 13 30/01/2014 01:55 a.m.

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>


2 de 13 30/01/2014 01:55 a.m.

<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 */


3 de 13 30/01/2014 01:55 a.m.

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; }


4 de 13 30/01/2014 01:55 a.m.

#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(){


5 de 13 30/01/2014 01:55 a.m.

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();


6 de 13 30/01/2014 01:55 a.m.

}

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>


// jQuery Document


});

</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.


7 de 13 30/01/2014 01:55 a.m.

<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.



//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


8 de 13 30/01/2014 01:55 a.m.

$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.

jQueryCasi 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.


9 de 13 30/01/2014 01:55 a.m.

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().


10 de 13 30/01/2014 01:55 a.m.

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.


11 de 13 30/01/2014 01:55 a.m.

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


12 de 13 30/01/2014 01:55 a.m.

Twittear 5 7Me gustaMe gusta

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 +

Live Demozkoss.org

Try your AJAX code online! Rapidly create Java Web apps


13 de 13 30/01/2014 01:55 a.m.

Chat Con PHP y jQuery

Documents

Transcript of Chat Con PHP y jQuery