// Sec-WebSocket-Accept の計算実装
import { createHash } from 'crypto';
 
function computeAcceptKey(clientKey: string): string {
  // RFC 6455で規定されたマジックストリング（GUID）
  const MAGIC_STRING = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11';
 
  // Step 1: クライアントキーとGUIDを結合
  const combined = clientKey + MAGIC_STRING;
  // 例: "dGhlIHNhbXBsZSBub25jZQ==" + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
 
  // Step 2: SHA-1ハッシュを計算
  const hash = createHash('sha1').update(combined).digest();
 
  // Step 3: Base64エンコード
  const acceptKey = hash.toString('base64');
  // 結果: "s3pPLMBiTxaQ9kYGzzhZRbK+xOo="
 
  return acceptKey;
}
 
// 使用例
const clientKey = 'dGhlIHNhbXBsZSBub25jZQ==';
console.log(computeAcceptKey(clientKey));
// → "s3pPLMBiTxaQ9kYGzzhZRbK+xOo="

// マスキングアルゴリズムの実装
function maskPayload(payload: Buffer, maskKey: Buffer): Buffer {
  const masked = Buffer.alloc(payload.length);
  for (let i = 0; i < payload.length; i++) {
    // 各バイトをマスクキーの対応するバイトとXOR
    masked[i] = payload[i] ^ maskKey[i % 4];
  }
  return masked;
}
 
// アンマスキングも同じアルゴリズム（XORの性質: A ^ B ^ B = A）
function unmaskPayload(masked: Buffer, maskKey: Buffer): Buffer {
  return maskPayload(masked, maskKey); // 同一処理
}
 
// 使用例
const maskKey = Buffer.from([0x37, 0xfa, 0x21, 0x3d]);
const original = Buffer.from('Hello');
const masked = maskPayload(original, maskKey);
const restored = unmaskPayload(masked, maskKey);
console.log(restored.toString()); // → "Hello"

// server.ts - 本格的なWebSocketサーバー実装
import { WebSocketServer, WebSocket, RawData } from 'ws';
import { createServer, IncomingMessage } from 'http';
import { parse as parseUrl } from 'url';
 
// =============================================================
// 型定義
// =============================================================
interface ClientInfo {
  id: string;
  ws: WebSocket;
  rooms: Set<string>;
  isAlive: boolean;
  lastActivity: number;
  metadata: Record<string, unknown>;
}
 
interface Message {
  type: string;
  room?: string;
  to?: string;
  data?: unknown;
  timestamp: number;
}
 
// =============================================================
// WebSocketサーバークラス
// =============================================================
class RealtimeServer {
  private wss: WebSocketServer;
  private clients: Map<string, ClientInfo> = new Map();
  private rooms: Map<string, Set<string>> = new Map();
  private heartbeatInterval: ReturnType<typeof setInterval>;
  private messageHandlers: Map<string, (client: ClientInfo, msg: Message) => void>;
 
  constructor(port: number) {
    const server = createServer((req, res) => {
      // HTTPエンドポイント（ヘルスチェック等）
      if (req.url === '/health') {
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify({
          status: 'ok',
          connections: this.clients.size,
          rooms: this.rooms.size,
          uptime: process.uptime(),
        }));
        return;
      }
      res.writeHead(404).end();
    });
 
    this.wss = new WebSocketServer({
      server,
      // ハンドシェイク時の認証
      verifyClient: (info, callback) => {
        const token = this.extractToken(info.req);
        if (!token || !this.validateToken(token)) {
          callback(false, 401, 'Unauthorized');
          return;
        }
        callback(true);
      },
      // 最大ペイロードサイズ（1MB）
      maxPayload: 1024 * 1024,
      // permessage-deflate 圧縮
      perMessageDeflate: {
        zlibDeflateOptions: { chunkSize: 1024, memLevel: 7, level: 3 },
        zlibInflateOptions: { chunkSize: 10 * 1024 },
        clientNoContextTakeover: true,
        serverNoContextTakeover: true,
        serverMaxWindowBits: 10,
        concurrencyLimit: 10,
        threshold: 1024, // 1KB以上のメッセージのみ圧縮
      },
    });
 
    // メッセージハンドラーの登録
    this.messageHandlers = new Map([
      ['join', this.handleJoin.bind(this)],
      ['leave', this.handleLeave.bind(this)],
      ['broadcast', this.handleBroadcast.bind(this)],
      ['direct', this.handleDirectMessage.bind(this)],
      ['room_message', this.handleRoomMessage.bind(this)],
    ]);
 
    this.setupConnectionHandler();
    this.heartbeatInterval = this.startHeartbeat();
 
    server.listen(port, () => {
      console.log(`WebSocket server listening on port ${port}`);
    });
  }
 
  // ---------------------------------------------------------
  // 接続ハンドラー
  // ---------------------------------------------------------
  private setupConnectionHandler(): void {
    this.wss.on('connection', (ws: WebSocket, req: IncomingMessage) => {
      const clientId = crypto.randomUUID();
      const clientInfo: ClientInfo = {
        id: clientId,
        ws,
        rooms: new Set(),
        isAlive: true,
        lastActivity: Date.now(),
        metadata: {
          ip: req.socket.remoteAddress,
          userAgent: req.headers['user-agent'],
          connectedAt: new Date().toISOString(),
        },
      };
 
      this.clients.set(clientId, clientInfo);
      console.log(`Client connected: ${clientId} (total: ${this.clients.size})`);
 
      // ウェルカムメッセージ
      this.sendTo(ws, {
        type: 'welcome',
        data: { clientId, serverTime: Date.now() },
        timestamp: Date.now(),
      });
 
      // メッセージ受信
      ws.on('message', (raw: RawData) => {
        try {
          clientInfo.lastActivity = Date.now();
          const message: Message = JSON.parse(raw.toString());
          this.routeMessage(clientInfo, message);
        } catch (error) {
          this.sendTo(ws, {
            type: 'error',
            data: { message: 'Invalid message format' },
            timestamp: Date.now(),
          });
        }
      });
 
      // Pong応答
      ws.on('pong', () => {
        clientInfo.isAlive = true;
      });
 
      // 切断処理
      ws.on('close', (code: number, reason: Buffer) => {
        console.log(`Client disconnected: ${clientId} (code: ${code})`);
        // 所属ルームから退出
        for (const room of clientInfo.rooms) {
          this.leaveRoom(clientId, room);
        }
        this.clients.delete(clientId);
      });
 
      // エラー処理
      ws.on('error', (error: Error) => {
        console.error(`WebSocket error for ${clientId}: ${error.message}`);
      });
    });
  }
 
  // ---------------------------------------------------------
  // メッセージルーティング
  // ---------------------------------------------------------
  private routeMessage(client: ClientInfo, message: Message): void {
    const handler = this.messageHandlers.get(message.type);
    if (handler) {
      handler(client, message);
    } else {
      this.sendTo(client.ws, {
        type: 'error',
        data: { message: `Unknown message type: ${message.type}` },
        timestamp: Date.now(),
      });
    }
  }
 
  // ---------------------------------------------------------
  // メッセージハンドラー
  // ---------------------------------------------------------
  private handleJoin(client: ClientInfo, msg: Message): void {
    const room = msg.room;
    if (!room) return;
    this.joinRoom(client.id, room);
    this.sendTo(client.ws, {
      type: 'joined',
      room,
      data: { members: this.getRoomMembers(room).length },
      timestamp: Date.now(),
    });
  }
 
  private handleLeave(client: ClientInfo, msg: Message): void {
    const room = msg.room;
    if (!room) return;
    this.leaveRoom(client.id, room);
  }
 
  private handleBroadcast(client: ClientInfo, msg: Message): void {
    this.broadcast({
      type: 'broadcast',
      data: { from: client.id, content: msg.data },
      timestamp: Date.now(),
    }, client.id);
  }
 
  private handleDirectMessage(client: ClientInfo, msg: Message): void {
    if (!msg.to) return;
    const target = this.clients.get(msg.to);
    if (target) {
      this.sendTo(target.ws, {
        type: 'direct',
        data: { from: client.id, content: msg.data },
        timestamp: Date.now(),
      });
    }
  }
 
  private handleRoomMessage(client: ClientInfo, msg: Message): void {
    const room = msg.room;
    if (!room || !client.rooms.has(room)) return;
    this.broadcastToRoom(room, {
      type: 'room_message',
      room,
      data: { from: client.id, content: msg.data },
      timestamp: Date.now(),
    }, client.id);
  }
 
  // ---------------------------------------------------------
  // ルーム管理
  // ---------------------------------------------------------
  private joinRoom(clientId: string, room: string): void {
    if (!this.rooms.has(room)) {
      this.rooms.set(room, new Set());
    }
    this.rooms.get(room)!.add(clientId);
    this.clients.get(clientId)?.rooms.add(room);
  }
 
  private leaveRoom(clientId: string, room: string): void {
    this.rooms.get(room)?.delete(clientId);
    if (this.rooms.get(room)?.size === 0) {
      this.rooms.delete(room);
    }
    this.clients.get(clientId)?.rooms.delete(room);
  }
 
  private getRoomMembers(room: string): string[] {
    return Array.from(this.rooms.get(room) || []);
  }
 
  // ---------------------------------------------------------
  // 送信ユーティリティ
  // ---------------------------------------------------------
  private sendTo(ws: WebSocket, message: Message): void {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify(message));
    }
  }
 
  private broadcast(message: Message, excludeId?: string): void {
    const data = JSON.stringify(message);
    this.clients.forEach((client) => {
      if (client.id !== excludeId && client.ws.readyState === WebSocket.OPEN) {
        client.ws.send(data);
      }
    });
  }
 
  private broadcastToRoom(room: string, message: Message, excludeId?: string): void {
    const data = JSON.stringify(message);
    const members = this.rooms.get(room);
    if (!members) return;
    for (const memberId of members) {
      if (memberId === excludeId) continue;
      const client = this.clients.get(memberId);
      if (client && client.ws.readyState === WebSocket.OPEN) {
        client.ws.send(data);
      }
    }
  }
 
  // ---------------------------------------------------------
  // ハートビート
  // ---------------------------------------------------------
  private startHeartbeat(): ReturnType<typeof setInterval> {
    return setInterval(() => {
      this.clients.forEach((client, id) => {
        if (!client.isAlive) {
          console.log(`Client ${id} failed heartbeat, terminating`);
          client.ws.terminate();
          this.clients.delete(id);
          return;
        }
        client.isAlive = false;
        client.ws.ping();
      });
    }, 30000);
  }
 
  // ---------------------------------------------------------
  // 認証ユーティリティ
  // ---------------------------------------------------------
  private extractToken(req: IncomingMessage): string | null {
    const url = parseUrl(req.url || '', true);
    return (url.query.token as string) || null;
  }
 
  private validateToken(token: string): boolean {
    // 実際のアプリケーションではJWT検証等を行う
    return token.length > 0;
  }
 
  // ---------------------------------------------------------
  // シャットダウン
  // ---------------------------------------------------------
  shutdown(): void {
    clearInterval(this.heartbeatInterval);
    this.clients.forEach((client) => {
      client.ws.close(1001, 'Server shutting down');
    });
    this.wss.close();
  }
}
 
// サーバー起動
const server = new RealtimeServer(8080);
 
// グレースフルシャットダウン
process.on('SIGTERM', () => {
  console.log('SIGTERM received, shutting down...');
  server.shutdown();
  process.exit(0);
});

// main.go - Go + gorilla/websocket による実装
package main
 
import (
    "encoding/json"
    "log"
    "net/http"
    "sync"
    "time"
 
    "github.com/gorilla/websocket"
)
 
var upgrader = websocket.Upgrader{
    ReadBufferSize:  1024,
    WriteBufferSize: 1024,
    CheckOrigin: func(r *http.Request) bool {
        // 本番環境では適切なオリジン検証を行うこと
        origin := r.Header.Get("Origin")
        return origin == "https://example.com"
    },
}
 
type Hub struct {
    clients    map[*Client]bool
    broadcast  chan []byte
    register   chan *Client
    unregister chan *Client
    mu         sync.RWMutex
}
 
type Client struct {
    hub  *Hub
    conn *websocket.Conn
    send chan []byte
}
 
type Message struct {
    Type string          `json:"type"`
    Data json.RawMessage `json:"data"`
}
 
func newHub() *Hub {
    return &Hub{
        clients:    make(map[*Client]bool),
        broadcast:  make(chan []byte, 256),
        register:   make(chan *Client),
        unregister: make(chan *Client),
    }
}
 
func (h *Hub) run() {
    for {
        select {
        case client := <-h.register:
            h.mu.Lock()
            h.clients[client] = true
            h.mu.Unlock()
        case client := <-h.unregister:
            h.mu.Lock()
            if _, ok := h.clients[client]; ok {
                delete(h.clients, client)
                close(client.send)
            }
            h.mu.Unlock()
        case message := <-h.broadcast:
            h.mu.RLock()
            for client := range h.clients {
                select {
                case client.send <- message:
                default:
                    close(client.send)
                    delete(h.clients, client)
                }
            }
            h.mu.RUnlock()
        }
    }
}
 
func (c *Client) readPump() {
    defer func() {
        c.hub.unregister <- c
        c.conn.Close()
    }()
    c.conn.SetReadLimit(512 * 1024) // 512KB
    c.conn.SetReadDeadline(time.Now().Add(60 * time.Second))
    c.conn.SetPongHandler(func(string) error {
        c.conn.SetReadDeadline(time.Now().Add(60 * time.Second))
        return nil
    })
    for {
        _, message, err := c.conn.ReadMessage()
        if err != nil {
            break
        }
        c.hub.broadcast <- message
    }
}
 
func (c *Client) writePump() {
    ticker := time.NewTicker(30 * time.Second)
    defer func() {
        ticker.Stop()
        c.conn.Close()
    }()
    for {
        select {
        case message, ok := <-c.send:
            if !ok {
                c.conn.WriteMessage(websocket.CloseMessage, []byte{})
                return
            }
            c.conn.SetWriteDeadline(time.Now().Add(10 * time.Second))
            if err := c.conn.WriteMessage(websocket.TextMessage, message); err != nil {
                return
            }
        case <-ticker.C:
            c.conn.SetWriteDeadline(time.Now().Add(10 * time.Second))
            if err := c.conn.WriteMessage(websocket.PingMessage, nil); err != nil {
                return
            }
        }
    }
}
 
func serveWs(hub *Hub, w http.ResponseWriter, r *http.Request) {
    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        log.Println("Upgrade error:", err)
        return
    }
    client := &Client{hub: hub, conn: conn, send: make(chan []byte, 256)}
    client.hub.register <- client
    go client.writePump()
    go client.readPump()
}
 
func main() {
    hub := newHub()
    go hub.run()
    http.HandleFunc("/ws", func(w http.ResponseWriter, r *http.Request) {
        serveWs(hub, w, r)
    })
    log.Fatal(http.ListenAndServe(":8080", nil))
}

// websocket-client.ts - 本番向けWebSocketクライアント
type MessageHandler = (data: unknown) => void;
type ConnectionState = 'connecting' | 'connected' | 'disconnecting' | 'disconnected';
 
interface WebSocketClientOptions {
  url: string;
  protocols?: string | string[];
  reconnect?: boolean;
  maxReconnectAttempts?: number;
  reconnectBaseDelay?: number;
  reconnectMaxDelay?: number;
  heartbeatInterval?: number;
  messageQueueSize?: number;
}
 
class RobustWebSocketClient {
  private ws: WebSocket | null = null;
  private state: ConnectionState = 'disconnected';
  private reconnectAttempts = 0;
  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
  private heartbeatTimer: ReturnType<typeof setInterval> | null = null;
  private messageQueue: string[] = [];
  private handlers: Map<string, Set<MessageHandler>> = new Map();
  private options: Required<WebSocketClientOptions>;
 
  constructor(options: WebSocketClientOptions) {
    this.options = {
      protocols: [],
      reconnect: true,
      maxReconnectAttempts: 10,
      reconnectBaseDelay: 1000,
      reconnectMaxDelay: 30000,
      heartbeatInterval: 30000,
      messageQueueSize: 100,
      ...options,
    };
  }
 
  // ---------------------------------------------------
  // 接続管理
  // ---------------------------------------------------
  connect(): void {
    if (this.state === 'connecting' || this.state === 'connected') {
      console.warn('WebSocket is already connected or connecting');
      return;
    }
 
    this.state = 'connecting';
    this.emit('stateChange', { state: this.state });
 
    try {
      this.ws = new WebSocket(this.options.url, this.options.protocols);
    } catch (error) {
      this.handleConnectionFailure();
      return;
    }
 
    this.ws.onopen = () => {
      this.state = 'connected';
      this.reconnectAttempts = 0;
      this.emit('stateChange', { state: this.state });
      this.emit('connected', {});
      this.startHeartbeat();
      this.flushMessageQueue();
    };
 
    this.ws.onmessage = (event: MessageEvent) => {
      try {
        const message = JSON.parse(event.data);
        if (message.type === 'pong') {
          // ハートビート応答処理
          return;
        }
        this.emit(message.type, message.data);
        this.emit('message', message);
      } catch {
        // JSONでないメッセージ
        this.emit('rawMessage', event.data);
      }
    };
 
    this.ws.onclose = (event: CloseEvent) => {
      this.stopHeartbeat();
      const wasConnected = this.state === 'connected';
      this.state = 'disconnected';
      this.emit('stateChange', { state: this.state });
      this.emit('disconnected', {
        code: event.code,
        reason: event.reason,
        wasClean: event.wasClean,
      });
 
      // 意図しない切断で再接続が有効な場合
      if (wasConnected && !event.wasClean && this.options.reconnect) {
        this.scheduleReconnect();
      }
    };
 
    this.ws.onerror = () => {
      this.emit('error', { message: 'WebSocket connection error' });
    };
  }
 
  // ---------------------------------------------------
  // 再接続（指数バックオフ + ジッター）
  // ---------------------------------------------------
  private scheduleReconnect(): void {
    if (this.reconnectAttempts >= this.options.maxReconnectAttempts) {
      this.emit('reconnectFailed', {
        attempts: this.reconnectAttempts,
      });
      return;
    }
 
    // 指数バックオフ: baseDelay * 2^attempts
    const exponentialDelay =
      this.options.reconnectBaseDelay * Math.pow(2, this.reconnectAttempts);
 
    // 最大遅延でキャップ
    const cappedDelay = Math.min(exponentialDelay, this.options.reconnectMaxDelay);
 
    // ジッター: 0.5〜1.5倍のランダム係数
    const jitter = 0.5 + Math.random();
    const delay = Math.floor(cappedDelay * jitter);
 
    this.reconnectAttempts++;
    this.emit('reconnecting', {
      attempt: this.reconnectAttempts,
      delay,
    });
 
    this.reconnectTimer = setTimeout(() => {
      this.connect();
    }, delay);
  }
 
  // ---------------------------------------------------
  // メッセージ送信（キュー付き）
  // ---------------------------------------------------
  send(type: string, data: unknown = {}): boolean {
    const message = JSON.stringify({ type, data, timestamp: Date.now() });
 
    if (this.ws?.readyState === WebSocket.OPEN) {
      this.ws.send(message);
      return true;
    }
 
    // 接続中はキューに追加
    if (this.messageQueue.length < this.options.messageQueueSize) {
      this.messageQueue.push(message);
      return false;
    }
 
    console.warn('Message queue is full, dropping message');
    return false;
  }
 
  private flushMessageQueue(): void {
    while (this.messageQueue.length > 0 && this.ws?.readyState === WebSocket.OPEN) {
      const message = this.messageQueue.shift()!;
      this.ws.send(message);
    }
  }
 
  // ---------------------------------------------------
  // ハートビート
  // ---------------------------------------------------
  private startHeartbeat(): void {
    this.heartbeatTimer = setInterval(() => {
      if (this.ws?.readyState === WebSocket.OPEN) {
        this.ws.send(JSON.stringify({ type: 'ping', timestamp: Date.now() }));
      }
    }, this.options.heartbeatInterval);
  }
 
  private stopHeartbeat(): void {
    if (this.heartbeatTimer) {
      clearInterval(this.heartbeatTimer);
      this.heartbeatTimer = null;
    }
  }
 
  // ---------------------------------------------------
  // イベントエミッター
  // ---------------------------------------------------
  on(event: string, handler: MessageHandler): () => void {
    if (!this.handlers.has(event)) {
      this.handlers.set(event, new Set());
    }
    this.handlers.get(event)!.add(handler);
 
    // アンサブスクライブ関数を返す
    return () => {
      this.handlers.get(event)?.delete(handler);
    };
  }
 
  private emit(event: string, data: unknown): void {
    this.handlers.get(event)?.forEach((handler) => {
      try {
        handler(data);
      } catch (error) {
        console.error(`Error in handler for event "${event}":`, error);
      }
    });
  }
 
  // ---------------------------------------------------
  // 切断
  // ---------------------------------------------------
  disconnect(code = 1000, reason = 'Normal closure'): void {
    this.state = 'disconnecting';
    this.options.reconnect = false; // 再接続を無効化
    if (this.reconnectTimer) {
      clearTimeout(this.reconnectTimer);
    }
    this.stopHeartbeat();
    this.ws?.close(code, reason);
  }
 
  // ---------------------------------------------------
  // ステート取得
  // ---------------------------------------------------
  getState(): ConnectionState {
    return this.state;
  }
 
  getQueueSize(): number {
    return this.messageQueue.length;
  }
}
 
// 使用例
const client = new RobustWebSocketClient({
  url: 'wss://api.example.com/ws',
  reconnect: true,
  maxReconnectAttempts: 15,
  reconnectBaseDelay: 1000,
  heartbeatInterval: 25000,
});
 
// イベントリスナー登録
client.on('connected', () => {
  console.log('WebSocket connected');
  client.send('join', { room: 'general' });
});
 
client.on('chat', (data) => {
  console.log('Chat message:', data);
});
 
client.on('reconnecting', (info) => {
  console.log(`Reconnecting (attempt ${(info as any).attempt})...`);
});
 
client.connect();

// useWebSocket.ts - React用カスタムフック
import { useRef, useState, useEffect, useCallback } from 'react';
 
interface UseWebSocketOptions {
  url: string;
  onMessage?: (data: unknown) => void;
  onConnect?: () => void;
  onDisconnect?: (event: CloseEvent) => void;
  reconnect?: boolean;
  reconnectInterval?: number;
}
 
interface UseWebSocketReturn {
  send: (data: unknown) => void;
  isConnected: boolean;
  lastMessage: unknown | null;
  disconnect: () => void;
}
 
export function useWebSocket(options: UseWebSocketOptions): UseWebSocketReturn {
  const {
    url,
    onMessage,
    onConnect,
    onDisconnect,
    reconnect = true,
    reconnectInterval = 3000,
  } = options;
 
  const wsRef = useRef<WebSocket | null>(null);
  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const [isConnected, setIsConnected] = useState(false);
  const [lastMessage, setLastMessage] = useState<unknown | null>(null);
 
  const connect = useCallback(() => {
    const ws = new WebSocket(url);
 
    ws.onopen = () => {
      setIsConnected(true);
      onConnect?.();
    };
 
    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setLastMessage(data);
      onMessage?.(data);
    };
 
    ws.onclose = (event) => {
      setIsConnected(false);
      onDisconnect?.(event);
      if (reconnect && !event.wasClean) {
        reconnectTimerRef.current = setTimeout(connect, reconnectInterval);
      }
    };
 
    ws.onerror = () => {
      // エラー処理（oncloseが後続する）
    };
 
    wsRef.current = ws;
  }, [url, onMessage, onConnect, onDisconnect, reconnect, reconnectInterval]);
 
  useEffect(() => {
    connect();
    return () => {
      if (reconnectTimerRef.current) {
        clearTimeout(reconnectTimerRef.current);
      }
      wsRef.current?.close(1000);
    };
  }, [connect]);
 
  const send = useCallback((data: unknown) => {
    if (wsRef.current?.readyState === WebSocket.OPEN) {
      wsRef.current.send(JSON.stringify(data));
    }
  }, []);
 
  const disconnect = useCallback(() => {
    if (reconnectTimerRef.current) {
      clearTimeout(reconnectTimerRef.current);
    }
    wsRef.current?.close(1000, 'User initiated disconnect');
  }, []);
 
  return { send, isConnected, lastMessage, disconnect };
}
 
// コンポーネントでの使用例
// function ChatRoom() {
//   const { send, isConnected, lastMessage } = useWebSocket({
//     url: 'wss://api.example.com/ws',
//     onMessage: (data) => console.log('Received:', data),
//   });
//
//   return (
//     <div>
//       <p>Status: {isConnected ? 'Connected' : 'Disconnected'}</p>
//       <button onClick={() => send({ type: 'chat', text: 'Hello!' })}>
//         Send
//       </button>
//     </div>
//   );
// }

// socket-io-server.ts - Socket.IO による実装
import { Server, Socket } from 'socket.io';
import { createServer } from 'http';
import { createAdapter } from '@socket.io/redis-adapter';
import { createClient } from 'redis';
 
const httpServer = createServer();
 
const io = new Server(httpServer, {
  cors: {
    origin: ['https://example.com'],
    methods: ['GET', 'POST'],
    credentials: true,
  },
  pingInterval: 25000,    // Pingを送信する間隔
  pingTimeout: 20000,     // Pong応答を待つタイムアウト
  maxHttpBufferSize: 1e6, // 最大1MB
  transports: ['websocket', 'polling'], // トランスポート優先順位
});
 
// ---------------------------------------------------
// Redis Adapter（マルチサーバー対応）
// ---------------------------------------------------
async function setupRedisAdapter(): Promise<void> {
  const pubClient = createClient({ url: 'redis://localhost:6379' });
  const subClient = pubClient.duplicate();
  await Promise.all([pubClient.connect(), subClient.connect()]);
  io.adapter(createAdapter(pubClient, subClient));
  console.log('Redis adapter connected');
}
 
// ---------------------------------------------------
// ミドルウェア（認証）
// ---------------------------------------------------
io.use((socket: Socket, next) => {
  const token = socket.handshake.auth.token;
  if (!token) {
    return next(new Error('Authentication required'));
  }
  try {
    // JWT検証（例示のため簡略化）
    const decoded = verifyJWT(token);
    (socket as any).userId = decoded.userId;
    (socket as any).username = decoded.username;
    next();
  } catch {
    next(new Error('Invalid token'));
  }
});
 
// ---------------------------------------------------
// 名前空間: チャット
// ---------------------------------------------------
const chatNamespace = io.of('/chat');
 
chatNamespace.on('connection', (socket: Socket) => {
  const userId = (socket as any).userId;
  const username = (socket as any).username;
  console.log(`User connected: ${username} (${userId})`);
 
  // ルームに参加
  socket.on('joinRoom', async (roomName: string) => {
    await socket.join(roomName);
    socket.to(roomName).emit('userJoined', { userId, username, roomName });
    // ルームの参加者数を取得
    const members = await chatNamespace.in(roomName).fetchSockets();
    socket.emit('roomInfo', {
      roomName,
      memberCount: members.length,
    });
  });
 
  // ルームから退出
  socket.on('leaveRoom', async (roomName: string) => {
    await socket.leave(roomName);
    socket.to(roomName).emit('userLeft', { userId, username, roomName });
  });
 
  // メッセージ送信（ACK付き）
  socket.on('sendMessage', (data: { room: string; text: string }, ack) => {
    const message = {
      id: crypto.randomUUID(),
      from: { userId, username },
      text: data.text,
      timestamp: Date.now(),
    };
    socket.to(data.room).emit('newMessage', message);
    // 送達確認を返す
    ack?.({ status: 'ok', messageId: message.id });
  });
 
  // タイピングインジケーター
  socket.on('typing', (roomName: string) => {
    socket.to(roomName).volatile.emit('userTyping', { userId, username });
  });
 
  // 切断処理
  socket.on('disconnect', (reason: string) => {
    console.log(`User disconnected: ${username} (reason: ${reason})`);
  });
});
 
// ---------------------------------------------------
// 名前空間: 通知
// ---------------------------------------------------
const notificationNamespace = io.of('/notifications');
 
notificationNamespace.on('connection', (socket: Socket) => {
  const userId = (socket as any).userId;
  // ユーザー固有のルームに参加（個別通知用）
  socket.join(`user:${userId}`);
});
 
// 外部から通知を送信する関数
function sendNotification(userId: string, notification: object): void {
  notificationNamespace.to(`user:${userId}`).emit('notification', notification);
}
 
// ---------------------------------------------------
// JWT検証（簡略化）
// ---------------------------------------------------
function verifyJWT(token: string): { userId: string; username: string } {
  // 実際のアプリケーションではjsonwebtokenライブラリ等を使用
  return { userId: 'user-1', username: 'demo' };
}
 
// ---------------------------------------------------
// サーバー起動
// ---------------------------------------------------
async function main(): Promise<void> {
  await setupRedisAdapter();
  httpServer.listen(3000, () => {
    console.log('Socket.IO server listening on port 3000');
  });
}
 
main().catch(console.error);

// socket-io-client.ts - Socket.IO クライアント
import { io, Socket } from 'socket.io-client';
 
class ChatService {
  private socket: Socket;
 
  constructor(serverUrl: string, authToken: string) {
    this.socket = io(`${serverUrl}/chat`, {
      auth: { token: authToken },
      transports: ['websocket'],          // WebSocketを優先
      reconnection: true,                 // 自動再接続を有効化
      reconnectionAttempts: 10,           // 最大再接続試行回数
      reconnectionDelay: 1000,            // 初回再接続遅延
      reconnectionDelayMax: 10000,        // 最大再接続遅延
      timeout: 5000,                      // 接続タイムアウト
    });
 
    this.setupEventListeners();
  }
 
  private setupEventListeners(): void {
    this.socket.on('connect', () => {
      console.log('Connected to chat server');
    });
 
    this.socket.on('connect_error', (error: Error) => {
      console.error('Connection error:', error.message);
    });
 
    this.socket.on('disconnect', (reason: string) => {
      console.log('Disconnected:', reason);
      if (reason === 'io server disconnect') {
        // サーバーが明示的に切断した場合、手動で再接続
        this.socket.connect();
      }
    });
 
    // 受信イベント
    this.socket.on('newMessage', (message) => {
      console.log('New message:', message);
    });
 
    this.socket.on('userJoined', (data) => {
      console.log(`${data.username} joined ${data.roomName}`);
    });
 
    this.socket.on('userTyping', (data) => {
      console.log(`${data.username} is typing...`);
    });
  }
 
  joinRoom(roomName: string): void {
    this.socket.emit('joinRoom', roomName);
  }
 
  sendMessage(room: string, text: string): Promise<{ status: string; messageId: string }> {
    return new Promise((resolve) => {
      // ACK付きのemit
      this.socket.emit('sendMessage', { room, text }, (response: any) => {
        resolve(response);
      });
    });
  }
 
  notifyTyping(room: string): void {
    this.socket.volatile.emit('typing', room);
  }
 
  disconnect(): void {
    this.socket.disconnect();
  }
}

# nginx.conf - WebSocket対応のリバースプロキシ設定
upstream websocket_backend {
    # IPハッシュによるSticky Session
    ip_hash;
 
    server ws-server-1:8080;
    server ws-server-2:8080;
    server ws-server-3:8080;
}
 
server {
    listen 443 ssl;
    server_name ws.example.com;
 
    ssl_certificate     /etc/ssl/certs/example.com.crt;
    ssl_certificate_key /etc/ssl/private/example.com.key;
 
    location /ws {
        proxy_pass http://websocket_backend;
 
        # WebSocketアップグレードに必要な設定
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
 
        # クライアント情報の転送
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
 
        # タイムアウト設定（WebSocketの長時間接続に対応）
        proxy_read_timeout 86400s;  # 24時間
        proxy_send_timeout 86400s;
    }
}

// メッセージバリデーションの実装例
import { z } from 'zod';
 
// メッセージスキーマの定義
const ChatMessageSchema = z.object({
  type: z.literal('chat'),
  room: z.string().min(1).max(100).regex(/^[a-zA-Z0-9_-]+$/),
  text: z.string().min(1).max(5000).trim(),
});
 
const JoinRoomSchema = z.object({
  type: z.literal('join'),
  room: z.string().min(1).max(100).regex(/^[a-zA-Z0-9_-]+$/),
});
 
const MessageSchema = z.discriminatedUnion('type', [
  ChatMessageSchema,
  JoinRoomSchema,
]);
 
// メッセージ受信時のバリデーション
function handleIncomingMessage(rawData: string): void {
  let parsed: unknown;
  try {
    parsed = JSON.parse(rawData);
  } catch {
    // 不正なJSONは即座に拒否
    return;
  }
 
  const result = MessageSchema.safeParse(parsed);
  if (!result.success) {
    console.warn('Invalid message:', result.error.issues);
    return;
  }
 
  // バリデーション済みのメッセージを処理
  const message = result.data;
  switch (message.type) {
    case 'chat':
      processChatMessage(message);
      break;
    case 'join':
      processJoinRoom(message);
      break;
  }
}
 
// レート制限の実装
class RateLimiter {
  private counters: Map<string, { count: number; resetAt: number }> = new Map();
 
  constructor(
    private maxRequests: number,
    private windowMs: number,
  ) {}
 
  isAllowed(clientId: string): boolean {
    const now = Date.now();
    const entry = this.counters.get(clientId);
 
    if (!entry || now > entry.resetAt) {
      this.counters.set(clientId, { count: 1, resetAt: now + this.windowMs });
      return true;
    }
 
    if (entry.count >= this.maxRequests) {
      return false;
    }
 
    entry.count++;
    return true;
  }
}
 
// 1秒間に最大10メッセージ
const rateLimiter = new RateLimiter(10, 1000);
 
function processChatMessage(message: z.infer<typeof ChatMessageSchema>): void {
  // メッセージ処理ロジック
}
 
function processJoinRoom(message: z.infer<typeof JoinRoomSchema>): void {
  // ルーム参加ロジック
}

// ダメな例: 全クライアントへの無制限ブロードキャスト
// 1,000接続 × 1,000メッセージ/秒 = 1,000,000メッセージ/秒の送信負荷
 
wss.on('connection', (ws) => {
  ws.on('message', (data) => {
    // 全クライアントに転送 → N^2問題が発生
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(data);  // 送信バッファが溢れる危険
      }
    });
  });
});
 
// 改善例: ルームベースの配信 + レート制限
wss.on('connection', (ws) => {
  const clientRooms = new Set<string>();
  const messageRateLimit = new RateLimiter(10, 1000);
  const clientId = crypto.randomUUID();
 
  ws.on('message', (raw) => {
    // レート制限チェック
    if (!messageRateLimit.isAllowed(clientId)) {
      ws.send(JSON.stringify({ type: 'error', data: 'Rate limit exceeded' }));
      return;
    }
 
    const message = JSON.parse(raw.toString());
 
    // ルーム内のメンバーのみに送信
    if (message.room && clientRooms.has(message.room)) {
      const roomMembers = rooms.get(message.room);
      if (roomMembers) {
        const payload = JSON.stringify(message);
        for (const memberId of roomMembers) {
          if (memberId === clientId) continue;
          const member = clients.get(memberId);
          if (member && member.readyState === WebSocket.OPEN) {
            // バッファリングされたメッセージ量をチェック
            if (member.bufferedAmount < 1024 * 1024) {
              member.send(payload);
            }
          }
        }
      }
    }
  });
});

// ダメな例: 再接続ロジックがない
const ws = new WebSocket('wss://api.example.com/ws');
ws.onclose = () => {
  console.log('Connection lost');  // ここで終わり。ユーザーは手動リロードが必要
};
 
// さらにダメな例: 固定間隔での即座再接続
ws.onclose = () => {
  setTimeout(() => {
    new WebSocket('wss://api.example.com/ws');
    // 問題1: サーバーダウン中に全クライアントが同時に再接続を試みる
    // 問題2: 「サンダリングハード」問題 → サーバー復旧直後に接続殺到
    // 問題3: 固定間隔のため負荷が分散されない
  }, 1000);
};
 
// 改善例: 指数バックオフ + ジッター + 最大試行回数
class ReconnectionStrategy {
  private attempt = 0;
  private maxAttempts = 10;
  private baseDelay = 1000;    // 1秒
  private maxDelay = 60000;    // 60秒
  private timer: ReturnType<typeof setTimeout> | null = null;
 
  reset(): void {
    this.attempt = 0;
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
  }
 
  shouldRetry(): boolean {
    return this.attempt < this.maxAttempts;
  }
 
  getNextDelay(): number {
    // 指数バックオフ
    const exponential = this.baseDelay * Math.pow(2, this.attempt);
    // 最大値でキャップ
    const capped = Math.min(exponential, this.maxDelay);
    // フルジッター（0〜cappedの範囲でランダム）
    // これにより、複数クライアントの再接続タイミングが分散される
    const jittered = Math.random() * capped;
 
    this.attempt++;
    return Math.floor(jittered);
  }
 
  scheduleReconnect(callback: () => void): void {
    if (!this.shouldRetry()) {
      console.error('Max reconnection attempts reached');
      return;
    }
    const delay = this.getNextDelay();
    console.log(`Reconnecting in ${delay}ms (attempt ${this.attempt}/${this.maxAttempts})`);
    this.timer = setTimeout(callback, delay);
  }
}