WebSocket接続確立は、TCP接続の上で行われる多段階プロセスです。

接続確立の各段階の詳細

1. TCP接続確立：基盤となる信頼性のある双方向通信路を確立
2. HTTPハンドシェイク：WebSocketプロトコルへのアップグレード交渉
3. WebSocket通信：フレームベースの双方向リアルタイム通信開始

WebSocketでは、クライアントとサーバー間に論理的な直接接続を確立します。

// WebSocket接続でのEnd-to-End通信実装
class WebSocketEndToEnd {
  constructor(url) {
    this.url = url;
    this.connectionState = 'disconnected';
  }
  
  async establishConnection() {
    // 1. TCPレベルでの接続確立（プロキシ経由でも論理的には直接）
    const tcpConnection = await this.establishTCP();
    
    // 2. HTTP Upgradeハンドシェイク
    const upgradeSuccess = await this.performUpgrade(tcpConnection);
    
    if (upgradeSuccess) {
      // 3. End-to-End接続確立完了
      this.connectionState = 'connected';
      this.setupFrameHandling(tcpConnection);
    }
  }
  
  async performUpgrade(connection) {
    // WebSocketキーの生成（クライアント側認証）
    const wsKey = this.generateWebSocketKey();
    
    const upgradeRequest = {
      method: 'GET',
      headers: {
        'Connection': 'Upgrade',
        'Upgrade': 'websocket',
        'Sec-WebSocket-Version': '13',
        'Sec-WebSocket-Key': wsKey
      }
    };
    
    const response = await connection.send(upgradeRequest);
    
    // サーバーからの応答キー検証
    const expectedAccept = this.calculateExpectedAccept(wsKey);
    return response.headers['Sec-WebSocket-Accept'] === expectedAccept;
  }
  
  setupFrameHandling(connection) {
    // フレームレベルでの直接通信開始
    connection.onMessage = (frame) => {
      // プロキシによる変更なし、サーバーからのデータをそのまま受信
      this.handleWebSocketFrame(frame);
    };
  }
  
  sendMessage(data) {
    // フレームを直接サーバーに送信（中間ノードは透過的転送のみ）
    const frame = this.createWebSocketFrame(data);
    this.connection.send(frame);
  }
}

End-to-End通信の特徴

• 論理的直接接続：中間ノードは透過的な転送のみ実行
• 状態保持：接続確立後、その状態を継続的に維持
• フレーム整合性：送信されたフレームがそのまま宛先に到達
• 低遅延：中間ノードでの処理オーバーヘッドが最小限

class WebSocketServer {
  handleHandshakeRequest(request, socket) {
    try {
      // リクエストの解析
      const headers = this.parseHandshakeRequest(request);
      
      // ハンドシェイクの検証
      if (!this.validateHandshakeRequest(headers)) {
        this.sendHandshakeError(socket, 400, 'Bad Request');
        return false;
      }
      
      // Sec-WebSocket-Acceptの計算
      const wsKey = headers['sec-websocket-key'];
      const acceptKey = this.calculateAcceptKey(wsKey);
      
      // 成功レスポンスの送信
      const response = this.buildHandshakeResponse(acceptKey, headers);
      socket.write(response);
      
      // WebSocket接続状態に移行
      this.upgradeToWebSocket(socket);
      return true;
      
    } catch (error) {
      this.sendHandshakeError(socket, 500, 'Internal Server Error');
      return false;
    }
  }
  
  validateHandshakeRequest(headers) {
    // 必須ヘッダーの確認
    const requiredHeaders = [
      'host',
      'upgrade',
      'connection',
      'sec-websocket-key',
      'sec-websocket-version'
    ];
    
    for (const header of requiredHeaders) {
      if (!headers[header]) {
        return false;
      }
    }
    
    // ヘッダー値の検証
    if (headers['upgrade'] !== 'websocket' ||
        !headers['connection'].toLowerCase().includes('upgrade') ||
        headers['sec-websocket-version'] !== '13') {
      return false;
    }
    
    // WebSocketキーの形式確認
    if (!this.isValidWebSocketKey(headers['sec-websocket-key'])) {
      return false;
    }
    
    return true;
  }
  
  isValidWebSocketKey(key) {
    // Base64エンコードされた16バイトのデータかチェック
    try {
      const decoded = atob(key);
      return decoded.length === 16;
    } catch (e) {
      return false;
    }
  }
  
  buildHandshakeResponse(acceptKey, requestHeaders) {
    let response = [
      'HTTP/1.1 101 Switching Protocols',
      'Upgrade: websocket',
      'Connection: Upgrade',
      `Sec-WebSocket-Accept: ${acceptKey}`
    ];
    
    // サブプロトコルの処理
    if (requestHeaders['sec-websocket-protocol']) {
      const supportedProtocol = this.selectSubprotocol(
        requestHeaders['sec-websocket-protocol']
      );
      if (supportedProtocol) {
        response.push(`Sec-WebSocket-Protocol: ${supportedProtocol}`);
      }
    }
    
    // 拡張の処理
    if (requestHeaders['sec-websocket-extensions']) {
      const supportedExtensions = this.selectExtensions(
        requestHeaders['sec-websocket-extensions']
      );
      if (supportedExtensions) {
        response.push(`Sec-WebSocket-Extensions: ${supportedExtensions}`);
      }
    }
    
    response.push('', ''); // 空行でヘッダー終了
    return response.join('\r\n');
  }
}

SOCKSプロキシは、より低レベルでの透過的な接続を提供します。

class SOCKSWebSocketConnection {
  async connectThroughSOCKS5(wsUrl, socksConfig) {
    const wsTarget = new URL(wsUrl);
    
    // 1. SOCKSプロキシへの接続
    const socksSocket = await this.connectToSOCKS(socksConfig);
    
    // 2. SOCKS5認証
    await this.authenticateSOCKS5(socksSocket, socksConfig);
    
    // 3. ターゲットサーバーへの接続要求
    await this.requestSOCKSConnection(socksSocket, wsTarget);
    
    // 4. 透過的接続確立後、直接WebSocketハンドシェイク
    return this.performDirectWebSocketHandshake(socksSocket, wsUrl);
  }
  
  async authenticateSOCKS5(socket, config) {
    // SOCKS5認証ネゴシエーション
    const authRequest = new Uint8Array([
      0x05, // SOCKS version 5
      0x01, // Number of authentication methods
      0x02  // Username/Password authentication
    ]);
    
    socket.write(authRequest);
    
    const authResponse = await this.readBytes(socket, 2);
    if (authResponse[1] !== 0x02) {
      throw new Error('SOCKS5 authentication method not supported');
    }
    
    // ユーザー名/パスワード認証
    const credentials = this.buildCredentials(config.username, config.password);
    socket.write(credentials);
    
    const authResult = await this.readBytes(socket, 2);
    if (authResult[1] !== 0x00) {
      throw new Error('SOCKS5 authentication failed');
    }
  }
  
  async requestSOCKSConnection(socket, target) {
    // SOCKS5接続要求
    const hostname = target.hostname;
    const port = parseInt(target.port) || (target.protocol === 'wss:' ? 443 : 80);
    
    const connectRequest = new Uint8Array([
      0x05, // SOCKS version
      0x01, // Connect command
      0x00, // Reserved
      0x03, // Domain name address type
      hostname.length, // Domain name length
      ...new TextEncoder().encode(hostname), // Domain name
      (port >> 8) & 0xFF, // Port high byte
      port & 0xFF         // Port low byte
    ]);
    
    socket.write(connectRequest);
    
    const connectResponse = await this.readBytes(socket, 10);
    if (connectResponse[1] !== 0x00) {
      throw new Error('SOCKS5 connection failed');
    }
    
    console.log('SOCKS5 connection established');
  }
}

SOCKSプロキシの利点

• 透過性：アプリケーションレベルでの変更が不要
• プロトコル非依存：HTTP以外のプロトコルでも使用可能
• 低オーバーヘッド：最小限のプロトコル処理

実際の開発では、接続問題の診断と解決が重要なスキルとなります。

class WebSocketDebugger {
  static enableDebugLogging() {
    // 詳細な接続ログを有効化
    const originalWebSocket = window.WebSocket;
    
    window.WebSocket = class extends originalWebSocket {
      constructor(url, protocols) {
        console.log('🔌 WebSocket接続開始:', { url, protocols });
        super(url, protocols);
        
        this.addEventListener('open', (event) => {
          console.log('✅ WebSocket接続成功:', {
            url: this.url,
            protocol: this.protocol,
            extensions: this.extensions,
            timestamp: new Date().toISOString()
          });
        });
        
        this.addEventListener('error', (event) => {
          console.error('❌ WebSocket接続エラー:', {
            url: this.url,
            readyState: this.readyState,
            event: event,
            timestamp: new Date().toISOString()
          });
          
          // エラー詳細分析
          this.analyzeConnectionError();
        });
        
        this.addEventListener('close', (event) => {
          console.log('🔌 WebSocket接続クローズ:', {
            code: event.code,
            reason: event.reason,
            wasClean: event.wasClean,
            timestamp: new Date().toISOString()
          });
          
          // クローズ理由の詳細解析
          this.analyzeCloseReason(event.code);
        });
      }
      
      analyzeConnectionError() {
        // ネットワーク診断
        this.checkNetworkConnectivity();
        
        // プロキシ設定確認
        this.checkProxyConfiguration();
        
        // ファイアウォール診断
        this.checkFirewallRestrictions();
      }
      
      analyzeCloseReason(code) {
        const closeReasons = {
          1000: '正常終了',
          1001: 'エンドポイント離脱',
          1002: 'プロトコルエラー',
          1003: '不正なデータ受信',
          1006: '異常終了（詳細不明）',
          1007: 'データ形式エラー',
          1008: 'ポリシー違反',
          1009: 'メッセージサイズ過大',
          1010: '拡張ネゴシエーション失敗',
          1011: 'サーバー内部エラー'
        };
        
        console.log('クローズ理由:', closeReasons[code] || `不明（コード: ${code}）`);
        
        // 再接続推奨判定
        if ([1006, 1011, 1012, 1013, 1014, 1015].includes(code)) {
          console.log('💡 推奨: 再接続を試行してください');
        }
      }
      
      async checkNetworkConnectivity() {
        try {
          const response = await fetch('https://httpbin.org/get', {
            method: 'GET',
            mode: 'cors'
          });
          
          if (response.ok) {
            console.log('✅ 基本的なHTTP接続は正常');
          }
        } catch (error) {
          console.error('❌ 基本的なネットワーク接続に問題:', error);
        }
      }
      
      checkProxyConfiguration() {
        // プロキシ設定の推定
        const navigator = window.navigator;
        
        if (navigator.connection) {
          console.log('ネットワーク情報:', {
            effectiveType: navigator.connection.effectiveType,
            downlink: navigator.connection.downlink,
            rtt: navigator.connection.rtt
          });
        }
        
        // プロキシ存在の間接的検出
        const userAgent = navigator.userAgent;
        if (userAgent.includes('Proxy') || userAgent.includes('Gateway')) {
          console.log('💡 プロキシまたはゲートウェイの存在が疑われます');
        }
      }
    };
  }
  
  static async performConnectionDiagnostics(url) {
    console.log('🔍 WebSocket接続診断を開始:', url);
    
    const diagnostics = {
      timestamp: new Date().toISOString(),
      url: url,
      results: {}
    };
    
    // 1. URL形式の検証
    diagnostics.results.urlValidation = this.validateWebSocketURL(url);
    
    // 2. DNS解決テスト
    diagnostics.results.dnsResolution = await this.testDNSResolution(url);
    
    // 3. TCP接続テスト
    diagnostics.results.tcpConnectivity = await this.testTCPConnectivity(url);
    
    // 4. HTTP接続テスト
    diagnostics.results.httpConnectivity = await this.testHTTPConnectivity(url);
    
    // 5. WebSocketハンドシェイクテスト
    diagnostics.results.websocketHandshake = await this.testWebSocketHandshake(url);
    
    console.log('🔍 診断結果:', diagnostics);
    return diagnostics;
  }
  
  static validateWebSocketURL(url) {
    try {
      const wsUrl = new URL(url);
      
      const validation = {
        isValid: true,
        protocol: wsUrl.protocol,
        hostname: wsUrl.hostname,
        port: wsUrl.port,
        pathname: wsUrl.pathname,
        issues: []
      };
      
      if (!['ws:', 'wss:'].includes(wsUrl.protocol)) {
        validation.isValid = false;
        validation.issues.push('無効なプロトコル: ' + wsUrl.protocol);
      }
      
      if (!wsUrl.hostname) {
        validation.isValid = false;
        validation.issues.push('ホスト名が指定されていません');
      }
      
      return validation;
      
    } catch (error) {
      return {
        isValid: false,
        error: error.message,
        issues: ['URL形式が無効です']
      };
    }
  }
}

// デバッグ機能の有効化
WebSocketDebugger.enableDebugLogging();