Een real-time app maken met Angular en Socket.io Tutorial

De volledige broncode voor deze tutorial vind je hier:elliotforbes/angular-socket-io-example

In deze tutorial gaan we kijken hoe we een real-time applicatie kunnen bouwen met zowel Angular 4 als de Socket.io-bibliotheek. Ik heb in het verleden behandeld hoe je raw websockets kunt gebruiken en ze kunt omzetten in observables met behulp van de RxJS-bibliotheek in een eerdere tutorial die je hier kunt vinden:Angular Websockets Tutorial

Video Tutorial

Installatie van Socket.IO

Om de Socket.io-bibliotheek te kunnen gebruiken, moeten we deze eerst installeren met behulp van de node package manager. We kunnen dit doen door het volgende in te typen:

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

Websockets omzetten in RxJS Subjects

RxJS Subjects zijn zowel een Observable als een Observer. Met behulp van deze Subjects kunnen we tegelijkertijd luisteren naar en berichten sturen naar een enkele websocket, dit opent in wezen tweewegcommunicatie en stelt ons in staat om coole dingen te doen, zoals het bouwen van chatsystemen.

In dit scenario zullen we zowel een Websocket-service als een Chat-service maken. De Websocket-service zal de directe communicatie met de socket afhandelen en de Chat-service zal een eenvoudige interface blootleggen waarmee onze andere componenten gemakkelijk kunnen interageren.

Nadat we deze websocket service hebben gedefinieerd, kunnen we een chat service definiëren die slechts een constructor heeft en een sendMsg() functie die gebruikt zal worden om berichten naar onze socket.io server te sturen.

Het gebruik van onze Chat Service

Als we onze nieuw ontworpen chat service willen gaan gebruiken, kunnen we iets als dit doen:

We kunnen dan een eenvoudige knop in ons ./app.component.html bestand maken die onze sendMessage() functie aanroept:<button (click)="sendMessage()">Send Message</button>. Zolang u uw nieuw aangemaakte services in de app.module.ts providers array heeft gespecificeerd, zou u nu hopelijk een applicatie moeten hebben die berichten kan verzenden en ontvangen van een socket.io gebaseerde webserver.

Onze Websocket Server

In deze tutorial zullen we gebruik maken van een zeer eenvoudige socket.io gebaseerde expressserver die zal luisteren op voor alle inkomende websocket-verbindingen en bij het ontvangen van een verbinding zal het uitprinten dat een gebruiker is verbonden. Maak een nieuw bestand aan met de naam app.js en voeg de volgende code toe:

Voordat u deze code uitvoert, moet u ervoor zorgen dat de juiste node-afhankelijkheden zijn geïnstalleerd. Dat kunt u doen door npm i express http socket.io te typen. U kunt deze server uitvoeren door node app.js te typen.

Conclusie

Wanneer u dit uitvoert, zou u onze websocket-server iets moeten zien afdrukken zoals de onderstaande uitvoer. Hij start eerst op poort 5000, als we dan onze Angular client openen zou je moeten zien dat hij user connected logt en dan telkens als we een bericht sturen van onze client zou je de inhoud van dat bericht hieronder moeten zien.

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