Chat-sovellus Angularilla ja Socket.IO:lla

Esittely

Käytämme RxJS:ää, Angularia, expressiä (Node.js) & Socket.IO:ta tehdessämme chat-sovelluksen. Saamme nähdä, kuinka hyödyllinen RxJS voi olla tässä skenaariossa. Jotta asiat olisivat sujuvia ja helppoja, käytämme Angular CLI:tä luodaksemme perusasiakasrakenteen ja saadaksemme boilerplatea yksinkertaisimmalle toimivalle Angular-sovellukselle. Back-endissä käytämme Node.js:ää expressin ja Socket.IO:n kanssa. Syynä tähän on se, että Socket.IO on erittäin helppo asentaa ja työskennellä sen kanssa. Lisäksi se tarjoaa sekä palvelin- että asiakaspuolen kirjastoja. Socket.IO käyttää ensisijaisesti WebSocket-protokollaa mahdollistaakseen reaaliaikaisen kaksisuuntaisen viestinnän.

Jos haluat hypätä suoraan osaan, jossa käytämme RxJS:ää chat-viestien käsittelyyn, klikkaa tästä.

Aloitetaan!

Socket.IO-palvelimen asennus

Jos sinulla ei ole Angular CLI:tä asennettuna, voit asentaa sen melko helposti:

npm i -g @angular/cli

Kansiorakenteen määrittäminen

Pitäksemme asiat siisteinä luomme pienelle projektillemme uuden rxjs-chat-kansion. Sen pitäisi toimia Angular- ja Socket.IO-sovellusten juurikansiona.

Luotaan perus Angular-sovellus käyttäen Angular CLI:tä. Käynnistä projektikansiossamme suosikkiterminaalisi ja suorita seuraava komento:

ng new rxjs-chat

Anna sille hieman aikaa. Kun se on tehnyt perusrakenteen luomisen ja npm-pakettien asentamisen, nimeämme äskettäin luodun Angular-projektikansiomme uudelleen clientiksi. Sen jälkeen luodaan samaan juurikansioon kansio server Socket.IO-palvelimellemme. Nyt meillä on kaksi kansiota rxjs-chat-kansiomme sisällä:

• client – Angularin asiakassovellus
• server – pian Noden Socket.IO-palvelin

Lokaalien pakettien asentaminen

Server-kansioon luomme paketin.json-tiedoston suorittamalla seuraavan komennon:

npm init -y

Sen jälkeen asennamme riippuvuudet ja tallennamme ne package.json-tiedostoon:

npm install express socket.io --save

Samassa kansiossa luomme palvelinsovelluksellemme index.js-tiedoston. Tiedoston sisällön tulisi olla seuraava:

Luomme expressin instanssin ja tallennamme sen app-muuttujaan. Sen jälkeen luomme palvelimen http-moduulilla. Sitten välitämme express metodiin http.Server(). Express toimii palvelimellemme tulevien pyyntöjen käsittelijänä. Vastineeksi saamme palvelimen instanssin, jonka tallennamme server-muuttujaan.

Kahdella seuraavalla koodirivillä sitomme socket.IO:n http:n server:

let socketIO = require('socket.io');

let io = socketIO(server);

Connecting to Socket.IO

Meillä on palvelin käynnissä portissa 3000. Nyt on aika katsoa, miten voimme muodostaa yhteyden palvelimeen Angular-sovelluksestamme. Tätä varten meidän on asennettava Socket.IO-asiakaskirjasto. Suoritamme seuraavan komennon asiakaskansiossamme:

npm install socket.io-client --save

Kaikenkaikkiaan ajetaan Angular-sovellus Angular CLI:n kautta:

ng serve -o

Nyt saimme sovelluksemme toimimaan. Näemme, että oletusselaimemme avasi juuri uuden välilehden osoittaen localhostiin. Siksi käytimme -o-argumenttia selaimen avaamiseen.

Luotu palvelu kommunikointia varten palvelimen kanssa

Nimeän sen chat.service.ts app.chat.service.ts ja sijoitan sen src-kansion sisälle. Palvelusta tulee toistaiseksi mahdollisimman yksinkertainen:

Palvelun lisääminen moduulin tarjoajiin

Lisätään myös ChatService-palvelumme palveluntarjoajien listaan AppModule-tiedoston sisällä app.module.ts-tiedostossa:

Palvelun injektointi komponenttiimme

Viimeiseksi tuomme palvelun ja käytämme sitä sovelluskomponenttimme sisällä.ts-tiedoston:

import { ChatService } from './app.chat.service';

Ja injektoimme ChatService-palvelun konstruktoriimme:

constructor(chatService: ChatService) { }

Tuloksena meillä on seuraava tiedosto:

Jos kaikki meni odotetusti, muutosten tallentamisen jälkeen sinun pitäisi nähdä ’user connected’ -viesti terminaalissa, josta käynnistit node-sovelluksen:

$ node index.js
started on port: 3000
user connected

Voidaan siis sanoa, että onnistuimme vihdoinkin muodostamaan yhteyden Socket IO -palvelimeemme. Nyt on aika todella lähettää dataa Socket IO -tapahtumien kautta.

Viestin lähettäminen Socketille.IO

Aika parantaa toistaiseksi yksinkertaista ChatService-palveluamme mahdollisuudella lähettää viesti palvelimelle:

Tämän toimimiseksi meidän on käytettävä sendMessage() sovelluskomponentistamme:

Viimeiseksi, annetaan käyttäjälle yksinkertainen tekstinsyöttö ja painike, jotta hän voi lähettää viestin:

Jotta tämä kaikki toimisi, meidän on kuunneltava palvelimella ’new-message’-tapahtumaa, jonka lähetimme ChatService-palvelusta:

socket.on('new-message', (message) => {
console.log(message);
});

Nyt meidän index.js näyttää tältä:

Jos haluat leikkiä koodilla, löydät sen GitHub-repostani – rxjs-chat.

Kommunikaatio muiden käyttäjien kanssa

Viestimme lähettämiseksi muille käyttäjille meidän on vain muutettava ’new-message’-tapahtumakutsumme console.log(message) sisäpuolella oleva io.emit(message):ksi:

Ja mitä io.emit() tekee? Yksinkertaisesti sanottuna se lähettää tapahtuman kaikille, jotka ovat yhteydessä palvelimeen.

Kommunikoidaan palvelimemme kanssa ChatServicen kautta. Lisäämme palveluumme uuden metodin tätä tarkoitusta varten – getMessages. Se palauttaa Observablen, jonka luomme Observable.create()-metodilla. Aina kun socket vastaanottaa uusia viestejä, käytämme observer.next() -toimintoa välittääksemme ne eteenpäin observereille.

Sen jälkeen tilaamme tämän Observablen AppComponentistamme:

Luomme uuden messages array:n, johon tallennamme palvelimelta vastaanotetut viestit. Meidän on näytettävä nämä viestit mallissamme. Se on täydellinen käyttötapaus ngFor:lle: