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

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.











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’

‘;
}
if(isset($_POST['enter'])){
if($_POST['name'] != “”){
$_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
}
else{
echo ‘Por Favor Ingrese Su Nombre';
}
}
?>
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.
if(!isset($_SESSION['name'])){
loginForm();
}
else{
?>



}
?>

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.

Bienvenido/a,

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

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, “”);
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, “”);
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().


[size