Claude Codeでリアルタイム通信を実装する方法！WebSocketとSSEを使ったライブ機能の構築｜ブログ

はじめに

「チャット機能やリアルタイム通知を実装したいがWebSocketの設定が難しい」

「WebSocketとSSEのどちらを使えばいいか判断できない」

「複数サーバーにスケールアウトしたときのWebSocket接続の管理方法がわからない」

リアルタイム通信はユーザー体験を大きく向上させますが、接続管理・スケールアウト・障害対応など考慮すべき点が多くあります。Claude Codeを使えば、ユースケースに合った実装を効率的に構築できます。

1. WebSocketとSSEの使い分け

技術選択の相談

> 以下のユースケースにWebSocketとSSEのどちらが適しているか教えてください。

  ユースケース1：チャットアプリ（双方向メッセージング）
  ユースケース2：ダッシュボードのリアルタイム更新（サーバー→クライアントのみ）
  ユースケース3：ライブ通知（新着メール・注文状況更新）
  ユースケース4：ライブ共同編集（複数ユーザーが同時編集）
  ユースケース5：オンラインゲームのゲーム状態同期

  それぞれの理由と実装の複雑さも説明してください。

簡易比較：

観点	WebSocket	SSE
通信方向	双方向	サーバー→クライアントのみ
プロトコル	ws://	HTTP
ブラウザ対応	全モダンブラウザ	全モダンブラウザ
プロキシ対応	注意が必要	HTTPなので問題なし
向いているケース	チャット・ゲーム	通知・ダッシュボード更新

2. WebSocketサーバーの実装

ws ライブラリを使った実装

> Node.jsのwsライブラリでWebSocketサーバーを実装してください。

  機能：
  - 接続管理（接続・切断・エラー処理）
  - ハートビート（Ping/Pong）による接続維持
  - メッセージのJSONシリアライズ・バリデーション
  - ルームへの参加・退出
  - バイナリメッセージの対応

  Expressと統合して、HTTP・WebSocketを同一ポートで提供してください。
  TypeScriptで実装してください。

チャットアプリの完全実装

> WebSocketを使ったリアルタイムチャットアプリを実装してください。

  バックエンド（Node.js + ws）：
  - ユーザー認証（JWTをWebSocket接続時に検証）
  - ルーム機能（入室・退室・ルームの作成）
  - メッセージの永続化（PostgreSQL）
  - オンライン状態の管理
  - タイピングインジケーター

  フロントエンド（React + Next.js）：
  - 接続の確立と再接続ロジック
  - メッセージの楽観的UI更新
  - スクロールの自動制御
  - オフライン時のキューイング

3. Socket.ioでのリアルタイム機能

Socket.ioの設定

> Socket.ioを使ったリアルタイム通知システムを実装してください。

  技術スタック：
  - バックエンド：Node.js + Socket.io + Redis Adapter
  - フロントエンド：React + socket.io-client

  機能：
  - ユーザーごとのルーム（user:{userId}）
  - イベント種別（order_status・message・alert）
  - 接続時の未読通知の一括送信
  - 通知の既読管理

  複数サーバーでの動作確認のためRedis Adapterも設定してください。

コラボレーション機能の実装

> ドキュメントの共同編集機能をSocket.ioで実装してください。

  機能：
  - 複数ユーザーが同時にドキュメントを編集できる
  - 変更をリアルタイムで他ユーザーに反映
  - 競合解決（Operational Transformation または CRDT）
  - カーソル位置の共有
  - ユーザーの存在表示（何人が見ているか）

  Y.js（CRDT実装）を使ったアプローチを推奨してください。

4. SSEによるサーバープッシュ

FastAPIでのSSE実装

> FastAPIでServer-Sent Events（SSE）を実装してください。

  ユースケース：
  - 注文状況のリアルタイム更新
  - バックグラウンドジョブの進捗通知
  - リアルタイムダッシュボードのデータ更新

  実装内容：
  - StreamingResponseを使ったSSEエンドポイント
  - Redisのpub/subからのイベント受信
  - クライアントの切断検知と接続リストのクリーンアップ
  - 再接続時のlast event ID対応
  - Next.jsフロントエンドからの接続コード

Next.jsのRoute HandlersでのSSE

> Next.js App RouterのRoute HandlersでSSEを実装してください。

  エンドポイント：/api/stream/notifications

  機能：
  - ユーザー認証済みの場合のみ接続を許可
  - ユーザーIDに紐づいた通知をリアルタイム配信
  - 接続のキープアライブ（30秒ごとにコメントを送信）
  - エラー時のクライアントへの通知

  React側の受信コードとカスタムフックも実装してください。

5. スケールアウト対応

Redis Pub/Subによる複数サーバー対応

> WebSocket/Socket.ioのバックエンドを複数サーバーに
  スケールアウトできるよう設計してください。

  課題：
  - サーバーAに接続しているユーザーと
    サーバーBに接続しているユーザー間でメッセージが届かない

  解決策：Redis Pub/Subによるメッセージブロードキャスト

  実装内容：
  - Redis Pub/Subの設定
  - Socket.io Redis Adapterの設定
  - 接続情報の共有（どのサーバーにどのユーザーが接続しているか）
  - Kubernetes環境でのスティッキーセッション設定

6. 接続管理とエラーハンドリング

接続の堅牢化

> WebSocket接続を堅牢にするための実装を追加してください。

  クライアント側：
  - 自動再接続（指数バックオフ：1秒・2秒・4秒・最大30秒）
  - 接続状態の表示（接続中・接続済み・切断中）
  - オフライン時のメッセージキューイング
  - 再接続後の状態の再同期

  サーバー側：
  - 接続タイムアウト（5分間メッセージなしで切断）
  - 不正な接続の検出と遮断
  - 最大接続数の制限
  - 接続数のPrometheusメトリクス

7. リアルタイム機能のテスト

WebSocketのテスト実装

> WebSocket接続のテストを実装してください。

  使用ツール：
  - Playwright（E2Eテスト）
  - ws（単体テスト用クライアント）
  - k6（負荷テスト）

  テストシナリオ：
  - 正常な接続・切断
  - メッセージの送受信
  - ルームへの参加・退出
  - 接続切断時の再接続
  - 1000接続時の負荷テスト

8. まとめ・第5部の総括

Claude CodeでのリアルタイムWebSocket・SSE実装の効率化ポイント：

ユースケースに応じたWebSocket・SSEの選択を相談できる
Socket.io・ws・SSEの実装を技術スタックに合わせて生成
Redis Pub/Subによる複数サーバー対応を自動設定
再接続ロジック・接続管理の堅牢な実装を提供

リアルタイム通信実装のポイント：

チャット・ゲーム → WebSocket（双方向が必要）
通知・ダッシュボード → SSE（サーバープッシュのみで十分）
スケールアウトが必要な場合は最初からRedis Adapterを使う
再接続ロジックは必ず実装する

Claude Code入門シリーズ（第5部）の完結

第5部（第41〜50回・ID:60〜69）では、Ruby on Rails・Rust・Go言語・Kubernetes・OAuth2・メール配信・i18n・gRPC・MLOps・リアルタイム通信を解説しました。

部	回数	ID	テーマ
第1部	第1〜10回	19〜28	基礎編
第2部	第11〜20回	29〜38	実践編
第3部	第21〜30回	39〜48	応用・専門編
第4部	第31〜40回	49〜58	高度・専門技術編
第5部（本記事）	第41〜50回	60〜69	多言語・インフラ・ML編

よくある質問（FAQ）

Q. WebSocketの接続数はどのくらいまでスケールできますか？

A. 1サーバーで10,000〜100,000接続が一般的な目安です。それ以上が必要な場合は水平スケールとRedis Adapterの組み合わせで対応できます。Claude Codeに「10万同時接続を想定したWebSocketアーキテクチャを設計してください」と相談することができます。

Q. Next.jsのApp RouterでWebSocketは使えますか？

A. Next.jsはWebSocketサーバーを直接ホストできないため、別途Node.jsサーバーが必要です。ただしSSEはRoute Handlersで実装できます。Claude Codeに「Next.js + 別サーバーのWebSocketの構成を設計してください」と相談することで対応できます。

この記事はClaude Code入門シリーズ（第5部）の第50回・第5部最終回です。

← 第49回：MLOps ｜ ← シリーズ第1回：Claude Codeとは？

ご質問はお問い合わせページからお気軽にどうぞ。

Claude Codeでリアルタイム通信を実装する方法！WebSocketとSSEを使ったライブ機能の構築