1. Einführung in WebSockets:

Was sind WebSockets?

WebSockets repräsentieren eine fortschrittliche Technologie, die es ermöglicht, eine interaktive Kommunikation zwischen dem Client und einem Server zu erstellen. Im Gegensatz zu herkömmlichen HTTP-Verbindungen, bei denen der Client (z. B. ein Webbrowser) eine Anfrage an den Server sendet und auf eine Antwort wartet, ermöglichen WebSockets eine bidirektionale Kommunikation. Das bedeutet, dass sowohl der Server als auch der Client Daten initiieren und senden können, ohne auf eine Anfrage zu warten.

Warum sind sie nützlich?

Traditionelle HTTP-Anfragen sind zustandslos und nicht dauerhaft. Jede Anfrage öffnet eine neue Verbindung, und nachdem die Daten übertragen wurden, wird diese Verbindung geschlossen. Dieser Prozess kann ineffizient sein, insbesondere wenn Echtzeitdaten oder häufige Updates erforderlich sind.

WebSockets hingegen bieten eine dauerhafte Verbindung, die nach dem initialen Handshake offen bleibt. Dies ermöglicht eine schnellere Datenübertragung, da der Overhead des ständigen Verbindungsaufbaus und -abbaus entfällt. Dies ist besonders nützlich für Anwendungen wie Online-Spiele, Chat-Anwendungen, Finanz-Dashboards und andere Echtzeitanwendungen.

Anwendungsfälle für WebSockets:

Einige gängige Anwendungsfälle für WebSockets sind:

• Chat-Anwendungen
• Online-Multiplayer-Spiele
• Live-Sportergebnisse oder Börsenticker
• Kollaborative Tools wie gemeinsame Dokumentenbearbeitung
• Benachrichtigungen in Echtzeit

2. Einführung in socket.io:

Was ist socket.io?

socket.io ist eine JavaScript-Bibliothek, die es Entwicklern erleichtert, Echtzeit-Webanwendungen zu erstellen. Sie bietet Abstraktionen für WebSockets und viele Fallbacks für ältere Technologien, falls WebSockets nicht verfügbar sind. Dies macht sie zu einer robusten Lösung für unterschiedliche Umgebungen und Browser-Kompatibilitäten.

Vorteile von socket.io gegenüber reinen WebSockets:

• Kompatibilität: socket.io funktioniert nicht nur mit WebSockets, sondern bietet auch Fallbacks für ältere Technologien, was die Kompatibilität mit älteren Browsern sicherstellt.
• Einfachheit: Die API von socket.io ist einfach und intuitiv, was den Einstieg erleichtert.
• Erweiterte Funktionen: socket.io bietet zusätzliche Funktionen, die über reine WebSockets hinausgehen, wie z. B. Räume, Namensräume und Broadcasting.
• Wiederverbindung: socket.io versucht automatisch, die Verbindung wiederherzustellen, wenn sie unterbrochen wird.

Hauptkomponenten: Client- und Serverbibliothek:

socket.io besteht aus zwei Hauptkomponenten:

1. Serverbibliothek: Typischerweise in einer Node.js-Anwendung verwendet. Sie ermöglicht es dem Server, Verbindungen von Clients zu akzeptieren und mit ihnen zu kommunizieren.
2. Clientbibliothek: Diese wird in der Webanwendung des Benutzers ausgeführt und ermöglicht es dem Client, sich mit dem Server zu verbinden und Nachrichten auszutauschen.

3. Frontend-Implementierung mit Angular und socket.io:

In modernen Webanwendungen wie Pingo ist es üblich, Frameworks wie Angular zu verwenden, um die Entwicklung zu erleichtern und den Code zu strukturieren. In diesem Kapitel werden wir uns ansehen, wie socket.io in eine Angular-Anwendung integriert werden kann.

Einrichtung und Abhängigkeiten:

Zunächst müssen Sie die socket.io-client-Bibliothek zu Ihrem Angular-Projekt hinzufügen. Dies kann mit npm oder einem anderen Paketmanager erfolgen:

npm install socket.io-client

WebsocketService:

Der WebsocketService ist ein zentraler Dienst, der die gesamte Logik für die Kommunikation mit dem socket.io-Server kapselt. Hier ist eine kurze Übersicht über den bereitgestellten Code:

• Initialisierung: Beim Erstellen des Dienstes wird eine Verbindung zum socket.io-Server hergestellt, welcher in diesem Fall das Pingo-Backend darstellt.
• Räume betreten und verlassen: Die Methoden joinRoom und leaveRoom ermöglichen es dem Client, einem bestimmten Raum beizutreten oder ihn zu verlassen. Dies ist nützlich, wenn Sie Chaträume oder andere segmentierte Kommunikationskanäle haben.
• Nachrichten senden: Die Methode sendMessage ermöglicht es dem Client, eine Nachricht (in diesem Fall ein Chat-Objekt) an den Server zu senden.
• Nachrichten empfangen: Die Methode onMessageReceived gibt ein Observable zurück, das jedes Mal einen Wert ausgibt, wenn eine Nachricht vom Server empfangen wird. Dies ermöglicht es anderen Teilen Ihrer Angular-Anwendung, auf eingehende Nachrichten zu reagieren.

Integration in Komponenten:

Mit dem WebsocketService können Sie nun in Ihren Angular-Komponenten auf socket.io-Funktionen zugreifen. Zum Beispiel könnten Sie eine Chat-Komponente haben, die den WebsocketService verwendet, um Nachrichten zu senden und zu empfangen.

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
  public messages: Chat[] = [];

  constructor(private websocketService: WebsocketService) {}

  ngOnInit(): void {
    this.websocketService.onMessageReceived().subscribe((chat: Chat) => {
      this.messages.push(chat);
    });
  }

  send(message: string): void {
    const chatMessage: Chat = {
    };
    this.websocketService.sendMessage(chatMessage);
  }
}

4. Backend-Implementierung mit NestJS und socket.io:

NestJS ist ein progressives Node.js-Framework zum Erstellen effizienter, zuverlässiger und skalierbarer Serverseitenanwendungen. Es verwendet moderne JavaScript, ist auf TypeScript aufgebaut und kombiniert Elemente von OOP (Objektorientierte Programmierung), FP (Funktionale Programmierung) und FRP (Funktionale Reaktive Programmierung).

ChatGateway:

Der ChatGateway ist ein zentrales Element, das die WebSocket-Kommunikation mit dem Frontend steuert. Hier sind einige der Hauptfunktionen und -methoden:

• WebSocketServer: Dieser Dekorator wird verwendet, um eine Instanz des socket.io-Servers zu erstellen.
• handleConnection: Diese Methode wird aufgerufen, wenn ein neuer Client eine Verbindung herstellt. Hier werden auch verschiedene Ereignishandler für den Client definiert, wie z.B. das Senden von Nachrichten und das Betreten oder Verlassen von Räumen.
• handleDisconnect: Diese Methode wird aufgerufen, wenn ein Client die Verbindung trennt. Hier können Sie jegliche Aufräumarbeiten oder Benachrichtigungen durchführen.
• afterInit: Diese Methode wird aufgerufen, nachdem der WebSocket-Server initialisiert wurde. Sie können hier jegliche Initialisierungslogik hinzufügen.

ChatService:

Der ChatService ist verantwortlich für die Logik rund um den Chat. Er interagiert mit dem Datenbank-Repository, um Chats zu speichern und abzurufen, und verwendet den Mapper, um zwischen DTOs (Data Transfer Objects) und Entitäten zu konvertieren.

• newChat: Diese Methode erstellt einen neuen Chat-Eintrag in der Datenbank. Sie nimmt ein ChatDto entgegen, konvertiert es in eine Chat-Entität und speichert es dann über das Repository.
• getChatByRoom: Diese Methode ruft alle Chats für einen bestimmten Raum ab. Wenn keine Chats gefunden werden, wird eine NotFoundException ausgelöst.

Zusätzliche Komponenten:

Sie haben auch erwähnt, dass es zusätzliche Komponenten wie eine Entity, ein Repository, ein DTO und einen Mapper gibt. Auch wenn sie hier nicht im Detail beschrieben sind, spielen sie eine entscheidende Rolle:

• Entity: Definiert die Struktur und Beziehungen der Chat-Daten in der Datenbank.
• Repository: Bietet Methoden zum Abrufen und Speichern von Daten in der Datenbank.
• DTO: Ein Objekt, das Daten zwischen Client und Server überträgt, oft mit einer etwas anderen Struktur als die Datenbank-Entity.
• Mapper: Ein Tool, das die Konvertierung zwischen DTOs und Entitäten erleichtert.

Mit dieser Backend-Implementierung habe ich die Chat-Funktion in Pingo implementiert. Die Kombination von NestJS und socket.io bietet eine leistungsstarke und flexible Lösung für moderne Webanwendungen.