学習進捗 0h / 60h (0%)
レッスン phase1-network-tech-http-basics
beginner 45分

WebSocketを理解するためのHTTP基礎

📋 前提知識

基本的なWeb知識HTTP通信の概念理解

🎯 このレッスンで学ぶこと
  • HTTP/1.0とHTTP/1.1の接続管理の違いを理解
  • Keep-Alive接続の仕組みとメリットを把握
  • WebSocketがHTTP/1.1を前提とする理由を学習

なぜHTTPを学ぶのか？

WebSocketとHTTPの関係

WebSocketはHTTPの上に構築されています。WebSocketの接続確立プロセスは、実際にはHTTPリクエストから始まります。

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade

この仕組みを理解するために、まずHTTPの進化を見ていきましょう。

HTTP/1.0の接続モデル

シンプルだが非効率な設計

HTTP/1.0では、1つのリクエスト・レスポンスごとに TCP接続を確立・切断していました。

図表を生成中...

HTTP/1.0の問題点

  1. 接続オーバーヘッド: 毎回のTCP 3-wayハンドシェイク
  2. サーバーリソース浪費: 頻繁な接続確立・切断
  3. レイテンシの増加: 接続時間が総通信時間に加算
  4. スケーラビリティの制約: 同時接続数の限界

HTTP/1.1の持続的接続

Keep-Alive接続の導入

HTTP/1.1では持続的接続（Keep-Alive）がデフォルトになりました。

図表を生成中...

HTTP/1.1の改善点

  1. 接続再利用: 複数のリクエスト・レスポンスで同じTCP接続を使用
  2. パフォーマンス向上: 接続確立コストを分散
  3. サーバー効率: 接続管理オーバーヘッドの削減
  4. パイプライニング: 複数リクエストの並列送信（理論上）

Connection: Upgradeヘッダーの仕組み

HTTP/1.1の重要な機能として、プロトコルアップグレード機構があります。

GET /chat HTTP/1.1
Host: example.com
Connection: Upgrade
Upgrade: websocket

これにより、既存のHTTP接続を他のプロトコルに切り替えることが可能になりました。

WebSocketとHTTPの関係

なぜWebSocketはHTTPを使うのか？

WebSocketがHTTPの上に構築される理由。

  1. 既存インフラの活用

    • HTTPプロキシとの互換性
    • ファイアウォールの透過性
    • 既存のポート（80/443）の利用

  2. 段階的移行

    • HTTPサーバーからの自然な拡張
    • 既存のHTTPSセキュリティ機構の活用

  3. 標準化のメリット

    • ブラウザの標準サポート
    • 開発者の学習コストの削減

WebSocketアップグレードプロセス

🌐 WebSocketアップグレードプロセス

HTTP GET /chat HTTPリクエスト
HTTP Upgrade: websocket アップグレード要求
HTTP 101 Switching Protocols プロトコル切り替え応答
WebSocket Frame-based communication WebSocketフレーム通信開始
現在のステップ: 0 / 4

実践デモ

体験してみよう

各プロトコルの接続パターンを実際に体験し、パフォーマンスの違いを比較してみましょう。

🌐 HTTP接続モデル比較デモ

HTTP/1.0、HTTP/1.1、WebSocketの接続モデルの違いを体験してみましょう。

プロトコルを選択:
プロトコル: HTTP/1.0
接続状態: 待機中
リクエスト数: 0

⚡ プロトコル比較

HTTP/1.0
平均: 150ms
接続: 50ms
オーバーヘッド: High
HTTP/1.1
平均: 80ms
接続: 50ms
オーバーヘッド: Medium
WebSocket
平均: 5ms
接続: 50ms
オーバーヘッド: Low

📜 通信ログ

ベンチマークを実行すると通信ログが表示されます
📚 学習ポイント
  • • HTTP/1.0では毎回TCP接続の確立・切断が必要（高オーバーヘッド）
  • • HTTP/1.1のKeep-Aliveで接続再利用が可能に（中オーバーヘッド）
  • • WebSocketは一度の接続でリアルタイム双方向通信（低オーバーヘッド）
  • • 接続確立コストとメッセージングコストの違いを理解しよう

デモで確認できること

デモを実行して以下を観察してください。

  1. HTTP/1.0: 毎回の接続確立・切断によるオーバーヘッド
  2. HTTP/1.1: Keep-Aliveによる接続再利用の効果
  3. WebSocket: 一度の接続確立後の高速メッセージング

実行手順

  1. HTTP/1.0テスト：「HTTP/1.0 Demo」ボタンをクリックして接続パターンを確認
  2. HTTP/1.1テスト：「HTTP/1.1 Demo」ボタンをクリックしてKeep-Alive効果を観察
  3. WebSocketテスト：「WebSocket Demo」ボタンをクリックして持続的接続を体験
  4. タイムライン比較：各プロトコルの接続確立時間を比較
  5. 効率性分析：リクエスト数とレスポンス時間の関係を確認

開発者ツールでの確認

ブラウザ開発者ツールを使った観察

実際のWebSocketアップグレードを観察してみましょう。

  1. Networkタブを開く
  2. WebSocketページに接続
  3. Request Headersを確認: 
    Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Key: ...
Sec-WebSocket-Version: 13
  4. Response Headersを確認: 
    HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: ...

Connection タイムラインの読み方

  • Queuing: リクエスト待機時間
  • DNS Lookup: DNS解決時間
  • Initial Connection: TCP接続確立時間
  • SSL: TLS/SSLハンドシェイク時間
  • Request sent: リクエスト送信時間
  • Waiting (TTFB): 最初のバイト受信待機時間

まとめと次のステップ

重要なポイント

  1. HTTP進化の理解

    • HTTP/1.0の1リクエスト・1接続モデル
    • HTTP/1.1のKeep-Alive導入による効率化

  2. WebSocketの設計思想

    • HTTPインフラの活用による実用性
    • アップグレード機構による段階的移行

  3. パフォーマンスへの影響

    • 接続確立コストの最小化
    • リアルタイム通信の効率性

学習の確認

  • HTTP/1.0とHTTP/1.1の接続管理の違いを説明できる
  • Keep-Alive接続のメリットを理解している
  • WebSocketがHTTPアップグレードを使う理由が分かる
  • ブラウザ開発者ツールでWebSocket接続を観察できる

関連リソース

🎉 レッスン完了

このレッスンの内容を理解できましたら、完了マークをつけて次のレッスンに進みましょう。

学習を継続しましょう

次のレッスン
phase1-network-tech-osi-model: OSI参照モデルとWebSocketの位置
次のレッスンに進む
または Phase 1 概要 に戻って他のレッスンを確認する
💡 学習のコツ
  • • 理解できない部分があれば、前のレッスンに戻って復習しましょう
  • • 実際に手を動かして、コードを書いて確認することが重要です
  • • インタラクティブデモは何度でも試してみてください
  • • 疑問点があれば、参考資料やドキュメントを確認しましょう

WebSocket 実践ガイド について

ブラウザ標準WebSocket APIを中心とした リアルタイムWebアプリケーション実践ガイドです。 TypeScript/JavaScript中級者を対象とした 50-60時間の構造化カリキュラムを提供します。

技術スタック

フロントエンド: SvelteKit + TypeScript
スタイリング: TailwindCSS
ドキュメント: MDsveX
ターゲット: PWA対応のリアルタイムアプリ

© WebSocket 実践ガイド. 学習目的で作成されました。

GitHub
Made with SvelteKit & TailwindCSS