Manejar eventos Socket.io y Angular.

Muchos de nosotros queremos tener la experiencia más “Real Time” que podemos imaginar en nuestras aplicaciones y no sabemos por dónde comenzar.

Hoy vamos a poder emitir eventos desde de un cliente hacia otros cliente y viceversa además podremos emitir de uno a muchos. Para ello vamos a tener dos proyectos “Backend” en node y “Front”.

Los repositorios los consigues al final de la página.

VER VIDEOS

Backend (API)

Comenzamos creando un proyecto nuevo al cual le instalamos express y socket.io

Creamos un archivo principal lo llamaremos server.js en el cual mantendremos toda la lógica de este pequeño proyecto.

Este archivo nos va a crear un servidor http para nuestra api-rest por el puerto 3000 y también inicia el servicio de socket.io por el puerto 5000, en este caso para ejemplo práctico solo utilizaremos la conexión a Socket

En este punto ya terminamos nuestro backend el cual si ejecutamos npm run start debe obtener una respuesta en la consola indicando que está ok.

Front (Cliente)

Llegamos al punto de la app, en el siguiente ejemplo se utilizó Angular.
Comenzamos creando un proyecto totalmente nuevo.

ng new cliente-app-socket cd cliente-app-socket

Luego de tener nuestro vamos a proceder a instalar los paquetes necesarios

npm i ngx-socket-io --save npm i ngx-cookie-service --save

Después vamos a crear un nuevo “service” en nuestro proyecto

ng g service WebSocket

Esto nos crea un archivo “web-socket.service” el cual los dejaremos sin tocar por un momento.

Buscamos nuestro archivo “app.module.ts” e incluimos los paquetes necesario y nuestro “service” anteriormente creado, debe quedar como el siguiente ejemplo.

Luego de dejar listo nuestro “app.module.ts” nos falta configurar los datos de conexión con el servidor y para esto haremos uso de nuestro archivo de “environments”. El cual lo puedes conseguir por defecto en:

cliente-app-socket/src/environments

Podrás observar dos (2) archivos uno con terminación “prod.ts” y otro “.ts” la diferencia de estos es que cuando ejecutemos el comando de “ng build — prod” el sistema tomará el “prod.ts” de lo contrario en este momento nosotros nos centraremos en “.ts”

Como podrás ver hemos establecido la conexión al puerto 5000 de nuestro servidor.

Ahora si vamos a nuestro archivo “web-socket.service” el cual configuraremos con un par de métodos básicos para este ejemplo práctico.

¡Ahora si! estamos listo para probar nuestro ejercicio, para ellos comenzamos ejecutando nuestro angular:ng serve

Quiero más

Por supuesto! gracias al apoyo que se ha conseguido por todos ustedes (comentando, suscribiéndote y compartiendo) se agregaron nuevos videos, en esta ocasión iniciamos el curso de testing en angular, curso de node, curso mongo y mucho más

Solo te queda realizar el HTML, CSS de tu agrado. Tú “app.component.ts” debe quedar similar al siguiente. Si deseas puedes utilizar el HTML y CSS del proyecto.

Abre tu navegador, en mi caso usare Chrome visita http://localhost:4200/ de esta forma obtendremos la vista del proyecto en al cual debe verse como el siguiente.

Una vez abierto tu proyecto en Chrome vamos a otra pestaña en modo incógnito. Obteniendo dos páginas exactamente iguales con la diferencia que manejan el estado de Cookie por separado.

Como puedes observar nos muestra una alerta la cual nos informa que no tienes una “session” esto se debe a que en ambos no existe la cookie.

Pare ellos vamos al “Dispositivo (1)” y en nombre colocamos un nombre de nuestro agrado, yo usare “Joe Doe” y en el campo de ID es importante colocare “1”.

Luego hacemos click en “Submit”, esto nos genera una cookie que contiene lo siguiente:

{ user:"Joe Doe" , id:this."1"}

Debes tener una respuesta como la siguiente.

De esta forma hacemos lo mismo con el dispositivo (2) y con ambos dispositivos listos, debemos tener algo similar:

Como podrás observar nuestro servidor nos conectó a una misma sala llamada “room_1” siendo 1 el número de id del user. También podemos ver que el servidor nos emitió un mensaje por individual al dispositivo conectado el cual identificó con un id “handshake”.

Ahora ya puedes escribir desde un cliente y el mensaje será emitido a todos los dispositivos pertenecientes a la sala “room_1”