Files
internet-engineering-project/docs/images/websocket-osi.svg

28 lines
2.2 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540" role="img" aria-labelledby="title desc">
<title id="title">WebSocket in the OSI Model</title>
<desc id="desc">A simplified OSI layer diagram showing WebSocket as an application-layer protocol over TCP and IP.</desc>
<rect width="960" height="540" fill="#f7f9fc"/>
<text x="72" y="74" fill="#101828" font-family="Inter, Arial, sans-serif" font-size="34" font-weight="700">WebSocket in the OSI Model</text>
<text x="72" y="108" fill="#667085" font-family="Inter, Arial, sans-serif" font-size="16">WebSocket is used by applications, while TCP/IP carries bytes through the network.</text>
<g font-family="Inter, Arial, sans-serif" font-size="16">
<rect x="116" y="145" width="728" height="56" rx="12" fill="#2563eb"/>
<text x="148" y="181" fill="#ffffff" font-weight="700">Layer 7 - Application</text>
<text x="492" y="181" fill="#ffffff">HTTP upgrade, then WebSocket frames</text>
<rect x="116" y="211" width="728" height="48" rx="12" fill="#ffffff" stroke="#d0d5dd"/>
<text x="148" y="242" fill="#344054" font-weight="700">Layer 6 - Presentation</text>
<text x="492" y="242" fill="#667085">Text, JSON, UTF-8</text>
<rect x="116" y="269" width="728" height="48" rx="12" fill="#ffffff" stroke="#d0d5dd"/>
<text x="148" y="300" fill="#344054" font-weight="700">Layer 5 - Session</text>
<text x="492" y="300" fill="#667085">Long-lived logical conversation</text>
<rect x="116" y="327" width="728" height="48" rx="12" fill="#12b76a"/>
<text x="148" y="358" fill="#ffffff" font-weight="700">Layer 4 - Transport</text>
<text x="492" y="358" fill="#ffffff">TCP connection, reliable stream</text>
<rect x="116" y="385" width="728" height="48" rx="12" fill="#ffffff" stroke="#d0d5dd"/>
<text x="148" y="416" fill="#344054" font-weight="700">Layer 3 - Network</text>
<text x="492" y="416" fill="#667085">IP routing between hosts</text>
<rect x="116" y="443" width="728" height="48" rx="12" fill="#ffffff" stroke="#d0d5dd"/>
<text x="148" y="474" fill="#344054" font-weight="700">Layers 2-1 - Link / Physical</text>
<text x="492" y="474" fill="#667085">Ethernet, Wi-Fi, signals</text>
</g>
</svg>