Tämän tutoriaalin koko lähdekoodi löytyy täältä:elliotforbes/angular-socket-io-example
Tässä tutoriaalissa tarkastelemme sitä, miten voimme rakentaa reaaliaikaisen sovelluksen käyttäen sekä Angular 4:ää että Socket.io-kirjastoa. Olen käsitellyt aiemmin, miten voit hyödyntää raakoja websocketteja ja muuntaa ne observableiksi käyttäen RxJS-kirjastoa aiemmassa tutoriaalissa, joka löytyy täältä: Angular Websockets Tutorial
Video Tutorial
Socket.IO:n asentaminen
Hyödyntääksemme socket.io-kirjastoa meidän on ensin asennettava se node-pakettienhallinnan avulla. Voimme tehdä tämän kirjoittamalla seuraavaa:
npm install socket.io-clientnpm install @types/socket.io-clientWebsockettien muuttaminen RxJS-aiheiksi
RxJS-aiheet ovat sekä Observable että Observer. Käyttämällä näitä Subjektejavoidaan samanaikaisesti kuunnella ja lähettää viestejä yhteen websocketiin.Tämä avaa kaksisuuntaisen kommunikaation ja mahdollistaa hienoja asioita, kuten chat-järjestelmien rakentamisen.
Tässä skenaariossa luomme sekä Websocket-palvelun että Chat-palvelun.Websocket-palvelu huolehtii suorasta kommunikaatiosta socketin kanssa ja Chat-palvelu paljastaa yksinkertaisen rajapinnan, jonka avulla muut komponenttimme voivat helposti olla vuorovaikutuksessa.
Kun olemme määritelleet tämän websocket-palvelun, voimme sen jälkeen määritellä chat-palvelun, jossa on vain konstruktori ja yksi sendMsg()funktio, jota käytetään viestien lähettämiseen socket.io-palvelimellemme.
Chat-palvelumme käyttäminen
Jos haluaisimme alkaa käyttää äsken muotoiltua chat-palveluamme, voisimme tehdä jotakuinkin näin:
Voisimme sitten luoda yksinkertaisen painikkeen ./app.component.html-tiedostoomme, joka kutsuisi sendMessage()-funktiotamme:<button (click)="sendMessage()">Send Message</button>. Kunhan olet määrittänyt äskettäin luodut palvelusi app.module.ts providers-joukkoon, sinulla on nyt toivottavasti sovellus, joka voi lähettää ja vastaanottaa viestejä socket.io-pohjaiselta web-palvelimelta.
Websocket-palvelimemme
Tässä tutoriaalissa käytämme hyväksenne hyvin yksinkertaista socket.io-pohjaista expresspalvelinta, joka kuuntelee osoitteessa kaikkia saapuvia websocket-yhteyksiä ja yhteyden saatuaan tulostaa viestin, joka kertoo, että käyttäjä on ottanut yhteyden. Luo uusi tiedosto nimeltä app.js ja lisää seuraava koodi:
Ennen tämän koodin suorittamista sinun on varmistettava, että oikeat node-riippuvuudet on asennettu. Voit tehdä sen kirjoittamalla
npm i express http socket.io. Voit ajaa tämän palvelimen kirjoittamallanode app.js.
Conclusion
Kun suoritat tämän, sinun pitäisi nähdä websocket-palvelimemme tulostavan jotain alla olevan kaltaista. Se käynnistyy ensin porttiin 5000, kun avaamme Angular-asiakkaamme, sinun pitäisi nähdä sen kirjautuvan porttiin user connected, ja joka kerta kun lähetämme viestin asiakkaaltamme, näet viestin sisällön tulostuvan alla.
$ node app.jsstarted on port 5000user connectedMessage Received: "Test Message"Message Received: "Test Message"