Crea tu propia aplicacin de chat con PHP y jQuery - elWebmaster.

com

http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...

MICAELA

13 DE AGOSTO DE 2009 A LAS 09.03

Crea tu propia aplicacin de chat con PHP y jQuery

Ho !" # O$$%&%"' U( S%)*
+o !".&o.,.%*/ O,0 R" 1* O$ Ho !" C"02 3% ! O,) Mo0* A ! Boo- A T*2) D0%4*
PHP, APLICACIONES, RECURSOS, CHAT, JQUERY, DISEO 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 ensearemos a travs de pocos pasos cmo crear una simple aplicacin web de chat utilizando conocimientos de PHP y jQuery. Ests preparado !"omencemos#

$ntroduccin

1 de 1

!/!1/"!1# !1:$$ a.m.

Crea tu propia aplicacin de chat con PHP y jQuery - elWebmaster.com

http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...

%a aplicacin de chat que crearemos ser bastante simple. %a misma incluir un sistema de lo&ueo y deslo&ueo, propiedades estilo '('), y tambin o*recer soporte para usuarios m+ltiples.

Paso , - "di&o ./0%

"omenzaremos creando nuestro primer archivo llamado inde1.php. 2#34"/5PE html P67%$" 89::;<"::3/3 )./0% ,.= /ransitional::E>? 8http-::www.w<.or&:/@:1html,:3/3:1html,9transitional.dtd?A 2html 1mlnsB?http-::www.w<.or&:,CCC:1html?A 2headA 2titleA"hat 9 "ustomer 0odule2:titleA 2linD typeB?te1t:css? relB?stylesheet? hre*B?style.css? :A 2:headA 2div idB?wrapper?A 2div idB?menu?A 2p classB?welcome?A;elcome, 2bA2:bA2:pA 2p classB?lo&out?A2a idB?e1it? hre*B?E?AE1it "hat2:aA2:pA 2div styleB?clear-both?A2:divA 2:divA

" de 1

!/!1/"!1# !1:$$ a.m.

Crea tu propia aplicacin de chat con PHP y jQuery - elWebmaster.com

http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...

2div idB?chatbo1?A2:divA 2*orm nameB?messa&e? actionB?FA 2input nameB?userms&? typeB?te1t? idB?userms&? sizeB?G<H :A 2input nameB?submitms&? typeB?submit? idB?submitms&? valueB?Iend? :A 2:*ormA 2:divA 2script typeB?te1t:Javascript? srcB?http-::aJa1.&oo&leapis.com:aJa1:libs:Jquery :,.<:Jquery.min.Js?A2:scriptA 2script typeB?te1t:Javascript?A KLdocumentM.readyL*unctionLMN OMP 2:scriptA 2:bodyA 2:htmlA "omenzamos nuestro html con el 34"/5PE usual, etiquetas html, head y body. En la etiqueta head aadimos nuestro tQtulo y el linD a nuestra hoJa de estilos css Lstyle.cssM. 3entro de la etiqueta body, estructuramos nuestro diseo dentro del div Ewrapper. /endremos 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 Emenu consistir de dos elementos de prra*o. El primero ser una bienvenida al usuario y har *loat a la izquierda, y el se&undo ser un linD de salida y har *loat a la derecha. /ambin incluimos un div para aclarar los elementos. El div Echatbo1 contendr nuestra caJa de chat. "ar&aremos nuestro *ormulario de lo& desde un archivo e1terno utilizando una peticin aJa1 de JRuery. El ultimo Qtem en nuestro div Ewrapper ser el *ormulario, el cual incluir una entrada de te1to para el mensaJe del usuario y un botn de 8enviar?. Sinalmente incluimos nuestros script para que la p&ina car&ue ms rpido. Primero haremos linDs a Too&le JRuery "3>, dado que estaremos usando la librerQa JRuery para este tutorial. >uestra se&unda etiqueta de script ser en lo que estaremos trabaJando. "ar&aremos todo nuestro cdi&o una vez que el documento est listo.

Paso U - estilado "II

'hora aadiremos al&o de "II para hacer que nuestra aplicacin de chat luzca meJor. El cdi&o que deJamos a continuacin ser aadido a nuestro archivo style.css:V "II 3ocument V:

de 1

!/!1/"!1# !1:$$ a.m.

Crea tu propia aplicacin de chat con PHP y jQuery - elWebmaster.com

http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...

body N *ont-,Up1 arialP color- EUUUP te1t9ali&n-centerP paddin&-<Wp1P O *orm, p, span N mar&in-=P paddin&-=P O input N *ont-,Up1 arialP O aN color-E====SSP te1t9decoration-noneP O a-hover N te1t9decoration-underlineP O Ewrapper, Elo&in*orm N mar&in-= autoP paddin&9bottom-UWp1P bacD&round-EE7SXS7P width-W=Xp1P border-,p1 solid E'"3YS=P O Elo&in*orm N paddin&9top-,Yp1P O Elo&in*orm p N mar&in- Wp1P O Echatbo1 N te1t9ali&n-le*tP mar&in-= autoP mar&in9bottom-UWp1P paddin&-,=p1P bacD&round-E***P hei&ht-UZ=p1P width-X<=p1P border-,p1 solid E'"3YS=P over*low-autoP O Euserms& N width-<CWp1P border-,p1 solid E'"3YS=P O Esubmit N width- G=p1P O .error N color- E**====P O

# de 1

!/!1/"!1# !1:$$ a.m.

Crea tu propia aplicacin de chat con PHP y jQuery - elWebmaster.com

http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...

Emenu N paddin&-,U.Wp1 UWp1 ,U.Wp1 UWp1P O .welcome N *loat-le*tP O .lo&out N *loat-ri&htP O .ms&ln N mar&in-= = Up1 =P O >o hay nada especial en el "II de arriba, ms que el hecho de que al&unas clases o ids, para las cuales hemos pro&ramado un estilo, sern aadidas despus.

"omo pueden ver, ya hemos terminado de construir la inter*az de usuario de nuestro chat.

Paso < - 6tilizando P.P para crear un *ormulario de lo&in

'hora implementaremos un simple *ormulario que le pre&untar al usuario su nombre antes de se&uir adelante. 2 session[startLMP *unction lo&inSormLMN

$ de 1

!/!1/"!1# !1:$$ a.m.

Crea tu propia aplicacin de chat con PHP y jQuery - elWebmaster.com

http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...

echo\ 2div idB?lo&in*orm?A 2*orm actionB?inde1.php? methodB?post?A 2pAPlease enter your name to continue-2:pA 2label *orB?name?A>ame-2:labelA 2input typeB?te1t? nameB?name? idB?name? :A 2input typeB?submit? nameB?enter? idB?enter? valueB?Enter? :A 2:*ormA 2:divA ]P O i*LissetLK[P4I/^_enter_`MMN i*LK[P4I/^_name_` #B 8?MN K[IEII$4>^_name_` B stripslashesLhtmlspecialcharsLK[P4I/^_name_`MMP O elseN echo ]2span classB?error?APlease type in a name2:spanA\P O O A %a *uncin lo&inSormLM que hemos creado est compuesta de un simple *ormulario de lo&in que le pide al usuario su nombre. "uando usamos una declaracin i* y else es para veri*icar que la persona in&res su nombre. Ii lo hizo, pro&ramamos ese nombre como K[IEII$4>^_name_`. 3ado que estamos usando una sesin basada en cooDies para almacenar el nombre, debemos llamar session[startLM antes de que al&o sea mostrado en el nave&ador. 6na cosa a la que puede que quieras prestarle atencin es que hemos utilizado la *uncin htmlspecialcharsLM, la cual convierte caracteres especiales en entidades ./0%, para asQ prote&er a la variable nombre de convertirse en una vQctima de "ross9site scriptin& L)IIM. 0s tarde tambin aadiremos esta *uncin a la variable te1to que usaremos en el lo& de chat.

Paso X- 0ostrando el *ormulario de %o&in

Para poder mostrar el *ormulario de lo&in en el caso de que un usuario no haya in&resado al sistema, utilizamos otra declaracin i* y else alrededor del div Ewrapper y las etiquetas script de nuestro cdi&o ori&inal. En el caso opuesto, esto ocultar el *ormulario de lo&in, y mostrar la caJa de chat si el usuario ya ha in&resado al sistema y ha creado una sesin de chat. 2 php i*L#issetLK[IEII$4>^_name_`MMN lo&inSormLMP

% de 1

!/!1/"!1# !1:$$ a.m.

Crea tu propia aplicacin de chat con PHP y jQuery - elWebmaster.com

http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...

O elseN A 2div idB?wrapper?A 2div idB?menu?A 2p classB?welcome?A;elcome, 2bA2 php echo K[IEII$4>^_name_`P A2:bA2:pA 2p classB?lo&out?A2a idB?e1it? hre*B?E?AE1it "hat2:aA2:pA 2div styleB?clear-both?A2:divA 2:divA 2div idB?chatbo1?A2:divA 2*orm nameB?messa&e? actionB?FA 2input nameB?userms&? typeB?te1t? idB?userms&? sizeB?G<H :A 2input nameB?submitms&? typeB?submit? idB?submitms&? valueB?Iend? :A 2:*ormA 2:divA 2script typeB?te1t:Javascript? srcB?http-::aJa1.&oo&leapis.com:aJa1:libs:Jquery :,.<:Jquery.min.Js?A2:scriptA 2script typeB?te1t:Javascript?A :: JRuery 3ocument KLdocumentM.readyL*unctionLMN OMP 2:scriptA 2 php O A

Paso W- 0en+ de bienvenida y de %o&out

'hora necesitamos aadir el lo& out del usuario y el cierre de la sesin de chat. Ii lo puedes recordar, nuestro cdi&o ./0% ori&inal incluQa un men+ simple. aolvamos a eso y aadmosle al&o de P.P que le dar al men+ ms *uncionalidades. Primero que nada, debemos aadir el nombre de usuario al mensaJe de bienvenida. .acemos esto mostrando la sesin del nombre de usuario.

& de 1

!/!1/"!1# !1:$$ a.m.

Crea tu propia aplicacin de chat con PHP y jQuery - elWebmaster.com

http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...

2p classB?welcome?A;elcome, 2bA2 php echo K[IEII$4>^_name_`P A2:bA2:pA

Para permitir al usuario deslo&uearse al *inal de la sesin, utilizaremos un poco de JRuery. 2script typeB?te1t:Javascript?A KLdocumentM.readyL*unctionLMN ::Ii el usuario quiere deJar la sesin KL?Ee1it?M.clicDL*unctionLMN var e1it B con*irmL?'re you sure you want to end the session ?MP i*Le1itBBtrueMNwindow.location B ]inde1.php lo&outBtrue\PO OMP OMP 2:scriptA El cdi&o JRuery de arriba simplemente muestra una alerta de con*irmacin si un usuario hace clic en el linD Ee1it. Ii el usuario con*irma la salida, decidiendo asQ cerrar la sesin, entonces lo mandamos a inde1.php lo&outBtrue. Esto simplemente crea una variable llamada lo&out con el valor true. >ecesitamos tomar esta variable con P.P-

i*LissetLK[TE/^_lo&out_`MMN ::0ensaJe simple de salida

' de 1

!/!1/"!1# !1:$$ a.m.

Crea tu propia aplicacin de chat con PHP y jQuery - elWebmaster.com

http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...

K*p B *openL?lo&.html?, ]a\MP *writeLK*p, 82div classB\ms&ln\A2iA6ser 8. K[IEII$4>^_name_` .? has le*t the chat session. 2:iA2brA2:divA?MP *closeLK*pMP session[destroyLMP headerL?%ocation- inde1.php?MP ::@ediri&e al usuario O 'hora nos *iJamos si una variable &et de ]lo&out\ e1iste usando la *uncin issetLM. Ii la variable ha sido pasada por medio de una url, tal como el linD mencionado anteriormente, procedemos a terminar la sesin del nombre de usuario. 'ntes de destruir la sesin del nombre de usuario con la *uncin session[destroyLM, queremos escribir un simple mensaJe de salida en el chat lo&. El mismo dir que el usuario ha deJado la sesin de chat. %o&ramos esto mediante las *unciones *openLM, *writeLM y *closeLM para manipular nuestro archivo lo&.html, que como veremos ms adelante, ser creado como nuestro lo& de chat. >oten que hemos creado una clase de ]ms&ln\ para el div. /ambin ya hemos de*inido el estilo "II para este div. %ue&o de hacer esto, destruimos la sesin y redireccionamos al usuario a la misma p&ina donde el *ormulario de lo&in aparecer.

Paso G- 0aneJando las entradas del 6suario

6na vez que el usuario envQa nuestro *ormulario, deseamos tomar su entrada y escribirla en nuestro lo& de chat. Para lo&rar esto, debemos usar JRuery y P.P para trabaJar de *orma sincronizada en los lados del cliente y el servidor.

JRuery
"asi todo lo que vamos a hacer con JRuery para poder maneJar nuestra in*ormacin, se basar en la peticin post JRuery. KL?Esubmitms&?M.clicDL*unctionLMN var clientms& B KL?Euserms&?M.valLMP K.postL?post.php?, Nte1t- clientms&OMP KL?Euserms&?M.attrL?value?, 8?MP return *alseP OMP 'ntes de hacer nada, debemos tomar la entrada del usuario, o lo que l ha tipeado en la entrada Esubmitms&. Esto se puede lo&rar mediante la *uncin valLM, la cual obtiene el valor pro&ramado en un campo del *ormulario. 'hora almacenamos este valor dentro de la variable clientms&.

( de 1

!/!1/"!1# !1:$$ a.m.

Crea tu propia aplicacin de chat con PHP y jQuery - elWebmaster.com

http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...

'quQ viene la parte ms importante- la peticin de post JRuery. Esto envQa una peticin P4I/ al archivo post.php que crearemos en un momento. Esto postea la entrada del cliente, o lo que ha sido &uardado dentro de la variable clientms&. Sinalmente, limpiamos la entrada Euserms&, pro&ramando el valor del atributo en blanco. >oten que el cdi&o de arriba ir en nuestra etiqueta script, dnde hemos colocado el cdi&o JRuery de lo&out.

PHP - post.php
'l momento tenemos in*ormacin P4I/ siendo mandada al archivo post.php cada vez que el usuario envQa el *ormulario y manda un nuevo mensaJe. >uestra meta es reco&er esta in*ormacin y escribirla en nuestro lo& de chat. 2 session[startLMP i*LissetLK[IEII$4>^_name_`MMN Kte1t B K[P4I/^_te1t_`P K*p B *openL?lo&.html?, ]a\MP *writeLK*p, 82div classB\ms&ln\AL?.dateL?&-i '?M.?M 2bA?.K[IEII$4>^_name_`.?2:bA8.stripslashesLhtmlspecialcharsLKte1tMM.?2brA2:divA?MP *closeLK*pMP O A Primero debemos comenzar el archivo post.php *ile con la *uncin session[startLM dado que estaremos usando la sesin del nombre de usuario en este archivo. 6tilizando el isset boolean, nos *iJamos si la sesin para ]name\ e1iste antes de hacer al&o ms. 'hora tomamos la in*ormacin P4I/ que ha sido enviada a este archivo mediante JRuery. %ue&o almacenamos esta in*ormacin en la variable Kte1t. Esta in*ormacin ser almacenada en el archivo lo&.html. Para lo&rar esto abrimos el archivo con el modo en la *uncin *open seteado en ]a\, que de acuerdo a php.net abre el archivo para slo escrituraP y coloca el puntero del archivo al *inal del mismo. Ii el archivo no e1iste, debes crearlo. %ue&o escribimos nuestro mensaJe para el archivo usando la *uncin *writeLM. El mensaJe que escribiremos ser incluido dentro del div ms&ln. bste contendr la *echa y hora &enerada por la *uncin dateLM, la sesin del nombre de usuario, y el te1to, que tambin est rodeado por la *uncin htmlspecialcharsLM para prevenirlo de )II. Sinalmente, cerramos nuestro archivo usando *closeLM.

1! de 1

!/!1/"!1# !1:$$ a.m.

Crea tu propia aplicacin de chat con PHP y jQuery - elWebmaster.com

http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...

Paso Z- 0ostrando el contenido del "hat %o& Llo&.htmlM

/odo lo que el usuario ha escrito se maneJa y postea por medio de JRuery. Ie escribe en el lo& del chat con P.P. %o +nico que resta hacer es mostrarle al usuario el chat lo& actualizado. Para ahorrar al&o de tiempo, precar&aremos el lo& de chat en el div Echatbo1 si ste tiene al&o de contenido. 2div idB?chatbo1?A2 php i*L*ile[e1istsL?lo&.html?M cc *ilesizeL?lo&.html?M A =MN Khandle B *openL?lo&.html?, 8r?MP Kcontents B *readLKhandle, *ilesizeL?lo&.html?MMP *closeLKhandleMP echo KcontentsP O A2:divA 6tilizamos una rutina similar a la usada con el archivo post.php, salvo que ahora slo estamos leyendo y mostrando el contenido del archivo.

La peticin de jQuery.ajax
%a peticin 'Ja1 es el corazn de todo lo que estamos haciendo. Esta peticin no slo nos permite enviar y recibir in*ormacin a travs del *ormulario sin tener que actualizar la p&ina, sino que tambin nos permite maneJar la peticin de in*ormacin. ::"ar&a el archivo que contiene el lo& de chat *unction load%o&LMN K.aJa1LN url- 8lo&.html?, cache- *alse, success- *unctionLhtmlMN KL?Echatbo1?M.htmlLhtmlMP ::$nserta el lo& de chat en el div Echatbo1 O, OMP O Envolvemos nuestra peticin aJa1 dentro de una *uncin. "omo ven arriba, slo utilizamos < de los obJetos de peticin de JRuery 'Ja1. url- 6n strin& de 6@% a peticin. 6saremos nuestro nombre de archivo del lo& de chat de lo&.html.

11 de 1

!/!1/"!1# !1:$$ a.m.

Crea tu propia aplicacin de chat con PHP y jQuery - elWebmaster.com

http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...

cache- Esto prever que nuestro archivo sea cacheado. Ie ase&urar que obten&amos un chat lo& actualizado cada vez que enviemos una peticin. sucess- Esto nos permitir adJuntar una *uncin que pasar la in*ormacin que hemos solicitado. "omo pueden ver, lue&o movemos la in*ormacin que hemos solicitado LhtmlM dentro del div Echatbo1.

Auto-scrollin
"omo puede que hayan visto en otras aplicaciones de chat, el contenido automticamente hace scroll hacia abaJo si el contenedor del lo& de chat LEchatbo1M se llena. >osotros implementaremos una *uncin simple y similar, que comparar la altura del scroll del contenedor antes y despus de que ha&amos la peticin 'Ja1. Ii la altura del scroll es mayor despus de la peticin, usaremos un e*ecto animado JRuery para hacer scroll en el div Echatbo1. ::"ar&a el archivo que contiene el lo& de chat *unction load%o&LMN var oldscroll.ei&ht B KL?Echatbo1?M.attrL?scroll.ei&ht?M 9 U=P ::%a altura del scroll antes de la peticin K.aJa1LN url- 8lo&.html?, cache- *alse, success- *unctionLhtmlMN KL?Echatbo1?M.htmlLhtmlMP ::$nserta el lo& de char en el div Echatbo1 ::'uto9scroll var newscroll.ei&ht B KL?Echatbo1?M.attrL?scroll.ei&ht?M 9 U=P ::%a altura del scroll despus del pedido i*Lnewscroll.ei&ht A oldscroll.ei&htMN KL?Echatbo1?M.animateLN scroll/op- newscroll.ei&ht O, ]normal\MP ::'utoscroll hacia el *ondo del div O O, OMP O 'ntes de hacer la peticin almacenamos la altura del scroll del div Echatbo1 en la variable oldscroll.ei&ht. %ue&o de que la peticin ha resultado e1itosa, almacenamos la altura del scroll del div Echatbo1 en la variable newscroll.ei&ht. %ue&o comparamos ambas alturas de scroll usando una delcaracin i*. Ii newscroll.ei&ht es

1" de 1

!/!1/"!1# !1:$$ a.m.

Crea tu propia aplicacin de chat con PHP y jQuery - elWebmaster.com

http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...

mayor que oldscroll.ei&ht, utilizamos el e*ecto animado para hacer scroll en el div Echatbo1.

Actuali!ando constantemente el "hat Lo

'hora puede que surJa la pre&unta "mo actualizaremos constantemente la nueva in*ormacin que es enviada por los usuarios set$nterval Lload%o&, UW==MP el se&undo parmetro ::@ecar&a el archivo cada UW== ms o 1 ms si deseas cambiar

%a respuesta a nuestra pre&unta descansa en la *uncin set$nterval. Esta *uncin correr nuestra *uncin load%o&LM cada U.W se&undos, y la *uncin load%o& solicitar el archivo actualizado y har autoscroll del div.

#Listo$ IQ, ya hemos terminado. Pueden utilizar esto como base para construir una sala de chat m+ltiple, aadir emoticones, etc. !El cielo es el lQmite# Suente- >et /uts d

Twittear

Me gusta

L%4* D*7o
8-o22.o01 T09 9o,0 AJA: &o!* o '% *; R"<%!'9 &0*")* J"4" W*= "<<2

1 de 1

!/!1/"!1# !1:$$ a.m.