Wie baust du Echtzeit-Features mit WebSocket-Gateways?

Question

Accepted Answer

NestJS unterstützt **Echtzeit-Kommunikation in beide Richtungen** via **WebSocket-Gateways** — Klassen, die mit `@WebSocketGateway()` dekoriert sind und WebSocket-Verbindungen und Nachrichten handhaben (typischerweise über Socket.IO). Sie ermöglichen Features wie Chat, Live-Benachrichtigungen und Live-Dashboards und verwenden dabei die gleiche NestJS-Struktur (DI, Decorators).

## Gateway definieren

```ts
import { WebSocketGateway, SubscribeMessage, MessageBody, WebSocketServer } from "@nestjs/websockets";
import { Server } from "socket.io";

@WebSocketGateway({ cors: true })
export class ChatGateway {
  @WebSocketServer()
  server: Server;                        // the Socket.IO server instance

// handle a 'message' event from a client
  @SubscribeMessage("message")
  handleMessage(@MessageBody() data: { text: string }) {
    // BROADCAST to all connected clients
    this.server.emit("message", data);   // everyone receives the message
  }
}
```

Ein Gateway nutzt `@SubscribeMessage("event")`, um eingehende Events zu handhaben (analog zu `@Post` für HTTP), und den injizierten `server`, um Events **zurück** an Clients zu senden — `server.emit` broadcastet an alle.

## Lifecycle-Hooks für Verbindungen

```ts
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
  handleConnection(client: Socket) {
    console.log(`Client connected: ${client.id}`);   // a user joined
  }
  handleDisconnect(client: Socket) {
    console.log(`Client disconnected: ${client.id}`); // a user left — clean up
  }
}
```

Gateways können auf das Verbinden und Trennen von Clients reagieren — nützlich für Präsenz-Tracking und Cleanup.

## Targeting spezifischer Clients und Räume

```ts
@SubscribeMessage("joinRoom")
handleJoin(@ConnectedSocket() client: Socket, @MessageBody() room: string) {
  client.join(room);                              // add the client to a room
}

@SubscribeMessage("roomMessage")
sendToRoom(@MessageBody() data: { room: string; text: string }) {
  this.server.to(data.room).emit("message", data.text);   // emit only to that room
  // client.emit(...) → just that client; server.emit(...) → everyone
}
```

**Räume** gruppieren Clients (z. B. ein Chat-Raum, Collaborators eines Dokuments), sodass du an spezifische Teilmengen broadcasten kannst, anstatt an alle — essentiell für begrenzte Echtzeit-Features.

## Gateways nutzen NestJS-Features wieder

```text
Gateways are providers → they support dependency injection (inject services),
and can use guards, pipes, interceptors, and filters — just like HTTP controllers.
→ The same structure/patterns apply to real-time as to REST.
```

## WebSockets skalieren

```text
⚠️ WebSocket connections are STATEFUL and live on ONE server instance.
To scale across multiple instances, use a Redis adapter (socket.io-redis) so
broadcasts/rooms work across all instances. (Like sessions, don't keep state in
one process's memory when scaling horizontally.)
```

## Warum es wichtig ist

WebSocket-Gateways sind die Art, wie NestJS **Echtzeit-Kommunikation in beide Richtungen** unterstützt — Chat, Live-Benachrichtigungen, Präsenz, Collaborative Editing, Live-Dashboards, Multiplayer-Interaktionen — Features, die RESTful Request-Response-Modell nicht ermöglichen kann (der Server kann zu Clients pushen, nicht nur auf Requests antworten).

Sie zu verstehen ist wertvolles Senior-Level-Wissen zum Bauen moderner, interaktiver Anwendungen.

Die Hauptstärke ist, dass Gateways in NestJS's vertraute Struktur passen: Sie sind Provider mit **Dependency Injection** und können **Guards, Pipes, Interceptors und Filters** genauso wie HTTP-Controller nutzen, sodass die gleichen Muster und Code-Organisation auf Echtzeit wie auf REST angewendet werden.

Zu wissen, wie man Events handhiert (`@SubscribeMessage`), an Clients broadcastet (`server.emit`), **Räume** nutzt um Broadcasts auf relevante Teilmengen zu begrenzen (Chat-Räume, Dokument-Collaborators), und den Connection-Lifecycle verwaltet (Präsenz, Cleanup), deckt das praktische Echtzeit-Toolkit ab.

Kritisch wichtig ist die **Skalierungs-Überlegung**: WebSocket-Verbindungen sind stateful und an eine einzelne Server-Instanz gebunden, daher erfordert horizontales Skalieren einen **Redis-Adapter**, um Broadcasts/Räume über Instanzen zu koordinieren (eine häufige Fallstricke — wie Sessions können Echtzeit-Status nicht im Memory eines Prozesses leben, wenn mehrere Instanzen laufen).

Das ist eine wichtige, zunehmend relevante Fähigkeit zum Bauen der Echtzeit- und interaktiven Erfahrungen, die moderne Nutzer erwarten, und NestJS's saubere Integration macht sie zugänglich, während die Struktur des Frameworks wiederverwendet wird.