Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Cómo Crear un Chat Sencillo para una Aplicación Web

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by David Castrillón (you can also view the original English article)

En este tutorial estaremos creando un chat sencillo para una aplicación web con PHP y jQuery. Esta clase de utilidad sería perfecta para un sistema de soporte en vivo para tu sitio web.


Introducción

final product

El chat que estaremos construyendo hoy será muy simple. Incluirá un sistema de login, características con estilo AJAX, y también ofrecerá soporte para múltiples usuarios.


Paso 1: Marcado HTML

Comenzaremos este tutorial creando nuestro primer archivo llamado index.php

  • Comenzamos nuestro html con las etiquetas usuales DOSCTYPE, html, head y body. En la etiqueta head, ponemos nuestro título y enlazamos el documento 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 Menú sencillo, nuestra caja de chat, y la entrada del mensaje; cada uno con sus respectivos div y id.
    • El div #menu consistirá de dos elementos de párrafo. El primero será una bienvenida para el usuario y flotará a la izquierda y el segundo, será un link de salida y flotará a la derecha. También incluiremos un div para limpiar los elementos.
    • El div #chatbox contendrá nuestro registro del chat. Cargaremos nuestro registro desde un archivo externo usando una solicitud de ajax de jQuery.
    • El último ítem en nuestro div #wrapper será nuestro formulario, el cual incluirá una entrada de texto para el mensaje del usuario y un botón de enviar.
  • Agregamos nuestros scripts de último para cargar la página más rápido. Primero enlazaremos la librería de Google jQuery CDN, ya que estaremos usando esta librería en este tutorial. Nuestra segunda etiqueta script estará donde estaremos trabajando. Cargaremos todo nuestro documento después de que el documento esté listo.

Paso 2 : Estilos CSS

Ahora agregaremos algo de CSS para hacer que nuestro chat se vea mejor que con los estilos por defecto del navegador. El código abajo será agregado a nuestro archivo style.css.

No hay nada especial en el css de arriba, más que el hecho de que algunas de las clases o los id´s, los cuales hemos establecido, serán añadidos un poco más adelante.

Como puedes ver arriba, hemos terminado de construir la interfaz de usuario de nuestro chat.

Paso 3: Usando PHP para Crear un Formulario de Registro.

Ahora implementaremos un formulario sencillo que preguntará al usuario su nombre antes de seguir adelante.

La función loginForm() que creamos se compone de un sencillo formulario de registro que le pide al usuario su nombre. Luego utilizamos una declaración if y else para verificar que la persona ha ingresado su nombre. Si la persona ingresó su nombre, configuramos ese nombre como $_SESSION['name']. Ya que hemos estado usando una sesión basada en cookies para almacenar el nombre, debemos llamar la sesson_start() antes de que algo sea mostrado en el navegador.

Una cosa a la que quieres ponerle mucha atención, es que hemos usado la función htmlspecialchars(), la cual convierte los caracteres especiales a entidades HTML, por lo tanto protegiendo los nombres de las variables de convertirse en víctimas de Cross-site scripting (XSS) Más tarde también agregaremos esta función a la variable de texto que será publicado en el registro del chat.

Mostrando el Formulario de Registro

En orden de mostrar el formulario de registro en caso de que el usuario no se haya registrado, por lo tanto no ha creado una sesión, usamod otras declaraciones if y else en el div #wrapper y las etiquetas script en nuestro código original. En el caso opuesto, esto esconderá el formulario de registro, y mostrará la caja de chat si el usuario está registrado y ha creado una sesión.

Bienvenida y Menú de Salida

Aún no hemos terminado de crear el sistema de registro para esta aplicación de chat. Aún necesitamos permitirle al usuario salir y finalizar la sesión de chat. Si lo puedes recordar, nuestro archivo HTML original incluyó un menú sencillo. Volvamos y agreguémosle algo de código PHP que le dará al menú más funcionalidad.

Primero que todo, agreguemos el nombre de los usuarios al mensaje de bienvenida. Hacemos esto al imprimir el nombre de usuario de la sesión.

En orden de permitir al usuario salir y finalizar la sesión, saltaremos adelante de nosotros mismos y usaremos jQuery brevemente.

El sencillo código jQuery arriba muestra una alerta de confirmación si un usuario hace clic en el link #exit. Si el usuario confirma la salida, por lo tanto decidiendo terminar con la sesión, entonces lo enviamos a index.php?logout=true. Esto simplemente crea una variable llamada logout con el valor verdadero. Necesitamos tomar esta variable con PHP.

Ahora vemos si existe la variable 'logout' usando la función isset(). Si la variable se ha pasado por una url, tal como el link mencionado arriba, procedemos a finalizar la sesión del nombre del usuario.

Antes de destruir el nombre del usuario en sesión con la función session_destroy(), queremos escribir un sencillo mensaje en el registro del chat. Este dirá que el usuario ha abandonado la sesión de chat. Hacemos esto usando las funciones fopen(), y fclose() para manipular nuestro archivo log.html, el cual como veremos más tarde, será creado como el display de nuestro chat. Por favor nota que hemos agregado una clase de 'msgIn' a el div. Ya hemos definido el estilo css para este div.

Después de hacer esto, destruimos la sesión, y redirigimos al usuario a la misma página donde aparecerá el formulario de registro.


Paso 4 : Manipulando las Entradas del Usuario

Luego de que un usuario envíe nuestro formulario, queremos tomar sus entradas y escribirlas en el registro del chat. Para hacer esto, debemos usar jQuery y PHP para trabajar de manera sincrónica de lado del cliente y del servidor.

jQuery

Casi todo lo que estamos haciendo con jQuery para manipular nuestros datos, giraremos sobre la función de jQuery post request.

  1. Antes de hacer algo, debemos tomar la entrada de nuestro usuario, o lo que haya escrito en el input #submitmsg. Esto se puede lograr con la función val(), la cual toma el valor puesto en un campo de formulario. Ahora almacenamos este valor en la variable clientmsg.
  2. Aquí viene nuestra parte más importante: el post request de jQuery. Esto envía una solicitud POST al archivo post.php que crearemos en un momento. Esto postea la entrada del cliente, o lo que sea que se haya guardado en la variable clientmsg.
  3. Por último, limpiamos el input #usermsg al establecer el atributo de la variable en blank.

Por favor nota que el código arriba irá en nuestra etiqueta script, donde pondremos  el código de salida de jQuery.

PHP - post.php

En el momento tenemos datos en POST siendo enviados al archivo post.php cada vez que el usuario envía un nuevo mensaje. Nuestro objetivo ahora es tomar estos datos y escribirlos en el registro del chat.

  1. Antes de hacer algo, tenemos que iniciar el archivo post.php con la función session_start() ya que estaremos usando la sesión del nombre de usuarioi en este archivo.
  2. Usando el booleano isset, revisamos si la sesión para el 'nombre' existe antes de hacer cualquier cosa.
  3. Ahora tomamos los datos de POST que estaban siendo enviados a este archivo a través de jQuery. Almacenamos estos datos en la variable $text.
  4. Estos datos, así como haremos sobre todos los datos de entrada, serán almacenados en el archivo log.html. Para hacer esto, abrimos el archivo con el modo 'a' en la función fopen(), el cual de acuerdo a php.net abre el archivo para sólo escritura; y pone el puntero del archivo al final del archivo. Si el archivo no existe, intenta crearlo. Luego entonces, escribimos nuestro mensaje en el archivo usando la función fwrite().
    • El mensaje que escribiremos será encapsulado en el div .msgIn. Contendrá la fecha y la hora generado por la función date(), el nombre de usuario de la sesión, y el texto, el cual también será cubierto por la función htmlspecialchars() para prevenir ataques XSS.

    Por último, cerramos nuestra manipulación del archivo  usando fclose().


Paso 5 : Mostrando el Registro del Chat. Contenidos

Todo lo que el usuario ha escrito es manipulado y posteado usando jQuery; es escrito en el registro del chat con PHP. La única cosa que queda por hacer es mostrar el registro del chat actualizado al usuario.

Para ahorrarnos un poco de tiempo, haremos una pre carga del registro del chat en el div #chatbox si tiene algo de contenido.

Usamos una rutina similar como usamos el archivo post.php, excepto que esta vez sólo estamos leyendo e imprimiendo los contenidos del archivo.

La solicitud jQuery.ajax

La solicitud ajax es el núcleo de todo lo que estamos haciendo. Esta solicitud no sólo nos permite enviar y recibir datos a través del formulario sin refrescar la página, sino que también nos permite manipular las solicitudes de datos.

Envolvemos nuestra solicitud de ajax en una función. Verás por qué en un segundo. Como ves arriba sólo usaremos tres de los objetos de jQuery ajax para solicitudes.

  • url: Una cadena de la URL para solicitar. Usaremos nuestro archivo del registro del chat log.html
  • cache: Esto prevendrá a nuestro archivo quedar en caché. Asegurará que obtengamos un registro actualizado cada vez que enviemos una solicitud.
  • exito: Esto nos permitirá adjuntar una función que pasará los datos que solicitamos.

Como ves, luego movemos los datos que solicitamos (html) en el div #chatbox.

Auto-scroll

Como habrás podido ver en otras aplicaciones de chat, el contenido automáticamente baja si el contenedor (#chatbox) se rebosa. Vamos a implementar una característica simple y similar, que comparará la altura de scroll del contenedor antes y después de que hacemos la solicitud ajax. Si la altura del scroll es más grande después de la solicitud, usaremos el efecto de animación de jQuery para bajar el div #chatbox.

  • Primero almacenamos la altura del scroll del div #chatbox en la variable oldscrollHeight antes de que hagamos la solicitud.
  • Después de que nuestra solicitud retorne como exitosa, almacenamos la altura del scroll del div #chatbox en la variable newscrollHeight.
  • Luego comparamos ambas alturas de las variables de los scroll usando una declaración if. Si newscrollHeight es más grande que oldscrollHeight, usamos el efecto animado para bajar el div #chatbox.

Actualizando Continuamente el Registro del Chat

Ahora una pregunta puede surgir, ¿cómo actualizaremos constantemente los nuevos datos que van de ida y vuelta entre los usuarios? O para replantear la pregunta, ¿cómo nos mantendremos enviando solicitudes continuamente para mantener los datos actualizados?

La respuesta a nuestra pregunta está 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 realizará el autoscroll en el div.

Terminado

Hemos terminado!  Espero que hayas aprendido cómo funciona un sistema de chat básico y si tienes sugerencias sobre algo, los recibiré felizmente. Este sistema de chat es tan simple como lo que puedes obtener de una aplicación de chat. Puedes soltarte de esto y construir múltiples salas de chat, agregar un backend administrativo, añadir emoticones, etc. Aquí el cielo es tu límite.

Abajo hay algunos links que podrías revisar si estas pensando en ampliar esta aplicación de chat.

  • Síguenos en Twitter, o suscríbete en el Feed NETTUTS RSS para más tutoriales y artículos diarios sobre desarrollo web.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.