Inicio Informática Chat web, crea uno usando PHP, MySQL, CSS, HTML y JavaScript

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

Una chat sencillo y funcional con emoticonos incluidos

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

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.

pantalla de registro del chat web

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.

listado de chat y usuarios disponibles

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.

chat web funcionando

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?

Saltar publicidad

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.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

4 Comentarios

Kevin Andres 30 noviembre, 2023 - 12:19 AM

hola, podrias agregar la opcion para mandar imagenes y/o gifs.. si puedes claro…

Respuesta
entreunosyceros 30 noviembre, 2023 - 12:23 AM

Hola. Eso es algo que tengo pensado hacer, pero ahora mismo tengo poco tiempo para ponerme con ello. Pero algún día lo haré. Salu2.

Respuesta
Kevin Andres 1 diciembre, 2023 - 8:45 PM

Ok, gracias. otra cosa, es q yo el otro dia estaba tratando de acceder a mi cuenta de Chat entreunosyceros pero me decia q la cuenta no existe… no se si es un error o es otra cosa pero te pido q cuando puedas lo arregles…

Respuesta
entreunosyceros 4 diciembre, 2023 - 10:59 PM

Hola. Si no recuerdo mal, a esto ya te conteste por email. Salu2.

Respuesta
Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.