Il codice sorgente completo per questo tutorial può essere trovato qui:elliotforbes/angular-socket-io-example
In questo tutorial vedremo come possiamo costruire un’applicazione realtime usando sia Angular 4 che la libreria Socket.io. Ho coperto in passato come è possibile utilizzare websockets grezzi e convertirli in osservabili usando la libreria RxJS in un precedente tutorial che può essere trovato qui:Angular Websockets Tutorial
Video Tutorial
Installazione di Socket.IO
Per utilizzare la libreria socket.io dovremo prima installarla usando il gestore di pacchetti node. Possiamo farlo digitando quanto segue:
npm install socket.io-clientnpm install @types/socket.io-clientTrasformare i Websockets in soggetti RxJS
I soggetti RxJS sono sia un Observable che un Observer. Usando questi soggetti possiamo contemporaneamente ascoltare e inviare messaggi a un singolo websocket, questo apre essenzialmente una comunicazione a due vie e ci permette di fare cose interessanti come costruire sistemi di chat.
In questo scenario creeremo sia un servizio Websocket che un servizio Chat.Il servizio Websocket gestirà la comunicazione diretta con il socket e il servizioChat esporrà una semplice interfaccia con cui i nostri altri componenti possono facilmente interagire.
Una volta definito questo servizio websocket possiamo definire un servizio chat che ha solo un costruttore e una funzione sendMsg()che sarà usata per inviare messaggi al nostro server socket.io.
Utilizzare il nostro servizio di chat
Se volessimo iniziare a usare il nostro servizio di chat appena creato potremmo fare qualcosa del genere:
Potremmo quindi creare un semplice pulsante nel nostro file ./app.component.html che chiamerebbe la nostra funzione sendMessage():<button (click)="sendMessage()">Send Message</button>. Se avete specificato i servizi appena creati nell’array dei provider app.module.ts, si spera che ora abbiate un’applicazione che può inviare e ricevere messaggi da un webserver basato su socket.io.
Il nostro websocket server
In questo tutorial sfrutteremo un semplicissimo socket.io basato su expressserver che ascolterà su tutte le connessioni websocket in arrivo e alla ricezione di una connessione stamperà che un utente si è connesso. Create un nuovo file chiamato app.js e aggiungete il seguente codice:
Prima di eseguire questo codice dovrete assicurarvi che le dipendenze del nodo siano installate correttamente. Puoi farlo digitando
npm i express http socket.io. Potete eseguire questo server digitandonode app.js.
Conclusione
Quando lo eseguite dovreste vedere il nostro server websocket stampare qualcosa di simile al seguente output. Si avvia prima sulla porta 5000, quando poi apriamo il nostro Angularclient dovreste vedere il log user connected e poi ogni volta che inviamo un messaggio dal nostro client vedrete il contenuto di quel messaggio essere stampato qui sotto.
$ node app.jsstarted on port 5000user connectedMessage Received: "Test Message"Message Received: "Test Message"