Der vollständige Quellcode für dieses Tutorial kann hier gefunden werden:elliotforbes/angular-socket-io-example
In diesem Tutorial werden wir uns ansehen, wie wir eine Echtzeitanwendung mit Angular 4 und der Socket.io Bibliothek erstellen können. Ich habe bereits in einem früheren Tutorial beschrieben, wie man rohe Websockets nutzen und mit Hilfe der RxJS-Bibliothek in Observables umwandeln kann, und zwar hier:Angular Websockets Tutorial
Video Tutorial
Installation von Socket.IO
Um die Socket.io-Bibliothek nutzen zu können, müssen wir sie zunächst über den Node-Paketmanager installieren. Dazu geben wir Folgendes ein:
npm install socket.io-clientnpm install @types/socket.io-clientWandeln von Websockets in RxJS-Subjects
RxJS-Subjects sind sowohl ein Observable als auch ein Observer. Mit diesen Subjects können wir gleichzeitig auf einen einzelnen Websocket hören und Nachrichten an ihn senden, was im Wesentlichen eine Zwei-Wege-Kommunikation ermöglicht und uns erlaubt, coole Dinge zu tun, wie z.B. Chatsysteme aufzubauen.
In diesem Szenario werden wir sowohl einen Websocket-Dienst als auch einen Chat-Dienst erstellen.Der Websocket-Dienst wird die direkte Kommunikation mit dem Socket abwickeln und der Chat-Dienst wird eine einfache Schnittstelle bereitstellen, mit der unsere anderen Komponenten leicht interagieren können.
Nachdem wir diesen Websocket-Dienst definiert haben, können wir einen Chat-Dienst definieren, der nur einen Konstruktor und eine sendMsg() Funktion hat, die zum Senden von Nachrichten an unseren socket.io-Server verwendet wird.
Verwendung unseres Chat-Dienstes
Wenn wir unseren neu erstellten Chat-Dienst verwenden wollten, könnten wir etwa so vorgehen:
Wir könnten dann eine einfache Schaltfläche in unserer ./app.component.html-Datei erstellen, die unsere sendMessage()-Funktion aufrufen würde:<button (click)="sendMessage()">Send Message</button>. Solange du deine neu erstellten Dienste im app.module.tsProvider-Array angegeben hast, solltest du jetzt hoffentlich eine Anwendung haben, die Nachrichten von einem socket.iobasierten Webserver senden und empfangen kann.
Unser Websocket-Server
In diesem Tutorial werden wir einen sehr einfachen, auf socket.io basierenden expressServer verwenden, der auf auf alle eingehenden Websocket-Verbindungen lauscht und beim Empfang einer Verbindung ausgibt, dass ein Benutzer sich verbunden hat. Erstellen Sie eine neue Datei mit dem Namen app.js und fügen Sie den folgenden Code hinzu:
Bevor Sie diesen Code ausführen, müssen Sie sicherstellen, dass die richtigen Node-Abhängigkeiten installiert sind. Dies können Sie durch Eingabe von
npm i express http socket.iotun. Sie können diesen Server ausführen, indem Sienode app.jseingeben.
Schlussfolgerung
Wenn Sie diesen Code ausführen, sollten Sie sehen, dass unser Websocket-Server etwas wie die folgende Ausgabe ausgibt. Er startet zuerst auf Port 5000, wenn wir dann unseren Angular-Client öffnen, sollten Sie sehen, dass er user connected protokolliert und dann jedes Mal, wenn wir eine Nachricht von unserem Client senden, sehen Sie, dass der Inhalt dieser Nachricht unten ausgegeben wird.
$ node app.jsstarted on port 5000user connectedMessage Received: "Test Message"Message Received: "Test Message"