Valós idejű alkalmazás készítése Angular és Socket.io segítségével

A bemutató teljes forráskódja itt található:elliotforbes/angular-socket-io-example

A bemutatóban azt fogjuk megvizsgálni, hogyan tudunk egy valós idejű alkalmazást készíteni az Angular 4 és a Socket.io könyvtár segítségével. Korábban már foglalkoztam azzal, hogyan használhatjuk a nyers websocketeket, és hogyan alakíthatjuk őket megfigyelhetővé az RxJS könyvtár segítségével egy korábbi bemutatóban, amely itt található: Angular Websockets Tutorial

Video Tutorial

A Socket.IO telepítése

A socket.io könyvtár használatához először telepítenünk kell azt a node csomagkezelő segítségével. Ezt a következők beírásával tehetjük meg:

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

A websocketek RxJS Subjectsé alakítása

A RxJS Subjects egy Observable és egy Observer. Ezeket a Subjectsokat használva egyidejűleg hallgathatunk és küldhetünk üzeneteket egyetlen websocketre, ez lényegében megnyitja a kétirányú kommunikációt, és lehetővé teszi számunkra, hogy olyan klassz dolgokat csináljunk, mint például chat rendszereket építsünk.

Ebben a forgatókönyvben létrehozunk egy Websocket szolgáltatást és egy Chat szolgáltatást.A Websocket szolgáltatás fogja kezelni a közvetlen kommunikációt a sockettel, aChat szolgáltatás pedig egy egyszerű interfészt fog kitenni, amellyel a többi komponensünk könnyen kapcsolatba léphet.

Mihelyt definiáltuk ezt a websocket szolgáltatást, definiálhatunk egy chat szolgáltatást, amely csak egy konstruktort és egy sendMsg() függvényt tartalmaz, amelyet arra fogunk használni, hogy üzeneteket küldjünk a socket.io szerverünknek.

Csevegőszolgáltatásunk használata

Ha el akarjuk kezdeni használni az újonnan létrehozott csevegőszolgáltatásunkat, akkor valami ilyesmit tehetünk:

Ezután létrehozhatunk egy egyszerű gombot a ./app.component.html fájlunkban, amely meghívja a sendMessage() függvényünket:<button (click)="sendMessage()">Send Message</button>. Amíg megadtuk az újonnan létrehozott szolgáltatásainkat a app.module.ts providers tömbben, remélhetőleg most már van egy alkalmazásunk, amely képes üzeneteket küldeni és fogadni egy socket.io alapú webszerverről.

A websocket szerverünk

Ebben a bemutatóban egy nagyon egyszerű socket.io alapú expressszerverrel fogunk dolgozni, amely a -en fog figyelni minden bejövő websocketkapcsolatra, és egy kapcsolat fogadásakor kiírja, hogy egy felhasználó csatlakozott. Hozzon létre egy új app.js nevű fájlt, és adja hozzá a következő kódot:

A kód futtatása előtt gondoskodnia kell a megfelelő node függőségek telepítéséről. Ezt a npm i express http socket.io beírásával teheti meg. Ezt a szervert a node app.js beírásával futtathatja.

Következtetés

Amikor ezt futtatja, látnia kell, hogy a websocket szerverünk az alábbi kimenethez hasonlót ír ki. Először az 5000-es porton indul, amikor ezután megnyitjuk az Angularkliensünket, akkor látnia kell, hogy az user connected naplózza, majd minden alkalommal, amikor üzenetet küldünk a kliensünkről, láthatja, hogy az üzenet tartalma az alábbiakban kerül kiírásra.

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