Memegram

Vamos a darle una vuelta a la aplicación de memegram. Memegram ha sido una aplicación "desconectada": el cliente que necesita un recurso, se conecta al servidor, pide el recurso en questión, lo recibe y se desconecta. El servidor no tiene la capacidad de notificar cambios al cliente. Es el cliente el que dirige el cotarro.

Si queremos dotar a memegram una respuesta a cambios en tiempo real, necesitamos que la conexión con el servidor sea constante para que éste (el servidor) pueda enviarnos notificaciones de cambios.

Hello websockets 🖖.

Base de datos

npm

mysql2

Para poder utilizar la base de datos se debe instalar el paquete mysql2

                    
                        npm install mysql2
                    
                

dotenv

Para gestionar las variables de entorno se debe instalar el paquete dotenv

                    
                        npm install dotenv
                    
                

Para poder utilizar las variables de entorno se debe configurar el archivo .env

express

Para poder utilizar el servidor se debe instalar el paquete express

                    
                        npm install express
                    
                

helmet

Helmet es un middleware que se encarga de proteger la aplicación de ataques de seguridad.

Para poder utilizar el middleware helmet se debe instalar el paquete helmet

                    
                        npm install helmet
                    
                

morgan

morgan es un middleware que permite ver las peticiones que se hacen al servidor.

Para poder utilizar el middleware morgan se debe instalar el paquete morgan

                    
                        npm install morgan
                    
                

socket.io

Socket.io es una librería que habilita la comunicación entre el servidor y el cliente.

Está construida sobre el protocolo WebSocket y nos provee garantías adicionales como fallback a HTTP long-polling o reconexión automática (entre otros).

Para poder socket.io se debe instalar el paquete socket.io

                    
                        npm install socket.io
                    
                

node

index.js

En este archivo se encuentra la lógica de la aplicación.

Seguimos manteniendo la implementación de nuestro servicio REST y le añadimos la capacidad de conectarse vía socket.io con el servidor y mantener la conexión activa.

public

en la línea 51 del index.js se está habilitando el uso de static para que express exponga contenido estático. En nuestro caso estamos exponiendo el contenido de la carpeta public

Aquí tenemos 3 archivos: index.html, index.js y style.css

index.html

En este archivo se encuentra el contenido de la página web.

style.css

En este archivo se encuentra el estilo de la página web. Un poco de 🌈 pinta y colorea 🌈 para que la página no sea una chusta.

index.js

Aquí definimos toda la lógica que modificará el DOM del cliente apoyandose de la librería socket.io para mantener la conexión activa con el servidor.

*.route.js

Mantenemos la lógica de nuestras rutas para dar soporte al servicio REST.

*.dao.js

Se han añadido algunas funciones más de acceso a la base de datos.

Los siguientes dao heredarán de esta clase e implementarán funciones/consultas específicas para cada uno de los DAO.