Den fulde kildekode til denne tutorial kan findes her:elliotforbes/angular-socket-io-example
I denne tutorial vil vi se på, hvordan vi kan opbygge en realtidsapplikation ved hjælp af både Angular 4 og Socket.io-biblioteket. Jeg har tidligere dækket, hvordan du kan udnytte rå websockets og konvertere dem til observables ved hjælp af RxJS-biblioteket i en tidligere tutorial, som kan findes her: Angular Websockets Tutorial
Video Tutorial
Installation af Socket.IO
For at kunne udnytte socket.io-biblioteket skal vi først installere det ved hjælp af node-pakkehåndteringen. Det kan vi gøre ved at skrive følgende:
npm install socket.io-clientnpm install @types/socket.io-clientTurning Websockets into RxJS Subjects
RxJS Subjects er både et Observable og et Observer. Ved hjælp af disse Subjects kan vi samtidig lytte til og sende beskeder til en enkelt websocket, hvilket i princippet åbner op for tovejskommunikation og giver os mulighed for at gøre fede ting som f.eks. at opbygge chatsystemer.
I dette scenario opretter vi både en Websocket-tjeneste og en Chat-tjeneste.Websocket-tjenesten vil håndtere direkte kommunikation med socket’en, og Chat-tjenesten vil udsætte en simpel grænseflade, som vores andre komponenter nemt kan interagere med.
Når vi har defineret denne websocket-tjeneste, kan vi derefter definere en chat-tjeneste, der kun har en konstruktør og en sendMsg() funktion, der skal bruges til at sende meddelelser til vores socket.io-server.
Anvendelse af vores chat-tjeneste
Hvis vi ønsker at begynde at bruge vores nyudviklede chat-tjeneste, kunne vi gøre noget som dette:
Vi kunne derefter oprette en simpel knap i vores ./app.component.html fil, som ville kalde vores sendMessage() funktion:<button (click)="sendMessage()">Send Message</button>. Så længe du har specificeret dine nyoprettede tjenester i arrayet app.module.ts providers, har du forhåbentlig nu en applikation, der kan sende og modtage meddelelser fra en socket.io-baseret webserver.
Vores websocket-server
I denne tutorial vil vi udnytte en meget simpel socket.io-baseret expressserver, der vil lytte på for alle indgående websocket-forbindelser, og når den modtager en forbindelse, vil den udskrive, at en bruger har oprettet forbindelse. Opret en ny fil kaldet app.js og tilføj følgende kode:
Hvor du kører denne kode, skal du sikre dig, at de rette node-afhængigheder er installeret. Det kan du gøre ved at skrive
npm i express http socket.io. Du kan køre denne server ved at skrivenode app.js.
Konklusion
Når du kører dette, bør du se vores websocket-server udskrive noget, der ligner nedenstående output. Den starter først på port 5000, når vi derefter åbner vores Angularklient, bør du se den logge user connected, og hver gang vi sender en besked fra vores klient, kan du se indholdet af den pågældende besked blive udskrevet herunder.
$ node app.jsstarted on port 5000user connectedMessage Received: "Test Message"Message Received: "Test Message"