GuilanCE/internet-engineering-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(presentation): add websocket project slides

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-06-16 14:30:30 +03:30
parent 932574b0c9
commit 5281f73e0a
6 changed files with 316 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
docs/images/websocket-handshake.svg Normal file
View File

@@ -0,0 +1,33 @@
<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 HTTP Upgrade Handshake</title>
<desc id="desc">A browser and server upgrade an HTTP connection to WebSocket and then exchange frames.</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">HTTP Upgrade to WebSocket</text>
<text x="72" y="108" fill="#667085" font-family="Inter, Arial, sans-serif" font-size="17">The connection starts as HTTP, then switches protocols after the handshake.</text>
<g font-family="Inter, Arial, sans-serif">
<rect x="86" y="202" width="210" height="126" rx="18" fill="#ffffff" stroke="#d0d5dd"/>
<text x="139" y="260" fill="#101828" font-size="22" font-weight="700">Browser</text>
<text x="126" y="290" fill="#667085" font-size="15">JavaScript WebSocket</text>
<rect x="664" y="202" width="210" height="126" rx="18" fill="#ffffff" stroke="#d0d5dd"/>
<text x="710" y="260" fill="#101828" font-size="22" font-weight="700">FastAPI Server</text>
<text x="712" y="290" fill="#667085" font-size="15">/ws/{room}/{user}</text>
<line x1="310" y1="214" x2="650" y2="214" stroke="#2563eb" stroke-width="4" marker-end="url(#arrow-blue)"/>
<text x="350" y="194" fill="#344054" font-size="15" font-weight="700">1. HTTP GET + Upgrade: websocket</text>
<line x1="650" y1="268" x2="310" y2="268" stroke="#12b76a" stroke-width="4" marker-end="url(#arrow-green)"/>
<text x="376" y="250" fill="#344054" font-size="15" font-weight="700">2. 101 Switching Protocols</text>
<line x1="310" y1="326" x2="650" y2="326" stroke="#7a5af8" stroke-width="4" stroke-dasharray="10 9" marker-end="url(#arrow-purple)"/>
<line x1="650" y1="362" x2="310" y2="362" stroke="#7a5af8" stroke-width="4" stroke-dasharray="10 9" marker-end="url(#arrow-purple)"/>
<text x="376" y="410" fill="#344054" font-size="15" font-weight="700">3. Full-duplex WebSocket frames over the same TCP connection</text>
</g>
<defs>
<marker id="arrow-blue" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
<path d="M2,2 L10,6 L2,10 Z" fill="#2563eb"/>
</marker>
<marker id="arrow-green" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
<path d="M2,2 L10,6 L2,10 Z" fill="#12b76a"/>
</marker>
<marker id="arrow-purple" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
<path d="M2,2 L10,6 L2,10 Z" fill="#7a5af8"/>
</marker>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB