Loading repository data…
joseluisgs / repository
vue-chat-socket
Ejemplo de mensajería privada cliente servidor. Como cliente usaremos Vue.js, el servidor en Node.js. Usaremos la librería Socket.io. Todo ello con TypeScript.
#nodejs#socket-io#typescript#vuejs
Live repository statistics
★ 2Stars
⑂ 4Forks
◯ 0Open issues
◉ 2Watchers
README preview
Vue Chat Socket.io
Ejemplo de mensajería privada cliente servidor. Como cliente usaremos Vue.js, el servidor en Node.js. Usaremos la librería Socket.io. Todo ello con TypeScript.
Sobre el proyecto
El proyecto consiste en crar sistema de mensajería privada en tiempo real creando un cliente en Vue.js y un servidor en Node.js. Ambos trabajarán con la librería Socket.io.
Tiene dos modos de funcionamiento, uno simple con sesiones y persistencia en memoria y uno avanzado, que hace uso de Redis para las sesiones y un cluster para el servidor.
🚩 No olvides eliminar la sesión del explorador para que se ejecute correctamente
Store y Persistencia
Se ha implementado un Store tanto en cliente como en servidor para el manejo de la persistencia de la información.
En el modo avanzado se ha usado Redis para las sesiones y mensajes.
Sesiones
La sesiones se guardan en el servidor en base a un identificador único. De esta manera si un usuario recarga la página se volvería a conectar simpre que su sesión esté activa. En el cliente el identificador de la sesión se guarda en el almacenamiento local del navegador.
En el modo avanzado se ha usado Redis.
Mensajes
De la misma manera que guardamos las sesiones en el servidor. También vamos a guardar los mensajes. De esta manera, si un usuario se desconecta, podremos seguir mandándole mensajes, que le llegarán. De la misma manera si recarga su sesión recuperará todos los mensajes que tiene con sus contactos.
En el modo avanzado se ha usado Redis.
Arquitectura avanzada
Balaceador de carga
Lo primero que crearemos es un balanceador de carga para Socket.io creando un maestro y distintos workers al respecto.
Sesiones y mensajes
Se ha usado Redis para las sesiones usado Redis (HMGET) y para los Mensajes (RPUSH/LRANGE)
Despliegue
El proyecto se puede desplegar usando Docker y consultando dichos docker en Docker Hub. También puedes usar lso respectivos Dockerfiles o Docker Compose (recomendado).
Todo (recomendado)
docker-compose up -d
Servidor
docker run -it -p 3000:3000 --rm --name vue-chat-socket-server joseluisgs/vue-chat-socket-server
Cliente
docker run -it -p 8080:8080 --rm --name vue-chat-socket-client joseluisgs/vue-chat-socket-client
Redis
docker-compose -f redis-compose.yml up -d
Servidor
En la carpeta servidor, tienes el servidor creado. Para ello se ha usando Node.js con TypeScript. Dicho servidor realiza la persistencia de sesiones y mensajes de los usuarios.
En el modo avanzado se ha usado un cluster para poder atender a muuchas peticiones usando un balanceador de carga.
Project setup
npm install
Compiles and hot-reloads for development
npm run dev:run
Compiles and minifies for production
npm run build
Compiles and start for production
npm run start
Lints and fixes files
npm run lint:fix
Cliente
En la carpeta cliente, tienes el cliente creado. Creado con Vue.js con TypeScript y Bulma/Buefy.
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Autor
Codificado con :sparkling_heart: por José Luis González Sánchez
Licencia
Este proyecto esta licenciado bajo licencia MIT, si desea saber más, visite el fichero LICENSE para su uso docente y educativo.
Agradecimientos
Proyecto basado en parte de los ejemplos de Socket.io