Hur bygger du realtidsfunktioner med WebSocket-gateways?

Question

Accepted Answer

NestJS stöder **realtids, dubbelriktad kommunikation** via **WebSocket-gateways** — klasser dekorerade med `@WebSocketGateway()` som hanterar WebSocket-anslutningar och meddelanden (vanligtvis via Socket.IO). De möjliggör funktioner som chat, live-notifieringar och live-instrumentpaneler, med samma NestJS-struktur (DI, dekoratörer).

## Definiera en gateway

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

En gateway använder `@SubscribeMessage("event")` för att hantera inkommande händelser (motsvarande `@Post` för HTTP) och den injicerade `server` för att **skicka** händelser tillbaka till klienter — `server.emit` sänder till alla.

## Anslutningslivscykelhooks

```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 kan reagera på när klienter ansluter och kopplas från — användbart för närvaron tracking och städning.

## Målgruppering av specifika klienter och rum

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

**Rum** grupperar klienter (t.ex. ett chattrum, ett dokuments samarbetspartners), vilket låter dig sända till specifika delmängder snarare än alla — väsentligt för avgränsade realtidsfunktioner.

## Gateways återanvänder NestJS-funktioner

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

## Skalning av WebSockets

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

## Varför det spelar roll

WebSocket-gateways är hur NestJS stöder **realtids, dubbelriktade funktioner** — chat, live-notifieringar, närvaro, samarbetsredigering, live-instrumentpaneler, flerspelarinteraktioner — som REST:s request-response-modell inte kan tillhandahålla (servern kan skicka till klienter, inte bara svara på förfrågningar).

Att förstå dem är värdeful kunskap på seniorsnivå för att bygga moderna interaktiva applikationer.

Huvudstyrkan är att gateways passar NestJS:s välkända struktur: de är providers som stöder **beroendeinjicering** och kan använda **guards, pipes, interceptors och filters** precis som HTTP-controllrar, så samma mönster och kodorganisation tillämpas på realtid som på REST.

Att veta hur man hanterar händelser (`@SubscribeMessage`), sänder till klienter (`server.emit`), använder **rum** för att begränsa sändningar till relevanta delmängder (chattrum, dokumentsamarbetspartners) och hanterar anslutningslivscykeln (närvaro, städning) täcker den praktiska realtidsverktyglådan.

Kritiskt viktigt är **skalningsövervägandet**: WebSocket-anslutningar är tillståndsbaserade och bundna till en enda serverinstans, så horisontell skalning kräver en **Redis-adapter** för att samordna sändningar/rum över instanser (en vanlig fallgrop — som sessioner kan realtidstillståndet inte leva i en processs minne när flera instanser körs).

Detta är en viktig, alltmer relevant kapacitet för att bygga de realtids, interaktiva upplevelser som moderna användare förväntar sig, och NestJS:s ren integration gör den tillgänglig samtidigt som ramverkets struktur återanvänds.