Dies könnte die am meisten gefürchtete Frage unter neuen Entwicklern sein, wie man eine App mit Angular und Socket.io. erstellt, da die meisten Apps Sockets für die Echtzeitkommunikation der Frontend mit der Backend. So, heute werde ich darüber sprechen, wie zu integrieren socket.io mit einer Angular App. Dieser Code würde für alle Angular-Versionen über Angular1 funktionieren.

Aktualisiert – Dieser Artikel wurde im Dezember 2020 aktualisiert, um die neuesten Änderungen der Version v3 von socket.io

Lassen Sie uns zunächst ein node Projekt erstellen.

Erstellen Sie eine neue directory und geben Sie sie ein.

mkdir socketio-node

Dadurch wird ein leerer Ordner mit dem Namen socketio-node erstellt.

Wir werden den Knoten verwenden.JS web Framework express. Stellen Sie sicher, Knoten.JS ist auf Ihrem System installiert.

Zuerst erstellen wir eine package.json Manifest-Datei, die unser Projekt beschreibt.
Erstellen Sie eine Datei mit dem Namen package.json und fügen Sie den folgenden Code ein.(Sie können dies auch mit npm init tun)

{
"name": "socketio-node",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}

Um die dependencies Eigenschaft einfach zu füllen, müssen wir express installieren, geben Sie dies in das Terminal ein.

npm install express

Es wird die neueste Version von Express in unser Projekt installieren und hinzufügen und Ihre dependencies wird jetzt so aussehen

"dependencies": {
"express": "^4.17.1"
}

Jetzt, da express installiert ist, können wir eine index.js Datei erstellen, die wird unsere Anwendung einrichten.

const app = require('express')();
const http = require('http').createServer(app);
app.get('/', (req, res) => {
res.send('<h1>Hey Socket.io</h1>');
});
http.listen(3000, () => {
console.log('listening on *:3000');
});

Dieser Code wird in den folgenden Schritten erläutert:

• Express initialisiert app als Funktionshandler, den Sie einem HTTP-Server bereitstellen können (siehe Zeile 2).
• Wir definieren einen Routen-Handler /, der aufgerufen wird, wenn wir unsere Website home aufrufen.
• Wir lassen den HTTP-Server auf Port 3000 lauschen.

Wenn Sie node index.js ausführen, sollten Sie Folgendes sehen:

Öffnen http://localhost:3000 im Browser würde so aussehen:

in unsere App installieren. Führen Sie dies im Terminal aus.

npm install socket.io

Dadurch wird das Modul installiert und die Abhängigkeit zu package.json hinzugefügt. Bearbeiten wir nun index.js, um es hinzuzufügen:

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http, {
cors: {
origins: 
}
});app.get('/', (req, res) => {
res.send('<h1>Hey Socket.io</h1>');
});io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});http.listen(3000, () => {
console.log('listening on *:3000');
});

Beachten Sie, dass ich in Zeile 3 eine neue Instanz von socket.io initialisiere, indem ich das http (das HTTP-Server) -Objekt und die cors-Optionen (aktualisiert für socket.io v3) um unsere angular localhost URL zuzulassen, können Sie die URL oder Ihren Frontend-Client eingeben, in meinem Fall war es localhost:4200
Dann höre ich auf die connection und disconnection Ereignisse für eingehende Sockets, und ich protokolliere es an der Konsole.

Unser Backend ist jetzt gut zu gehen, wir werden zu unserem node Code zurückkehren, wenn wir weitere Ereignisse implementieren werden.

Beginnen wir mit der Erstellung einer Angular App. Ich werde eine neue Angular App von Grund auf neu erstellen, während die meisten von Ihnen bereits eine mit Ihnen erstellt hätten.
Diejenigen, die bereits eine funktionierende Angular App haben, können den folgenden Code überspringen:

npm install -g @angular/cli
ng new socketio-angular

Dies würde die neueste Version von Angular CLI installieren und eine neue Angular-App von Grund auf neu erstellen.

Jetzt fügen wir hinzu socket.io dependency in unserer Angular-App.

cd socketio-angular
npm install socket.io-client

Dies würde die neueste socket.io-client Bibliothek in unserer Angular-App installieren.

Beginnen wir nun mit der Erstellung eines service zu handhaben socket.io verbindung. Ich würde einen Dienst der Stammebene singleton mit dem Namen socketio.service.ts erstellen und diesen in AppModule . Sie können den Service entsprechend Ihrer Projektstruktur erstellen.
Sie können den Dienst erstellen, indem Sie den folgenden Befehl ausführen.

ng g s socketio

Dies würde einen Dienst mit dem Namen socketio.service.ts erstellen. Die Verzeichnisstruktur würde ungefähr so aussehen. Dies ist nur eine einfache einseitige Demo, also habe ich den Dienst wie folgt in den Basisordner eingefügt.

socketio.service.ts

Datei und importieren Sie die folgenden:

import { io } from 'socket.io-client';

Fügen wir nun den Socket-Endpunkt hinzu, mit dem wir den Socket in der environment.ts -Datei verbinden würden.

export const environment = {
production: false,
SOCKET_ENDPOINT: 'http://localhost:3000'
};

Versuchen wir nun, eine Verbindung zu unserem Socket herzustellen und eine Socket-Verbindung zu erstellen. Zuerst müssen wir SocketioService in unser AppModule einfügen und den Dienst in unser app.component.ts einfügen. Lassen Sie uns den Dienst zuerst zu unseren Anbietern hinzufügen. In app.module.ts tun Sie dies:

@NgModule({
declarations: ,imports: ,providers: ,
bootstrap: })export class AppModule { }

Und gehen wir zu socketio.service.ts und schreiben eine Socket-Init-Funktion.

export class SocketioService { socket; constructor() { } setupSocketConnection() {
this.socket = io(environment.SOCKET_ENDPOINT);
}
}

Dies deklariert eine Variable mit dem Namen socket und dann nach dem Aufruf der setupSocketConnection Methode, socket Variable würde das verbundene Socket-Objekt enthalten.

Nun rufen wir diese Methode von app.component.ts in ngOnInit auf.

export class AppComponent implements OnInit { title = 'socketio-angular'; constructor(private socketService: SocketioService) {} ngOnInit() {
this.socketService.setupSocketConnection();
}
}

Wenn Sie Angular 6 und höher verwenden, kann dieser Fehler auftreten.

Uncaught ReferenceError: global is not defined

Dies liegt daran, dass Angular team in Version 6 von Angular CLI die Unterlegscheibe für global und andere integrierte Knoten entfernt. Wenn wir eine Bibliothek verwenden, die davon ausgeht, dass diese Globals vorhanden sind(socket.io-client in unserem Fall), können Sie versuchen, sie manuell in Ihre polyfills.ts -Datei zu verschieben:

// Add global to window, assigning the value of window itself.
(window as any).global = window;

Das Hinzufügen dieser Zeile zu Ihrer polyfills.ts -Datei beheben Sie das Problem und Ihre App würde wieder funktionieren. Um mehr über das obige Problem zu lesen, folgen Sie diesem link .

Nachdem Sie die Angular-App jetzt ausgeführt haben, können Sie sehen, dass der Socket verbunden ist und unsere Node-App-Konsole a user connected wie folgt anzeigt:

Nun, lassen Sie uns emit ein Ereignis aus dem server side. Wir werden das Ereignis an alle verbundenen Benutzer senden. Wir senden dieselbe Nachricht, die wir vom Client erhalten haben, und stellen ihr eine Serverzeichenfolge voran.

io.on('connection', (socket) => {
socket.on('my message', (msg) => {
io.emit('my broadcast', `server: ${msg}`);
});
});

Fügen wir jetzt einen Listener für das my broadcast -Ereignis in unserer Angular-App hinzu.

this.socket.on('my broadcast', (data: string) => {
console.log(data);
});

Nachdem Sie dies getan haben, können Sie Ihre broswer console überprüfen, es wäre print so etwas. Es gibt eine Nachricht vom Server aus, der die Sendung gesendet hat.

Wir haben bedeckte die basic Teile des Verbindens eines Knotens socket.io app mit einer eckigen App.

Bonus Tipp: Sie können auch query parameters an das Backend senden, wenn Sie eine Verbindung zum Socket herstellen, indem Sie options mit url in einer Verbindung verwenden.

this.socket = io(environment.SOCKET_ENDPOINT, {
auth: {
token: 'cde'
}
});

Um fetch diese Informationen auf dem Backend, müssen wir es so machen:

io.on('connection', (socket) => {
let token = socket.handshake.auth.token;
});

Dies würde den Wert cde von Frontend übergeben.

Sie können den gesamten oben beschriebenen Beispielcode auf meinem Github überprüfen.

Damit ist mein Artikel über das Erstellen eines real time application mit Angular und Socket.io mit NodeJS abgeschlossen. Ich habe die basics zum Verbinden der Apps behandelt. Es gibt viel mehr Informationen zu Sockets, die erkundet werden können, z. B. Räume, Online-Offline-Status, Senden weiterer Daten und Abrufen von Online-Benutzern. Diese Informationen können nicht in einem einzigen Artikel behandelt werden. Wird write zu diesen Themen, wenn Sie liked my work auf diesem Blog.

Schreiben Sie Ihre Bewertungen auf.

Hat Ihnen meine Arbeit gefallen? Kauf mir einen Kaffee.