HTTP/1.1は現在のWebSocket実装の基盤となる最も重要なプロトコルです。

WebSocketハンドシェイクの詳細

クライアント側リクエスト

GET /chat HTTP/1.1
Host: example.com:8080
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Origin: https://example.com
User-Agent: Mozilla/5.0 (compatible WebSocket client)

サーバー側レスポンス

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Extensions: permessage-deflate

HTTP/1.1 Upgradeメカニズムの実装

// サーバー側：Node.js + ws ライブラリでの実装
const WebSocket = require('ws');
const http = require('http');

class HTTP11WebSocketServer {
  constructor() {
    this.server = http.createServer();
    this.wss = new WebSocket.Server({
      server: this.server,
      handleProtocols: this.handleProtocols.bind(this),
      verifyClient: this.verifyClient.bind(this)
    });
    
    this.setupHTTP11Handling();
  }
  
  setupHTTP11Handling() {
    // HTTP/1.1特有の処理
    this.server.on('upgrade', (request, socket, head) => {
      console.log('HTTP/1.1 Upgrade request received');
      console.log('Headers:', request.headers);
      
      // WebSocketハンドシェイクの詳細ログ
      this.logUpgradeDetails(request);
      
      // WebSocketサーバーにアップグレード処理を委任
      this.wss.handleUpgrade(request, socket, head, (ws) => {
        this.wss.emit('connection', ws, request);
      });
    });
  }
  
  handleProtocols(protocols, request) {
    console.log('Requested protocols:', protocols);
    
    // プロトコル選択ロジック
    const supportedProtocols = ['chat', 'echo', 'binary'];
    for (const protocol of protocols) {
      if (supportedProtocols.includes(protocol)) {
        return protocol;
      }
    }
    
    return false; // プロトコル拒否
  }
  
  verifyClient(info) {
    // HTTP/1.1ベースの検証
    const { origin, secure, req } = info;
    
    console.log('Client verification:', {
      origin,
      secure,
      userAgent: req.headers['user-agent'],
      httpVersion: req.httpVersion
    });
    
    // HTTP/1.1の詳細検証
    if (req.httpVersion !== '1.1') {
      console.log('Rejected: Not HTTP/1.1');
      return false;
    }
    
    return true;
  }
  
  logUpgradeDetails(request) {
    console.log('=== HTTP/1.1 WebSocket Upgrade Details ===');
    console.log('HTTP Version:', request.httpVersion);
    console.log('Method:', request.method);
    console.log('URL:', request.url);
    console.log('Upgrade header:', request.headers.upgrade);
    console.log('Connection header:', request.headers.connection);
    console.log('WebSocket Key:', request.headers['sec-websocket-key']);
    console.log('WebSocket Version:', request.headers['sec-websocket-version']);
  }
}

HTTP/1.1の技術的優位性

HTTP/2の利点を活用したWebSocket実装

// HTTP/2の多重化機能を活用
class OptimizedWebSocketHTTP2 {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
    this.channels = new Map();
    this.setupMultiplexing();
  }
  
  setupMultiplexing() {
    // HTTP/2では同一ドメインへの複数接続が効率的
    const channelConfigs = [
      { name: 'realtime', path: '/ws/realtime', priority: 'high' },
      { name: 'notifications', path: '/ws/notifications', priority: 'medium' },
      { name: 'sync', path: '/ws/sync', priority: 'low' },
      { name: 'telemetry', path: '/ws/telemetry', priority: 'low' }
    ];
    
    channelConfigs.forEach(config => {
      this.createChannel(config);
    });
  }
  
  createChannel(config) {
    const ws = new WebSocket(
      `${this.baseUrl}${config.path}`,
      [`${config.name}-v1`]
    );
    
    ws.onopen = () => {
      console.log(`${config.name} channel ready (HTTP/2 multiplexed)`);
      
      // HTTP/2の優先度制御を活用
      this.configurePriority(ws, config.priority);
    };
    
    ws.onmessage = (event) => {
      this.routeMessage(config.name, event);
    };
    
    this.channels.set(config.name, {
      socket: ws,
      config: config,
      messageQueue: [],
      stats: { sent: 0, received: 0 }
    });
  }
  
  configurePriority(ws, priority) {
    // HTTP/2ストリーム優先度の影響を考慮
    // 実際の優先度制御はブラウザとサーバーが処理
    const metadata = {
      priority: priority,
      timestamp: Date.now(),
      http2Multiplexed: true
    };
    
    ws.send(JSON.stringify({
      type: 'channel.config',
      metadata: metadata
    }));
  }
  
  // HTTP/2のヘッダー圧縮効果を最大化
  sendOptimizedMessage(channel, data) {
    const channelInfo = this.channels.get(channel);
    if (!channelInfo) return;
    
    // 共通ヘッダーの最適化（HPACK圧縮効果）
    const message = {
      v: '1.0',                    // バージョン
      ts: Date.now(),              // タイムスタンプ
      id: this.generateMessageId(), // メッセージID
      ch: channel,                 // チャネル名
      data: data                   // ペイロード
    };
    
    channelInfo.socket.send(JSON.stringify(message));
    channelInfo.stats.sent++;
  }
  
  // HTTP/2接続の統計情報
  getConnectionStats() {
    const stats = {
      totalChannels: this.channels.size,
      http2Features: {
        multiplexing: true,
        headerCompression: true,
        serverPush: false // WebSocketには不要
      },
      channelStats: {}
    };
    
    this.channels.forEach((info, name) => {
      stats.channelStats[name] = {
        readyState: info.socket.readyState,
        messagesSent: info.stats.sent,
        messagesReceived: info.stats.received,
        priority: info.config.priority
      };
    });
    
    return stats;
  }
}

HTTP/2環境での注意点

2025年の推奨アーキテクチャ

// 2025年推奨：プログレッシブWebSocket実装
class ProgressiveWebSocketStrategy {
  constructor(url, options = {}) {
    this.url = url;
    this.options = options;
    
    // プロトコルサポートの優先順位
    this.protocolPriority = [
      'websocket-over-http3',  // 実験的：HTTP/3対応ブラウザ
      'websocket-over-http2',  // 推奨：HTTP/2環境
      'websocket-over-http1.1' // 基盤：全ブラウザ対応
    ];
    
    this.implementProgressiveConnection();
  }
  
  async implementProgressiveConnection() {
    // 機能検出とプロトコル選択
    const supportedProtocol = await this.detectBestProtocol();
    
    switch (supportedProtocol) {
      case 'http3':
        await this.connectWithHTTP3();
        break;
      case 'http2':
        await this.connectWithHTTP2();
        break;
      default:
        await this.connectWithHTTP11();
    }
  }
  
  async detectBestProtocol() {
    // HTTP/3サポート検出
    if (await this.isHTTP3Available()) {
      console.log('Using HTTP/3 for WebSocket');
      return 'http3';
    }
    
    // HTTP/2サポート検出
    if (await this.isHTTP2Available()) {
      console.log('Using HTTP/2 for WebSocket');
      return 'http2';
    }
    
    console.log('Using HTTP/1.1 for WebSocket');
    return 'http1.1';
  }
  
  async connectWithHTTP11() {
    // HTTP/1.1基盤実装（最も安定）
    this.ws = new WebSocket(this.url, this.options.protocols);
    
    this.ws.onopen = () => {
      console.log('HTTP/1.1 WebSocket established');
      this.recordProtocolUsage('http1.1');
    };
    
    return this.setupStandardWebSocket();
  }
  
  async connectWithHTTP2() {
    // HTTP/2最適化実装
    this.ws = new WebSocket(this.url, this.options.protocols);
    
    // HTTP/2の多重化を活用した追加接続
    this.additionalChannels = this.setupMultiplexedChannels();
    
    this.ws.onopen = () => {
      console.log('HTTP/2 WebSocket with multiplexing');
      this.recordProtocolUsage('http2');
    };
    
    return this.setupOptimizedWebSocket();
  }
  
  async connectWithHTTP3() {
    // HTTP/3実験的実装
    try {
      // WebTransportの試行
      if ('WebTransport' in window) {
        this.transport = new WebTransport(this.url);
        await this.transport.ready;
        console.log('WebTransport over HTTP/3 established');
        this.recordProtocolUsage('webtransport');
        return this.setupWebTransport();
      }
      
      // 従来WebSocket over HTTP/3
      this.ws = new WebSocket(this.url, this.options.protocols);
      this.recordProtocolUsage('websocket-http3');
      return this.setupQUICWebSocket();
      
    } catch (error) {
      console.log('HTTP/3 failed, falling back to HTTP/2');
      return this.connectWithHTTP2();
    }
  }
  
  // パフォーマンス監視と自動最適化
  startPerformanceMonitoring() {
    this.performanceMonitor = {
      latency: [],
      throughput: [],
      reliability: { connected: 0, disconnected: 0 }
    };
    
    setInterval(() => {
      this.measurePerformance();
      this.optimizeConnection();
    }, 30000);
  }
  
  measurePerformance() {
    const metrics = {
      timestamp: Date.now(),
      rtt: this.measureRoundTripTime(),
      throughput: this.calculateThroughput(),
      protocol: this.currentProtocol
    };
    
    this.performanceMonitor.latency.push(metrics.rtt);
    this.performanceMonitor.throughput.push(metrics.throughput);
    
    return metrics;
  }
  
  // プロトコル利用統計の収集
  recordProtocolUsage(protocol) {
    this.currentProtocol = protocol;
    
    const usage = JSON.parse(localStorage.getItem('websocket-protocol-usage') || '{}');
    usage[protocol] = (usage[protocol] || 0) + 1;
    usage.lastUsed = protocol;
    usage.timestamp = Date.now();
    
    localStorage.setItem('websocket-protocol-usage', JSON.stringify(usage));
  }
}

エンタープライズ環境での実装ガイド

// エンタープライズグレードWebSocket実装
class EnterpriseWebSocketManager {
  constructor(config) {
    this.config = {
      primaryUrl: config.primaryUrl,
      fallbackUrls: config.fallbackUrls || [],
      healthCheckInterval: config.healthCheckInterval || 30000,
      maxReconnectAttempts: config.maxReconnectAttempts || 10,
      loadBalancing: config.loadBalancing || 'round-robin',
      monitoring: config.monitoring || {},
      ...config
    };
    
    this.connectionPool = new Map();
    this.healthStatus = new Map();
    this.loadBalancer = new LoadBalancer(this.config.loadBalancing);
    
    this.initializeEnterpriseFeatures();
  }
  
  initializeEnterpriseFeatures() {
    // 複数サーバーへの接続プール
    this.setupConnectionPool();
    
    // ヘルスチェックシステム
    this.startHealthMonitoring();
    
    // ロードバランシング
    this.configureLoadBalancing();
    
    // 監視・ログシステム
    this.setupMonitoring();
  }
  
  setupConnectionPool() {
    const urls = [this.config.primaryUrl, ...this.config.fallbackUrls];
    
    urls.forEach((url, index) => {
      const connection = new ProductionWebSocket(url, {
        id: `connection-${index}`,
        isPrimary: index === 0,
        protocols: this.config.protocols,
        autoReconnect: true
      });
      
      this.connectionPool.set(url, connection);
      this.healthStatus.set(url, { status: 'connecting', lastCheck: Date.now() });
    });
  }
  
  startHealthMonitoring() {
    this.healthCheckTimer = setInterval(() => {
      this.performHealthChecks();
    }, this.config.healthCheckInterval);
  }
  
  async performHealthChecks() {
    const healthPromises = Array.from(this.connectionPool.entries()).map(
      ([url, connection]) => this.checkConnectionHealth(url, connection)
    );
    
    const results = await Promise.allSettled(healthPromises);
    
    results.forEach((result, index) => {
      const url = Array.from(this.connectionPool.keys())[index];
      if (result.status === 'fulfilled') {
        this.healthStatus.set(url, result.value);
      } else {
        this.healthStatus.set(url, { 
          status: 'unhealthy', 
          error: result.reason,
          lastCheck: Date.now() 
        });
      }
    });
    
    // ヘルスステータスに基づく自動フェイルオーバー
    this.handleHealthResults();
  }
  
  // エンタープライズ監視機能
  setupMonitoring() {
    this.metrics = {
      totalConnections: 0,
      activeConnections: 0,
      messagesSent: 0,
      messagesReceived: 0,
      errors: 0,
      latencyHistory: [],
      uptimeStart: Date.now()
    };
    
    // 監視データの定期送信
    if (this.config.monitoring.endpoint) {
      setInterval(() => {
        this.sendMonitoringData();
      }, this.config.monitoring.interval || 60000);
    }
  }
  
  // セキュリティ強化
  setupSecurityFeatures() {
    return {
      authentication: this.setupAuthentication(),
      authorization: this.setupAuthorization(),
      rateLimiting: this.setupRateLimiting(),
      inputValidation: this.setupInputValidation(),
      auditLogging: this.setupAuditLogging()
    };
  }
  
  // 使用統計とレポート
  generateUsageReport() {
    const report = {
      timestamp: new Date().toISOString(),
      protocol: {
        http11: this.getProtocolUsage('http1.1'),
        http2: this.getProtocolUsage('http2'),
        http3: this.getProtocolUsage('http3')
      },
      performance: {
        averageLatency: this.calculateAverageLatency(),
        throughput: this.calculateThroughput(),
        reliability: this.calculateReliability()
      },
      errors: this.getErrorSummary(),
      recommendations: this.generateRecommendations()
    };
    
    return report;
  }
}