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

docs(slides): add slides v1

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-06-18 15:20:11 +03:30
parent f56095c312
commit 68f5c0b8aa
10 changed files with 1298 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/slides/assets/websocket-handshake.svg Normal file
View File

@@ -0,0 +1,40 @@
<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 handshake</title>
<desc id="desc">A compact HTTP Upgrade handshake diagram.</desc>
<defs>
<style>
@font-face {
font-family: "Vazirmatn";
src: url("../../../app/static/Vazirmatn[wght].woff2") format("woff2");
font-weight: 100 900;
}
text { font-family: "Vazirmatn", Arial, sans-serif; }
</style>
<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="#10b981"/></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="#7c3aed"/></marker>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#0f172a" flood-opacity=".12"/>
</filter>
</defs>
<rect width="960" height="540" fill="#262a3a"/>
<path d="M42 420 L236 318 L348 462 L96 548 Z" fill="#f4b740" opacity=".13"/>
<path d="M710 38 L934 90 L842 224 L660 162 Z" fill="#6d8cff" opacity=".16"/>
<text x="72" y="76" fill="#f8fafc" font-size="34" font-weight="800">HTTP Upgrade Handshake</text>
<text x="72" y="112" fill="#a8adbd" font-size="17">Starts with HTTP, continues with WebSocket Frames</text>
<g filter="url(#shadow)">
<rect x="82" y="190" width="220" height="154" rx="24" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
<rect x="658" y="190" width="220" height="154" rx="24" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
</g>
<text x="192" y="252" text-anchor="middle" fill="#f8fafc" font-size="24" font-weight="800">Browser</text>
<text x="192" y="286" text-anchor="middle" fill="#a8adbd" font-size="16">JavaScript WebSocket</text>
<text x="768" y="252" text-anchor="middle" fill="#f8fafc" font-size="24" font-weight="800">FastAPI Server</text>
<text x="768" y="286" text-anchor="middle" fill="#a8adbd" font-size="16">/ws/{room}/{user}</text>
<line x1="320" y1="206" x2="638" y2="206" stroke="#2563eb" stroke-width="4" marker-end="url(#arrow-blue)"/>
<text x="479" y="186" text-anchor="middle" fill="#f7c75f" font-size="16" font-weight="800">1. GET + Upgrade</text>
<line x1="638" y1="268" x2="320" y2="268" stroke="#10b981" stroke-width="4" marker-end="url(#arrow-green)"/>
<text x="479" y="250" text-anchor="middle" fill="#43d9a3" font-size="16" font-weight="800">2. 101 Switching Protocols</text>
<line x1="320" y1="332" x2="638" y2="332" stroke="#7c3aed" stroke-width="4" stroke-dasharray="10 9" marker-end="url(#arrow-purple)"/>
<line x1="638" y1="372" x2="320" y2="372" stroke="#7c3aed" stroke-width="4" stroke-dasharray="10 9" marker-end="url(#arrow-purple)"/>
<text x="480" y="414" text-anchor="middle" fill="#aebdff" font-size="16" font-weight="800">3. Full-duplex WebSocket Frames</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB