Hoe bouw je real-time features met WebSocket gateways?

Question

Accepted Answer

NestJS ondersteunt **real-time, bidirectionele communicatie** via **WebSocket gateways** — klassen gedecoreerd met `@WebSocketGateway()` die WebSocket-verbindingen en berichten afhandelen (typisch via Socket.IO). Ze maken features mogelijk zoals chat, live meldingen en live dashboards, met dezelfde NestJS-structuur (DI, decorators).

## Een gateway definiëren

```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
  }
}
```

Een gateway gebruikt `@SubscribeMessage("event")` om inkomende events af te handelen (analoog aan `@Post` voor HTTP) en de geïnjecteerde `server` om events terug naar clients te **emitteren** — `server.emit` stuurt naar iedereen.

## Connection lifecycle hooks

```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 kunnen reageren op clients die verbinden en verbreken — handig voor presence tracking en opschoning.

## Specifieke clients en rooms aanspreken

```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
}
```

**Rooms** groeperen clients (bijv. een chatroom, collaborators van een document), zodat je naar specifieke subsets kunt broadcasten in plaats van naar iedereen — essentieel voor scoped real-time features.

## Gateways hergebruiken NestJS-features

```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 schalen

```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.)
```

## Waarom het belangrijk is

WebSocket gateways zijn hoe NestJS **real-time, bidirectionele features** ondersteunt — chat, live meldingen, presence, collaboratief bewerken, live dashboards, multiplayer-interacties — die het request-response model van REST niet kan bieden (de server kan naar clients pushen, niet alleen reageren op verzoeken).

Ze begrijpen is waardevol senior-level kennis voor het bouwen van moderne interactieve applicaties.

De kernsterkte is dat gateways in de vertrouwde structuur van NestJS passen: het zijn providers die **dependency injection** ondersteunen en **guards, pipes, interceptors en filters** kunnen gebruiken net als HTTP controllers, dus dezelfde patronen en code-organisatie gelden voor real-time als voor REST.

Weten hoe je events afhandelt (`@SubscribeMessage`), naar clients broadcastet (`server.emit`), **rooms** gebruikt om broadcasts tot relevante subsets te beperken (chatrooms, document collaborators), en de connection lifecycle beheert (presence, opschoning) omvat de praktische real-time toolkit.

Kritisch belangrijk is de **scaling-overweging**: WebSocket-verbindingen zijn stateful en gebonden aan één server-instantie, dus horizontaal schalen vereist een **Redis adapter** om broadcasts/rooms tussen instanties te coördineren (een veel voorkomende valkuil — zoals sessies kunnen real-time state niet in het geheugen van één process leven bij meerdere instanties).

Dit is een belangrijk, steeds relevanter wordend vermogen voor het bouwen van de real-time, interactieve ervaringen die moderne gebruikers verwachten, en NestJS's schone integratie maakt het toegankelijk terwijl het de structuur van het framework hergebruikt.