คุณสร้างฟีเจอร์แบบ real-time ด้วย WebSocket gateway อย่างไร?

Question

Accepted Answer

NestJS รองรับ **การสื่อสารแบบ real-time สองทิศทาง** ผ่าน **WebSocket gateway** ซึ่งเป็นคลาสที่ติดเดคอเรเตอร์ `@WebSocketGateway()` คอยจัดการ WebSocket connection และ message (โดยทั่วไปผ่าน Socket.IO) มันเปิดใช้ฟีเจอร์อย่างแชต, การแจ้งเตือนสด และ dashboard สด โดยใช้โครงสร้าง NestJS เดิม (DI, decorator)

## การนิยาม 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 ใช้ `@SubscribeMessage("event")` เพื่อจัดการ event ที่เข้ามา (เทียบได้กับ `@Post` ของ HTTP) และใช้ `server` ที่ inject เข้ามาเพื่อ **emit** event กลับไปยัง client โดย `server.emit` จะ broadcast ไปยังทุกคน

## lifecycle hook ของ connection

```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 สามารถตอบสนองต่อ client ที่เชื่อมต่อและตัดการเชื่อมต่อได้ ซึ่งมีประโยชน์สำหรับการติดตาม presence และการเก็บกวาด

## การพุ่งเป้าไปที่ client และ 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** จัดกลุ่ม client (เช่น ห้องแชต, ผู้ร่วมแก้ไขเอกสาร) ให้คุณ broadcast ไปยังกลุ่มย่อยเฉพาะแทนที่จะส่งให้ทุกคน ซึ่งจำเป็นสำหรับฟีเจอร์ real-time ที่มีขอบเขต

## gateway ใช้ฟีเจอร์ของ 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.
```

## การ scale 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.)
```

## ทำไมจึงสำคัญ

WebSocket gateway คือวิธีที่ NestJS รองรับ **ฟีเจอร์แบบ real-time สองทิศทาง** เช่น แชต, การแจ้งเตือนสด, presence, การแก้ไขร่วมกัน, dashboard สด, การโต้ตอบแบบ multiplayer ซึ่งโมเดล request-response ของ REST ไม่สามารถมอบให้ได้ (server สามารถ push ไปยัง client ได้ ไม่ใช่แค่ตอบกลับ request)

การเข้าใจมันเป็นความรู้ระดับ senior ที่มีค่าสำหรับการสร้างแอปพลิเคชันแบบโต้ตอบสมัยใหม่

จุดแข็งสำคัญคือ gateway เข้ากับโครงสร้างที่คุ้นเคยของ NestJS มันเป็น provider ที่รองรับ **dependency injection** และสามารถใช้ **guard, pipe, interceptor และ filter** ได้เหมือน HTTP controller ทุกประการ ดังนั้นแพทเทิร์นและการจัดระเบียบโค้ดเดียวกันจึงใช้ได้กับ real-time เหมือนกับ REST

การรู้วิธีจัดการ event (`@SubscribeMessage`), broadcast ไปยัง client (`server.emit`), ใช้ **room** เพื่อจำกัดขอบเขตการ broadcast ไปยังกลุ่มย่อยที่เกี่ยวข้อง (ห้องแชต, ผู้ร่วมแก้ไขเอกสาร) และจัดการ lifecycle ของ connection (presence, การเก็บกวาด) ครอบคลุมชุดเครื่องมือ real-time เชิงปฏิบัติ

สำคัญยิ่งคือ **ข้อพิจารณาด้านการ scale**: WebSocket connection เป็น stateful และผูกกับ server instance เดียว ดังนั้นการ scale แนวนอนจึงต้องใช้ **Redis adapter** เพื่อประสานการ broadcast/room ข้าม instance (เป็นกับดักที่พบบ่อย เช่นเดียวกับ session, state แบบ real-time ไม่สามารถอยู่ใน memory ของ process เดียวได้เมื่อรันหลาย instance)

นี่เป็นความสามารถที่สำคัญและเกี่ยวข้องมากขึ้นเรื่อยๆ สำหรับการสร้างประสบการณ์แบบ real-time และโต้ตอบได้ที่ผู้ใช้สมัยใหม่คาดหวัง และการผสานรวมที่สะอาดของ NestJS ทำให้มันเข้าถึงได้ในขณะที่ใช้โครงสร้างของ framework ซ้ำ