Skip to content

Repositorio para prácticas websockets con php y js vanilla.

Notifications You must be signed in to change notification settings

soynain/chatsito-laravel-js

Repository files navigation

Laravel Chat Project

For foreignian speakers, I made a video speaking english to explain this proyect, my speaking is very poor but understandable hehe, check it out!! https://www.youtube.com/watch?v=tGy2cGSvE_8

Proyecto de chat

Este proyecto de laravel consistirá en un sistema de chat sencillo para comunicar a dos usuarios entre si, no planeo que sea un chat generico de una sala para todos.

¿Caracteristicas?

  • Los usuarios pueden enviarse solicitudes entre si.
  • Un usuario podrá buscar a otros usuarios.
  • Solo los usuarios que sean amigos podrán enviarse mensajes en tiempo real con los sockets.
  • Si un usuario no está conectado, tales mensajes se almacenaran en la bdd y el otro usuario al conectarse de nuevo podrá ver los nuevos mensajes.

No planeo añadir más caracteristicas complejas por flojera, y porque tampoco soy tan "open source mind" jajajajaja

Modelo de base de datos

Usaré MYSQL para la base de datos, nada fuera de lo común, se que es común usar NoSQL (mongo) para tales cuestiones pero quiero practicar mis habilidades de maquetado también. Y también ya hasta se me olvidó como usar mongo por guebon. laravelchatbdd-V2.png

Capturas de pantalla

Login chat: (valida las credenciales en el servidor, si no existe no se loguea, y los campos son obligatorios, te lo dice el mismo boostrap, eso si me falto mas validaciones, pero funciona vaya) image

Panel principal: aquí el usuario puede ver su lista de contactos, y hasta ocultar la lista así tipo fb, la lista de contactos cambiará de estatus conforme alguien de su lista de amigos se conecta a su cuenta, también cuenta con una caja de notificaciones image image

Mi perfil: el usuario puede visualizar su perfil con sus datos, está muy sencillo el diseño, pero en esta practica le di mas prioridad a dominar el broadcasting que a diseñar todo el sistema, puede ser escalado claro image

Ventana chat: aquí el usuario podrá ver la lista de mensajes que se ha intercambiado con su respectivo contacto, solo puede enviar texto en esta práctica, puede ser escalado igual para enviar imagenes o emojis, el cascaron de todo el proyecto se presta a poder ser mejorado. image

Si dos amigos están conectados, independientemente de en que interfaz del sitio web se encuentren, podrán ver su estado en línea, siempre y cuando los dos hayan iniciado sesión y estén presentes en el sistema, aquí en la siguiente captura se ve su estatus offline image

En la siguiente captura se podrá visualizar como si se inicia otra instancia limpia del explorador e iniciamos sesión en la cuenta de algún amigo del usuario, se refleja su estatus en linea cambiando el color del circulo de gris a verde, y el label de "Desconectado" a "En línea". image image

Y logicamente el chat es 100% funcional, si un usuario le envia un mensaje a su respectivo amigo, este lo recibirá en "tiempo real", y también detectará si se desconecta del sistema. image image

Incluiré el dump de la base de datos en los archivos del proyecto para que puedan probarlo, y mejorarlo de acuerdo a sus necesidades, está sencillo y puede ser mejorado, pero que pereza también.

About

Repositorio para prácticas websockets con php y js vanilla.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published