Chat web, crea uno usando PHP, MySQL, CSS, HTML y JavaScript

Una vez más aquí. Hoy vengo a dejar una pequeña aplicación web para alguien que me pidió algo así para su página web. El caso es que no recuerdo quién fue, así que si lee este artículo espero que se sienta aludido. El usuari@ me dijo que quería una aplicación de chat web que funcionase bien, fuese gratuita y permitiese usar emoticonos (esto último no entiendo muy bien para qué, pero bueno).

Bueno, pues leyendo un poco de aquí, y un poco de allí, me puse a codificar la aplicación, y tras algunos momentos de dedicación, la aplicación se puede comenzar a utilizar.

Un vistazo rápido al funcionamiento del chat web

Una vez finalizada, en esta aplicación de chat web, cuando la abre por primera vez en el navegador, se muestra veremos un formulario de registro. Aquí es donde el usuario tendrá que registrarse con ciertos datos, como son el nombre, apellidos, el correo electrónico, contraseña y una imagen para ser más identificable el perfil.

En el campo de correo electrónico, tan solo es necesario escribir un correo válido, pues no es necesario validarlo de ninguna manera (aun que esto es relativamente sencillo de hacer).

Una vez que se el usuario se registre de forma correcta, será redirigido a la página del usuario. Aquí es donde podrá ver su nombre completo, su imagen, el estado y un botón de cierre de sesión en la parte superior. Los usuarios registrados aparecerán en la parte inferior, desde donde se podrán seleccionar los usuarios a los que se les quiere enviar algún mensaje.

Como decía, en esta página es donde se debe hacer clic en el usuario en particular o también puede buscar cualquier usuario existente con su nombre. Al seleccionar el usuario que nos interese, seremos redirigidos a la página de chat. Desde ahí será desde donde podremos ver la imagen, el nombre y el estado de ese usuario con el que vamos a chatear.

Una vez que enviemos un mensaje a otro usuario, este mensaje aparece en el cuadro de chat y también en otro cuadro de chat del usuario al que enviamos el mensaje. En el cuadro de chat del receptor del mensaje, el mensaje aparecerá con la imagen del remitente. El cuadro de chat se desplazará automáticamente hacia abajo una vez que el cuadro de chat comience a desplazarse. Además podremos enviar emojis en nuestros mensajes.

Además podremos cerrar la sesión de la aplicación de chat en cualquier momento. Una vez que cierre la sesión, inmediatamente todos los demás usuarios sabrán que estás desconectado.

Una vez cerrada la sesión, podremos volver a iniciar sesión con el correo electrónico y la contraseña que utilizamos al registrarnos. Si te logueas con las credenciales correctas, serás redirigido a la página del usuario y todos los demás usuarios sabrán de inmediato que has iniciado sesión y que ya estás activo.

Aplicación chat web utilizando HTML, CSS, PHP, MySQL y JavaScript

Para descargar este chat completo, incluyendo al archivo .SQL necesario para crear la base de datos, tan solo hay que seguir el siguiente enlace. Para compartir el archivo comprimido de este proyecto, he utilizado un acortador de URL. Por lo que será necesario esperar unos segundos, hasta que aparezca el mensaje «Saltar Publicidad», en la parte superior derecha de la pantalla.

¿Cómo descargar archivos de código fuente y qué hacer después de descargarlos?

Tras pulsar en el botón que aparecerá, como se muestra en la anterior imagen, podremos descargar el archivo .ZIP del proyecto. Una vez descargado, simplemente será necesario extraer el archivo zip. Después veremos el nombre de la carpeta ChatApp. Esta es la carpeta que tendremos que mover dentro de la nuestro servidor Apache.

Después de completar estos pasos, tendremos que dirigirnos al navegador y abrir el phpmyadmin. Una vez en ella, vamos a crear un nuevo nombre de base de datos para la aplicación de chat. Después de crear la base de datos, allí podremos ver una opción de importación. Simplemente es necesario hacer clic en ella e importar el archivo SQL que se encuentra en la carpeta ChatApp.

Es importante no olvidarse de cambiar los datos de conexión que encontraremos en la carpeta PHP que hay dentro del proyecto. Ahora todo está hecho, solo es necesario abrir la URL de nuestro proyecto. Y con todo, nuestra aplicación de chat está lista para utilizarse.

El código de esta aplicación se puede encontrar en nuestro repositorio de GitHub. Además, si quieres verlo funcionando antes de descargarlo, puedes verlo en la sección de ejemplo.