Den fullständiga källkoden för denna tutorial finns här:elliotforbes/angular-socket-io-example
I den här tutorialen kommer vi att titta på hur vi kan bygga en realtidsapplikation med hjälp av både Angular 4 och Socket.io-biblioteket. Jag har i det förflutna täckt hur du kan använda råa websockets och konvertera dem till observables med hjälp av RxJS-biblioteket i en tidigare handledning som kan hittas här: Angular Websockets Tutorial
Video Tutorial
Installation av Socket.IO
För att kunna använda socket.io-biblioteket måste vi först installera det med hjälp av node package manager. Vi kan göra detta genom att skriva följande:
npm install socket.io-clientnpm install @types/socket.io-clientTurning Websockets into RxJS Subjects
RxJS Subjects är både en Observable och en Observer. Med hjälp av dessa Subjects kan vi samtidigt lyssna på och skicka meddelanden till en enda websocket, detta öppnar i princip upp för tvåvägskommunikation och gör det möjligt för oss att göra häftiga saker som att bygga chattsystem.
I det här scenariot kommer vi att skapa både en Websocket-tjänst och en Chat-tjänst.Websocket-tjänsten kommer att hantera den direkta kommunikationen med sockeln och Chat-tjänsten kommer att exponera ett enkelt gränssnitt som våra andra komponenter enkelt kan interagera med.
När vi har definierat den här websocket-tjänsten kan vi sedan definiera en chat-tjänst som bara har en konstruktör och en sendMsg() funktion som kommer att användas för att skicka meddelanden till vår socket.io-server.
Använda vår chattjänst
Om vi vill börja använda vår nygjorda chattjänst skulle vi kunna göra något liknande:
Vi skulle sedan kunna skapa en enkel knapp i vår ./app.component.html fil som skulle anropa vår sendMessage() funktion:<button (click)="sendMessage()">Send Message</button>. Så länge du har specificerat dina nyskapade tjänster i arrayen app.module.ts providers bör du förhoppningsvis nu ha en applikation som kan skicka och ta emot meddelanden från en socket.iobaserad webbserver.
Vår Websocket Server
I den här handledningen kommer vi att använda oss av en mycket enkel socket.io-baserad expressserver som kommer att lyssna på på alla inkommande websocket-anslutningar och när den tar emot en anslutning kommer den att skriva ut att en användare har kopplats upp. Skapa en ny fil som heter app.js och lägg till följande kod:
För att köra den här koden måste du se till att de rätta node-beroendena är installerade. Det kan du göra genom att skriva
npm i express http socket.io. Du kan köra den här servern genom att skrivanode app.js.
Slutsats
När du kör detta bör du se vår websocket-server skriva ut något som liknar nedanstående utdata. Den startar först på port 5000, när vi sedan öppnar vår Angularklient bör du se att den loggar user connected och varje gång vi skickar ett meddelande från vår klient ser du innehållet i meddelandet skrivas ut nedan.
$ node app.jsstarted on port 5000user connectedMessage Received: "Test Message"Message Received: "Test Message"