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

Crea tu propia aplicación de chat 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 eintercambiar 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

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.

Welcome,

Exit Chat

• 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’

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

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{
?>

Welcome,

Exit Chat

}
?>

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.

Welcome,

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, “

User “. $_SESSION['name'] .” has left the chat session.

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

(”.date(”g:i A”).”) ”.$_SESSION['name'].”: “.stripslashes(htmlspecialchars($text)).”

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

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

echo $contents;
}
?>

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?