Crearea unei aplicații în timp real cu Angular și Socket.io Tutorial

Codul sursă complet pentru acest tutorial poate fi găsit aici:elliotforbes/angular-socket-io-example

În acest tutorial vom vedea cum putem construi o aplicație în timp real folosind atât Angular 4, cât și biblioteca Socket.io. Am acoperit în trecut modul în care puteți utiliza websockets brute și le puteți converti în observabile folosind biblioteca RxJS într-un tutorial anterior care poate fi găsit aici:Angular Websockets Tutorial

Video Tutorial

Instalarea Socket.IO

Pentru a utiliza biblioteca Socket.io va trebui mai întâi să o instalăm folosind managerul de pachete node. Putem face acest lucru tastând următoarele:

npm install socket.io-clientnpm install @types/socket.io-client

Turning Websockets into RxJS Subjects

RxJS Subjects sunt atât un Observable cât și un Observer. Folosind aceste subiecte putem asculta și trimite concomitent mesaje către un singur websocket, acest lucru deschide practic comunicarea bidirecțională și ne permite să facem lucruri interesante, cum ar fi să construim sisteme de chat.

În acest scenariu vom crea atât un serviciu Websocket, cât și un serviciu Chat.Serviciul Websocket se va ocupa de comunicarea directă cu socket-ul, iar serviciulChat va expune o interfață simplă cu care celelalte componente ale noastre pot interacționa cu ușurință.

După ce am definit acest serviciu Websocket, putem defini apoi un serviciu de chat care are doar un constructor și o funcție sendMsg() care va fi folosită pentru a trimite mesaje către serverul nostru socket.io.

Utilizarea serviciului nostru de chat

Dacă am dori să începem să folosim serviciul nostru de chat nou creat, am putea face ceva de genul acesta:

Am putea crea apoi un buton simplu în fișierul nostru ./app.component.html care ar apela funcția noastră sendMessage():<button (click)="sendMessage()">Send Message</button>. Atâta timp cât ați specificat serviciile nou create în matricea de furnizori app.module.ts, ar trebui să aveți acum o aplicație care poate trimite și primi mesaje de la un server web bazat pe socket.io.

Serverele noastre Websocket

În acest tutorial vom folosi un server foarte simplu bazat pe socket.io express care va asculta pe pentru toate conexiunile Websocket primite și, la primirea unei conexiuni, va imprima că un utilizator s-a conectat. Creați un nou fișier numit app.js și adăugați următorul cod:

Înainte de a rula acest cod va trebui să vă asigurați că sunt instalate dependențele corespunzătoare ale nodului. Puteți face acest lucru tastând npm i express http socket.io. Puteți rula acest server tastând node app.js.

Concluzie

Când rulați acest lucru, ar trebui să vedeți că serverul nostru websocket tipărește ceva asemănător cu ieșirea de mai jos. Acesta pornește mai întâi pe portul 5000, când deschidem apoi clientul nostru Angularclient, ar trebui să îl vedeți înregistrându-se user connected și apoi, de fiecare dată când trimitem un mesaj de la clientul nostru, veți vedea conținutul acelui mesaj fiind afișat mai jos.

 $ node app.jsstarted on port 5000user connectedMessage Received: "Test Message"Message Received: "Test Message"