Bagaimana Anda membangun fitur real-time dengan WebSocket gateway?

Question

Accepted Answer

NestJS mendukung **komunikasi real-time, bidirectional** melalui **WebSocket gateway** — kelas yang didekorasi dengan `@WebSocketGateway()` yang menangani koneksi WebSocket dan pesan (biasanya melalui Socket.IO). Mereka memungkinkan fitur seperti chat, notifikasi langsung, dan dashboard langsung, menggunakan struktur NestJS yang sama (DI, decorator).

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

Gateway menggunakan `@SubscribeMessage("event")` untuk menangani event yang masuk (analog dengan `@Post` untuk HTTP) dan `server` yang di-inject untuk **emit** event kembali ke klien — `server.emit` broadcast ke semua orang.

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

Gateway dapat bereaksi terhadap klien yang terhubung dan terputus — berguna untuk presence tracking dan cleanup.

## Menargetkan klien spesifik dan room

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

**Room** mengelompokkan klien (misalnya ruang chat, kolaborator dokumen), memungkinkan Anda broadcast ke subset spesifik daripada ke semua orang — penting untuk fitur real-time yang terbatas.

## Gateway menggunakan kembali fitur NestJS

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

## Scaling WebSocket

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

## Mengapa ini penting

WebSocket gateway adalah cara NestJS mendukung **fitur real-time, bidirectional** — chat, notifikasi langsung, presence, collaborative editing, dashboard langsung, interaksi multiplayer — yang model request-response REST tidak dapat sediakan (server dapat push ke klien, bukan hanya merespons request).

Memahami mereka adalah pengetahuan tingkat senior yang berharga untuk membangun aplikasi interaktif modern.

Kekuatan utamanya adalah gateway sesuai dengan struktur NestJS yang familiar: mereka adalah provider yang mendukung **dependency injection** dan dapat menggunakan **guard, pipe, interceptor, dan filter** sama seperti HTTP controller, sehingga pola dan organisasi kode yang sama berlaku untuk real-time seperti halnya REST.

Mengetahui cara menangani event (`@SubscribeMessage`), broadcast ke klien (`server.emit`), menggunakan **room** untuk membatasi broadcast ke subset yang relevan (ruang chat, kolaborator dokumen), dan mengelola connection lifecycle (presence, cleanup) mencakup toolkit real-time praktis.

Kritis penting adalah **pertimbangan scaling**: koneksi WebSocket stateful dan terikat ke satu instance server, jadi scaling horizontal memerlukan **Redis adapter** untuk mengkoordinasi broadcast/room di seluruh instance (jebakan umum — seperti session, state real-time tidak dapat tinggal di memori satu proses ketika menjalankan multiple instance).

Ini adalah kemampuan penting dan semakin relevan untuk membangun pengalaman real-time dan interaktif yang diharapkan pengguna modern, dan integrasi bersih NestJS membuatnya dapat diakses sambil menggunakan kembali struktur framework.