Chat Con PHP y jQuery
-
Upload
karlos1988 -
Category
Documents
-
view
95 -
download
1
Transcript of 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>
Crea tu propia aplicación de chat con PHP y jQuery - elWebmaster.com http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...
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 */
Crea tu propia aplicación de chat con PHP y jQuery - elWebmaster.com http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...
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; }
Crea tu propia aplicación de chat con PHP y jQuery - elWebmaster.com http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...
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(){
Crea tu propia aplicación de chat con PHP y jQuery - elWebmaster.com http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...
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();
Crea tu propia aplicación de chat con PHP y jQuery - elWebmaster.com http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...
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>
<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.
Crea tu propia aplicación de chat con PHP y jQuery - elWebmaster.com http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...
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.
<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
Crea tu propia aplicación de chat con PHP y jQuery - elWebmaster.com http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...
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.
Crea tu propia aplicación de chat con PHP y jQuery - elWebmaster.com http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...
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().
Crea tu propia aplicación de chat con PHP y jQuery - elWebmaster.com http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...
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.
Crea tu propia aplicación de chat con PHP y jQuery - elWebmaster.com http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...
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
Crea tu propia aplicación de chat con PHP y jQuery - elWebmaster.com http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...
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
Crea tu propia aplicación de chat con PHP y jQuery - elWebmaster.com http://www.elwebmaster.com/articulos/crea-tu-propia-aplicacion-de-chat...
13 de 13 30/01/2014 01:55 a.m.