El código fuente completo de este tutorial se puede encontrar aquí:elliotforbes/angular-socket-io-example
En este tutorial vamos a ver cómo podemos construir una aplicación en tiempo real utilizando tanto Angular 4 como la biblioteca Socket.io. Ya he cubierto en el pasado cómo se pueden utilizar websockets crudos y convertirlos en observables utilizando la biblioteca RxJS en un tutorial anterior que se puede encontrar aquí:Angular Websockets Tutorial
Video Tutorial
Instalación de Socket.IO
Para utilizar la biblioteca socket.io primero tendremos que instalarla utilizando el gestor de paquetes de node. Podemos hacerlo escribiendo lo siguiente:
npm install socket.io-clientnpm install @types/socket.io-clientConvirtiendo Websockets en RxJS Subjects
Los RxJS Subjects son tanto un Observable como un Observer. Utilizando estos Subjectspodemos escuchar y enviar mensajes de forma concurrente a un único websocket, esto abre esencialmente la comunicación bidireccional y nos permite hacer cosas interesantes como construir sistemas de chat.
En este escenario crearemos tanto un servicio Websocket como un servicio Chat.El servicio Websocket se encargará de la comunicación directa con el socket y el servicioChat expondrá una interfaz simple con la que nuestros otros componentes pueden interactuar fácilmente.
Una vez que hemos definido este servicio websocket podemos definir un servicio de chat que sólo cuenta con un constructor y una función sendMsg() que se utilizará para enviar mensajes a nuestro servidor socket.io.
Usando nuestro servicio de chat
Si quisiéramos empezar a usar nuestro recién creado servicio de chat podríamos hacer algo como esto:
Entonces podríamos crear un simple botón en nuestro archivo ./app.component.html que llamaría a nuestra función sendMessage():<button (click)="sendMessage()">Send Message</button>. Siempre y cuando haya especificado sus servicios recién creados en la matriz de proveedores app.module.ts ahora debería tener una aplicación que puede enviar y recibir mensajes de un servidor web basado en socket.io.
Nuestro servidor Websocket
En este tutorial vamos a aprovechar un servidor muy simple basado en socket.io expressque escuchará en para todas las conexiones websocket entrantes y al recibir una conexión imprimirá que un usuario se ha conectado. Crea un nuevo archivo llamado app.js y añade el siguiente código:
Antes de ejecutar este código tendrás que asegurarte de que se instalan las dependencias adecuadas del nodo. Puedes hacerlo escribiendo
npm i express http socket.io. Puedes ejecutar este servidor escribiendonode app.js.
Conclusión
Cuando ejecutes esto deberías ver que nuestro servidor websocket imprime algo como la salida de abajo. Primero se inicia en el puerto 5000, cuando abrimos nuestro cliente Angular deberías ver el registro user connected y luego cada vez que enviamos un mensaje desde nuestro cliente ves el contenido de ese mensaje que se emite a continuación.
$ node app.jsstarted on port 5000user connectedMessage Received: "Test Message"Message Received: "Test Message"