WebSocketゲートウェイでリアルタイム機能をどのように構築しますか?

Question

Accepted Answer

NestJSは**リアルタイムな双方向通信**を**WebSocketゲートウェイ**（`@WebSocketGateway()`デコレータで装飾されたクラスで、通常Socket.IO上でWebSocket接続とメッセージを処理）を介してサポートしています。これらはチャット、ライブ通知、ライブダッシュボードなどの機能を実現し、同じNestJS構造（DI、デコレータ）を使用します。

## ゲートウェイの定義

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

ゲートウェイは`@SubscribeMessage("event")`を使用して受信イベントを処理し（HTTP用の`@Post`に相当）、注入された`server`を使用してクライアントにイベントを**発信**します — `server.emit`は全員にブロードキャストします。

## 接続ライフサイクルフック

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

ゲートウェイはクライアントの接続と切断に反応できます — プレゼンストラッキングとクリーンアップに有用です。

## 特定のクライアントとルームをターゲットにする

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

**ルーム**はクライアントをグループ化します（例えば、チャットルーム、ドキュメントのコラボレータ）。全員ではなく、特定のサブセットにブロードキャストできます — スコープ付きリアルタイム機能に不可欠です。

## ゲートウェイは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.
```

## 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ゲートウェイはNestJSが**リアルタイムな双方向機能** — チャット、ライブ通知、プレゼンス、共同編集、ライブダッシュボード、マルチプレイヤーインタラクション — をサポートする方法です。RESTのリクエスト-レスポンスモデルではこれを提供できません（サーバーがクライアントにプッシュできず、リクエストに応答するだけです）。

これを理解することは、現代的でインタラクティブなアプリケーションを構築するためのシニアレベルの重要な知識です。

の主な強みは、ゲートウェイがNestJSの馴染みのある構造にフィットすることです：それらは**依存性注入**をサポートするプロバイダであり、HTTPコントローラーと同じように**ガード、パイプ、インターセプタ、フィルタ**を使用できるため、リアルタイムとRESTに同じパターンとコード構成が適用できます。

イベントを処理し（`@SubscribeMessage`）、クライアントにブロードキャストし（`server.emit`）、**ルーム**を使用してブロードキャストを関連するサブセット（チャットルーム、ドキュメントコラボレータ）にスコープし、接続ライフサイクルを管理する（プレゼンス、クリーンアップ）方法を知ることが、実践的なリアルタイムツールキットをカバーします。

重大な重要事項は**スケーリングの考慮**です：WebSocket接続はステートフルで単一のサーバーインスタンスに結びついているため、水平スケーリングにはインスタンス間でブロードキャスト/ルームを調整するために**Redisアダプタ**が必要です（一般的な落とし穴 — セッションのように、リアルタイム状態は複数インスタンス実行時に1つのプロセスのメモリに存在できません）。

これは、現代のユーザーが期待するリアルタイム、インタラクティブなエクスペリエンスを構築するための重要で、ますます関連性の高い能力です。NestJSの清潔な統合により、フレームワークの構造を再利用しながらアクセス可能になります。