学習進捗 0h / 60h (0%)
レッスン phase1-network-tech-osi-model
中級 1-1.5時間

OSI参照モデルとWebSocketの位置

📋 前提知識

HTTP基礎ネットワーク通信の基本概念TCP/WebSocket接続確立プロセス

🎯 このレッスンで学ぶこと

  • OSI 7層モデルでのデータ送受信プロセスの完全理解
  • 各層でのデータ形式(フレーム、パケット、セグメント)の把握
  • WebSocketがセッション層で動作することの技術的意味の理解
  • 実際のWebSocket通信における各層の役割と責任の明確化

学習内容

このレッスンで学ぶこと

OSI参照モデル(Open Systems Interconnection Reference Model)は、国際標準化機構(ISO)が策定したネットワーク通信の7層構造モデルです。WebSocket通信がこの標準的な枠組みでどのように動作するかを詳しく学習します。

  • OSI参照モデル7層でのWebSocket通信の位置づけ
  • 送信側と受信側でのデータ変換プロセス
  • 各層でのデータ呼び名(フレーム、パケット、セグメント)
  • WebSocketのセッション層動作の技術的意味
  • 実践的なデバッグでの層別アプローチ

OSI 7層モデルとデータフロー

送信側:アプリケーションからネットワークへ

送信時は上位層から下位層へデータが流れ、各層でヘッダーが追加されます。

📤 OSI参照モデル:送信側データフロー

アプリケーション(WebSocketメッセージ)
            ↓
┌─────────────────────────────────────────┐
│ Layer 7: アプリケーション層              │ ← WebSocketフレーム作成
│ WebSocketフレーム作成                   │
└─────────────────────────────────────────┘
            ↓
┌─────────────────────────────────────────┐
│ Layer 6: プレゼンテーション層            │ ← TLS暗号化 (wss://)
│ TLS暗号化 (wss://)                     │
└─────────────────────────────────────────┘
            ↓
┌─────────────────────────────────────────┐
│ Layer 5: セッション層                   │ ← WebSocket接続管理 ⭐
│ WebSocket接続管理                       │
└─────────────────────────────────────────┘
            ↓
┌─────────────────────────────────────────┐
│ Layer 4: トランスポート層               │ ← TCPセグメント作成
│ TCPセグメント作成                       │
└─────────────────────────────────────────┘
            ↓
┌─────────────────────────────────────────┐
│ Layer 3: ネットワーク層                 │ ← IPパケット作成
│ IPパケット作成                          │
└─────────────────────────────────────────┘
            ↓
┌─────────────────────────────────────────┐
│ Layer 2: データリンク層                 │ ← Ethernetフレーム作成
│ Ethernetフレーム作成                    │
└─────────────────────────────────────────┘
            ↓
┌─────────────────────────────────────────┐
│ Layer 1: 物理層                         │ ← 電気信号として送信
│ 電気信号として送信                      │
└─────────────────────────────────────────┘
            ↓
        ネットワーク送信

⭐ WebSocketはOSI参照モデルのセッション層(Layer 5)で動作

送信側データ変換の詳細

各層でのデータ変換

  • Layer 7: WebSocketメッセージ → WebSocketフレーム
  • Layer 6: 暗号化処理(wss://の場合)
  • Layer 5: セッション管理情報の付加
  • Layer 4: TCPヘッダー追加 → TCPセグメント
  • Layer 3: IPヘッダー追加 → IPパケット
  • Layer 2: Ethernetヘッダー追加 → Ethernetフレーム
  • Layer 1: 物理的な信号に変換

受信側:ネットワークからアプリケーションへ

受信時は下位層から上位層へデータが流れ、各層でヘッダーが除去されます。

📥 OSI参照モデル:受信側データフロー

      ネットワーク受信
            ↓
┌─────────────────────────────────────────┐
│ Layer 1: 物理層                         │ ← 電気信号受信
│ 電気信号受信                            │
└─────────────────────────────────────────┘
            ↓
┌─────────────────────────────────────────┐
│ Layer 2: データリンク層                 │ ← Ethernetフレーム解析
│ Ethernetフレーム解析                    │
└─────────────────────────────────────────┘
            ↓
┌─────────────────────────────────────────┐
│ Layer 3: ネットワーク層                 │ ← IPパケット処理
│ IPパケット処理                          │
└─────────────────────────────────────────┘
            ↓
┌─────────────────────────────────────────┐
│ Layer 4: トランスポート層               │ ← TCPセグメント処理
│ TCPセグメント処理                       │
└─────────────────────────────────────────┘
            ↓
┌─────────────────────────────────────────┐
│ Layer 5: セッション層                   │ ← WebSocket接続維持 ⭐
│ WebSocket接続維持                       │
└─────────────────────────────────────────┘
            ↓
┌─────────────────────────────────────────┐
│ Layer 6: プレゼンテーション層            │ ← TLS復号化 (wss://)
│ TLS復号化 (wss://)                     │
└─────────────────────────────────────────┘
            ↓
┌─────────────────────────────────────────┐
│ Layer 7: アプリケーション層              │ ← WebSocketフレーム処理
│ WebSocketフレーム処理                   │
└─────────────────────────────────────────┘
            ↓
アプリケーション(メッセージ受信)

⭐ OSI参照モデルでのWebSocket処理:セッション層が中核

受信側データ復元の詳細

各層でのデータ復元

  • Layer 1: 物理信号受信
  • Layer 2: Ethernetフレーム → IPパケット抽出
  • Layer 3: IPパケット → TCPセグメント抽出
  • Layer 4: TCPセグメント → アプリケーションデータ抽出
  • Layer 5: WebSocket接続状態確認
  • Layer 6: TLS復号化(wss://の場合)
  • Layer 7: WebSocketフレーム → メッセージ抽出

WebSocketのセッション層動作

Layer 5(セッション層)での重要な機能

WebSocketがセッション層で動作することには深い技術的意味があります。

セッション層の核心機能

1. 持続的接続の管理

// WebSocketセッション管理の実装例
class WebSocketSession {
  constructor(url) {
    this.state = 'CONNECTING';
    this.socket = new WebSocket(url);
    
    // セッション層での状態管理
    this.socket.onopen = () => {
      this.state = 'OPEN';
      this.startHeartbeat(); // セッション維持機能
    };
    
    this.socket.onclose = () => {
      this.state = 'CLOSED';
      this.stopHeartbeat();
    };
  }
  
  // セッション層独自の機能
  startHeartbeat() {
    this.heartbeatInterval = setInterval(() => {
      if (this.state === 'OPEN') {
        this.socket.send(JSON.stringify({ type: 'ping' }));
      }
    }, 30000);
  }
}

2. 半二重・全二重通信の制御

// セッション層での通信制御
class WebSocketCommunicationControl {
  constructor(socket) {
    this.socket = socket;
    this.sendQueue = [];
    this.isReceiving = false;
    this.isSending = false;
  }
  
  // 全二重通信の実装
  async sendMessage(message) {
    this.isSending = true;
    try {
      this.socket.send(JSON.stringify(message));
      // 同時に受信も可能(全二重)
    } finally {
      this.isSending = false;
    }
  }
  
  handleReceive(event) {
    this.isReceiving = true;
    const message = JSON.parse(event.data);
    // 送信中でも受信処理が可能(全二重)
    this.processMessage(message);
    this.isReceiving = false;
  }
}

3. セッション同期とエラー回復

// セッション層でのエラー回復
class WebSocketSessionRecovery {
  constructor(url) {
    this.url = url;
    this.lastMessageId = 0;
    this.unacknowledgedMessages = new Map();
    this.connect();
  }
  
  // セッション層での自動再接続
  async reconnect() {
    console.log('Session layer: Attempting reconnection');
    
    // セッション状態の保存
    const sessionState = {
      lastMessageId: this.lastMessageId,
      pendingMessages: Array.from(this.unacknowledgedMessages.values())
    };
    
    this.connect();
    
    // セッション状態の復元
    await this.restoreSession(sessionState);
  }
}

他の層との連携パターン

Layer 4(トランスポート層)との関係

TCP接続の上位にWebSocketセッション

// TCP (Layer 4) の基盤の上でWebSocket (Layer 5) が動作
const tcpConnection = {
  // Layer 4: TCP機能
  sequenceNumber: 1000,
  acknowledgmentNumber: 2000,
  windowSize: 8192,
  
  // TCPは信頼性のあるバイトストリームを提供
  send: (data) => { /* TCP segmentation & transmission */ },
  receive: () => { /* TCP reassembly & ordering */ }
};

const websocketSession = {
  // Layer 5: WebSocketセッション機能
  connectionState: 'OPEN',
  
  // TCPストリームの上でWebSocketフレーミング
  sendFrame: (message) => {
    const frame = this.createWebSocketFrame(message);
    tcpConnection.send(frame); // TCP層に委譲
  },
  
  receiveFrame: () => {
    const rawData = tcpConnection.receive(); // TCP層から受信
    return this.parseWebSocketFrame(rawData);
  }
};

Layer 6(プレゼンテーション層)との関係

TLS暗号化の位置づけ

// wss:// での層間連携
const websocketWithTLS = {
  // Layer 6: TLS暗号化
  tlsSession: {
    encrypt: (data) => { /* TLS encryption */ },
    decrypt: (data) => { /* TLS decryption */ }
  },
  
  // Layer 5: WebSocketセッション
  websocketSession: {
    sendMessage: (message) => {
      const frame = this.createFrame(message);
      const encryptedFrame = this.tlsSession.encrypt(frame);
      this.tcpConnection.send(encryptedFrame);
    }
  }
};

各層でのデータの呼び名と構造

OSI参照モデルのLayer別データ単位

OSI参照モデルでは、各層で扱うデータに固有の名前が付けられています。WebSocket通信を理解するには、この標準化された用語体系の理解が重要です。

OSI参照モデルでのデータ変換プロセス

OSI参照モデルは、ネットワーク通信を7つの階層に分けて標準化したモデルです。各層には固有の役割と、扱うデータ単位が定義されています。WebSocketはこのモデルに準拠して動作するため、各層でのデータ形式を理解することが重要です。

Layerデータ単位主要ヘッダーWebSocketでの役割
Layer 7データ / メッセージWebSocketフレームヘッダーアプリケーションメッセージの処理
Layer 6暗号化データTLS Record Headerwss://での暗号化・復号化
Layer 5セッションデータセッション制御情報WebSocketの主要動作層
Layer 4セグメントTCPヘッダー (20bytes)信頼性のあるデータ転送
Layer 3パケットIPヘッダー (20bytes)ルーティングとアドレス解決
Layer 2フレームEthernetヘッダー (14bytes)物理的ネットワーク上の転送
Layer 1ビット / 信号なし物理的信号として伝送

WebSocketフレームの構造(Layer 7)

WebSocketフレーム構造:
 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
|N|V|V|V|       |S|             |   (if payload len==126/127)   |
| |1|2|3|       |K|             |                               |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
|     Extended payload length continued, if payload len == 127  |
+ - - - - - - - - - - - - - - - +-------------------------------+
|                               |Masking-key, if MASK set to 1  |
+-------------------------------+-------------------------------+
| Masking-key (continued)       |          Payload Data         |
+-------------------------------- - - - - - - - - - - - - - - - +
:                     Payload Data continued ...                :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
|                     Payload Data continued ...                |
+---------------------------------------------------------------+

実際のパケットキャプチャ例

Wiresharkでの実際のWebSocket通信

Layer 2: Ethernetフレーム

Ethernet II, Src: 00:11:22:33:44:55, Dst: aa:bb:cc:dd:ee:ff
    Destination: aa:bb:cc:dd:ee:ff
    Source: 00:11:22:33:44:55
    Type: IPv4 (0x0800)

Layer 3: IPパケット

Internet Protocol Version 4
    Version: 4
    Header Length: 20 bytes
    Total Length: 96
    Protocol: TCP (6)
    Source: 192.168.1.100
    Destination: 203.0.113.10

Layer 4: TCPセグメント

Transmission Control Protocol
    Source Port: 52341
    Destination Port: 443 (https)
    Sequence Number: 1
    Acknowledgment Number: 1
    Flags: PSH, ACK
    [This is a segment of a reassembled PDU]

Layer 5-7: WebSocketデータ

WebSocket
    1... .... = Fin: True
    .000 .... = Reserved: 0x0
    .... 0001 = Opcode: Text (1)
    1... .... = Mask: True
    .011 1110 = Payload length: 62
    Masking-Key: 0x12345678
    Payload: {"type":"message","content":"Hello WebSocket!"}

実践的なWebSocket開発での活用

層別デバッグアプローチ

問題発生時の体系的調査方法

1. Layer 7(アプリケーション層)の問題

// WebSocketフレーム解析
const debugWebSocketFrame = (event) => {
  console.log('Layer 7 Debug:');
  console.log('- Frame type:', event.type);
  console.log('- Payload size:', event.data.length);
  console.log('- Content:', event.data);
  
  // フレーム構造の検証
  if (typeof event.data === 'string') {
    try {
      const parsed = JSON.parse(event.data);
      console.log('- Valid JSON:', parsed);
    } catch (e) {
      console.log('- Invalid JSON format');
    }
  }
};

2. Layer 5(セッション層)の問題

// WebSocketセッション状態監視
const debugWebSocketSession = (ws) => {
  console.log('Layer 5 Debug:');
  console.log('- Ready State:', ws.readyState);
  console.log('- URL:', ws.url);
  console.log('- Protocol:', ws.protocol);
  console.log('- Extensions:', ws.extensions);
  
  // 接続状態の詳細分析
  const states = {
    0: 'CONNECTING',
    1: 'OPEN', 
    2: 'CLOSING',
    3: 'CLOSED'
  };
  console.log('- State Name:', states[ws.readyState]);
};

3. Layer 4(トランスポート層)の問題

// TCP接続問題の調査(ブラウザ開発者ツール使用)
const analyzeNetworkLayer = () => {
  console.log('Layer 4 Debug (Check in Network tab):');
  console.log('- TCP connection establishment time');
  console.log('- TCP congestion window size');
  console.log('- Retransmission count');
  console.log('- Connection timeout values');
};

4. 総合的な診断ツール

class WebSocketLayerDiagnostics {
  constructor(url) {
    this.url = url;
    this.diagnostics = {
      layer7: { errors: [], warnings: [] },
      layer5: { errors: [], warnings: [] },
      layer4: { errors: [], warnings: [] }
    };
  }
  
  diagnose() {
    const ws = new WebSocket(this.url);
    
    // Layer 5 診断
    ws.onopen = () => {
      this.diagnostics.layer5.warnings.push('Connection established');
      this.performLayer7Tests(ws);
    };
    
    ws.onerror = (error) => {
      this.diagnostics.layer5.errors.push(`Connection error: ${error}`);
      this.analyzeConnectionFailure();
    };
    
    ws.onclose = (event) => {
      this.diagnostics.layer5.warnings.push(
        `Connection closed: Code ${event.code}, Reason: ${event.reason}`
      );
    };
    
    return this.diagnostics;
  }
  
  performLayer7Tests(ws) {
    // JSON形式テスト
    try {
      ws.send('{"test": "json"}');
      this.diagnostics.layer7.warnings.push('JSON format test passed');
    } catch (e) {
      this.diagnostics.layer7.errors.push('JSON format test failed');
    }
    
    // バイナリデータテスト
    try {
      ws.send(new ArrayBuffer(8));
      this.diagnostics.layer7.warnings.push('Binary data test passed');
    } catch (e) {
      this.diagnostics.layer7.errors.push('Binary data test failed');
    }
  }
}

性能最適化における層の理解

各層での最適化戦略

Layer 5(セッション層)最適化

// 効率的なセッション管理
class OptimizedWebSocketSession {
  constructor(url) {
    this.url = url;
    this.messageQueue = [];
    this.batchSize = 10;
    this.batchTimeout = 100; // ms
    
    this.connect();
    this.startBatchProcessor();
  }
  
  // メッセージのバッチング(セッション層最適化)
  sendMessage(message) {
    this.messageQueue.push(message);
    
    if (this.messageQueue.length >= this.batchSize) {
      this.processBatch();
    }
  }
  
  processBatch() {
    if (this.messageQueue.length === 0) return;
    
    const batch = {
      type: 'batch',
      messages: this.messageQueue.splice(0, this.batchSize),
      timestamp: Date.now()
    };
    
    this.ws.send(JSON.stringify(batch));
  }
  
  startBatchProcessor() {
    setInterval(() => {
      if (this.messageQueue.length > 0) {
        this.processBatch();
      }
    }, this.batchTimeout);
  }
}

Layer 4(トランスポート層)配慮

// TCP特性を考慮した実装
class TCPAwareWebSocket {
  constructor(url) {
    this.url = url;
    this.socket = new WebSocket(url);
    this.setupTCPOptimizations();
  }
  
  setupTCPOptimizations() {
    // TCP Nagle Algorithm対策
    this.sendBuffer = [];
    this.flushInterval = setInterval(() => {
      this.flushBuffer();
    }, 10); // 10ms毎にフラッシュ
  }
  
  send(data) {
    // 小さなメッセージをバッファリング
    if (data.length < 1460) { // TCP MSS以下
      this.sendBuffer.push(data);
    } else {
      this.flushBuffer();
      this.socket.send(data);
    }
  }
  
  flushBuffer() {
    if (this.sendBuffer.length > 0) {
      const combinedData = this.sendBuffer.join('');
      this.socket.send(combinedData);
      this.sendBuffer = [];
    }
  }
}

学習成果の確認

習得した知識の総括

🔬 技術的深層理解

  • ✓ OSI 7層でのデータ変換プロセス
  • ✓ 各層でのデータ呼び名(フレーム、パケット、セグメント)
  • ✓ WebSocketセッション層動作の技術的意味
  • ✓ 送信側・受信側での層間連携メカニズム
  • ✓ TLS暗号化レイヤーとの統合パターン

🛠️ 実践的応用能力

  • ✓ 層別デバッグアプローチの実践
  • ✓ パフォーマンス問題の体系的分析
  • ✓ 各層での最適化戦略の選択
  • ✓ ネットワーク問題の根本原因特定
  • ✓ 統合的なWebSocketアーキテクチャ設計

次のレッスンへの準備

このOSI層モデルの理解は、次の「HTTP/1.1からHTTP/3までのWebSocket対応」レッスンで以下の発展的トピックの基礎となります。

  • HTTP/2での多重化:Layer 5での複数セッション管理
  • HTTP/3のQUIC:Layer 4でのUDP活用とWebSocket影響
  • バージョン間互換性:各層での後方互換性確保戦略

🎉 レッスン完了

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

学習を継続しましょう

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

WebSocket 実践ガイド について

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

技術スタック

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

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

GitHub
Made with SvelteKit & TailwindCSS