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

49
docs/slides/assets/chatroom-architecture.svg Normal file
View File

@@ -0,0 +1,49 @@
<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">Chatroom architecture</title>
<desc id="desc">A compact architecture diagram for the chatroom project.</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" 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>
<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="M714 38 L932 104 L802 224 L642 132 Z" fill="#6d8cff" opacity=".14"/>
<path d="M36 414 L236 304 L342 478 L96 548 Z" fill="#f4b740" opacity=".14"/>
<text x="72" y="76" fill="#f8fafc" font-size="34" font-weight="800">Chatroom Architecture</text>
<text x="72" y="112" fill="#a8adbd" font-size="17">Browser Clients - FastAPI - Room Manager</text>
<g filter="url(#shadow)">
<rect x="82" y="178" width="190" height="82" rx="20" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
<rect x="82" y="302" width="190" height="82" rx="20" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
<rect x="368" y="178" width="224" height="206" rx="26" fill="#2563eb"/>
<rect x="690" y="162" width="196" height="94" rx="22" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
<rect x="690" y="308" width="196" height="94" rx="22" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
</g>
<text x="177" y="214" text-anchor="middle" fill="#f8fafc" font-size="19" font-weight="800">Client A</text>
<text x="177" y="240" text-anchor="middle" fill="#a8adbd" font-size="15">Browser tab</text>
<text x="177" y="338" text-anchor="middle" fill="#f8fafc" font-size="19" font-weight="800">Client B</text>
<text x="177" y="364" text-anchor="middle" fill="#a8adbd" font-size="15">Browser tab</text>
<text x="480" y="242" text-anchor="middle" fill="#fff" font-size="25" font-weight="800">FastAPI</text>
<text x="480" y="276" text-anchor="middle" fill="#dbeafe" font-size="16">WebSocket Endpoint</text>
<text x="480" y="306" text-anchor="middle" fill="#dbeafe" font-size="16">ConnectionManager</text>
<text x="480" y="338" text-anchor="middle" fill="#fff" font-size="15" font-weight="800">/ws/{room}/{user}</text>
<text x="788" y="202" text-anchor="middle" fill="#f8fafc" font-size="19" font-weight="800">Room: general</text>
<text x="788" y="230" text-anchor="middle" fill="#a8adbd" font-size="15">A - B - C</text>
<text x="788" y="348" text-anchor="middle" fill="#f8fafc" font-size="19" font-weight="800">Room: class</text>
<text x="788" y="376" text-anchor="middle" fill="#a8adbd" font-size="15">D - E</text>
<path d="M272 220 C320 220 330 230 368 230" fill="none" stroke="#2563eb" stroke-width="4" marker-end="url(#arrow)"/>
<path d="M272 344 C320 344 330 330 368 330" fill="none" stroke="#2563eb" stroke-width="4" marker-end="url(#arrow)"/>
<path d="M592 242 C642 220 650 208 690 208" fill="none" stroke="#10b981" stroke-width="4" marker-end="url(#arrow-green)"/>
<path d="M592 318 C642 340 650 356 690 356" fill="none" stroke="#10b981" stroke-width="4" marker-end="url(#arrow-green)"/>
<text x="320" y="178" fill="#f7c75f" font-size="14" font-weight="800">WebSocket Frames</text>
<text x="632" y="156" fill="#43d9a3" font-size="14" font-weight="800">Broadcast by room</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
docs/slides/assets/home.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

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

63
docs/slides/assets/websocket-history.svg Normal file
View File

@@ -0,0 +1,63 @@
<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 history</title>
<desc id="desc">A compact Persian timeline with English technical names.</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>
<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="M34 112 L238 34 L340 146 L156 238 Z" fill="#f4b740" opacity=".12"/>
<path d="M700 410 L930 318 L982 504 L746 548 Z" fill="#6d8cff" opacity=".16"/>
<text x="72" y="76" fill="#f8fafc" font-size="34" font-weight="800">WebSocket History</text>
<text x="72" y="112" fill="#a8adbd" font-size="17">From Classic HTTP to Real-time communication</text>
<line x1="128" y1="282" x2="832" y2="282" stroke="#4a5168" stroke-width="10" stroke-linecap="round"/>
<g filter="url(#shadow)">
<rect x="76" y="164" width="808" height="238" rx="26" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
</g>
<g text-anchor="middle">
<g>
<circle cx="150" cy="282" r="24" fill="#2563eb"/>
<text x="150" y="289" fill="#fff" font-size="16" font-weight="800">1</text>
<text x="150" y="338" fill="#f8fafc" font-size="18" font-weight="800">Classic HTTP</text>
<text x="150" y="365" fill="#a8adbd" font-size="15">Request / Response</text>
<text x="150" y="390" fill="#a8adbd" font-size="15">No Server Push</text>
</g>
<g>
<circle cx="330" cy="282" r="24" fill="#2563eb"/>
<text x="330" y="289" fill="#fff" font-size="16" font-weight="800">2</text>
<text x="330" y="338" fill="#f8fafc" font-size="18" font-weight="800">Polling</text>
<text x="330" y="365" fill="#a8adbd" font-size="15">Repeated request</text>
<text x="330" y="390" fill="#a8adbd" font-size="15">More overhead</text>
</g>
<g>
<circle cx="510" cy="282" r="24" fill="#2563eb"/>
<text x="510" y="289" fill="#fff" font-size="16" font-weight="800">3</text>
<text x="510" y="338" fill="#f8fafc" font-size="18" font-weight="800">Long Polling</text>
<text x="510" y="365" fill="#a8adbd" font-size="15">Open request</text>
<text x="510" y="390" fill="#a8adbd" font-size="15">Long wait</text>
</g>
<g>
<circle cx="690" cy="282" r="24" fill="#2563eb"/>
<text x="690" y="289" fill="#fff" font-size="16" font-weight="800">4</text>
<text x="690" y="338" fill="#f8fafc" font-size="18" font-weight="800">WebSocket</text>
<text x="690" y="365" fill="#a8adbd" font-size="15">Persistent connection</text>
<text x="690" y="390" fill="#a8adbd" font-size="15">Full-duplex</text>
</g>
<g>
<circle cx="830" cy="282" r="24" fill="#10b981"/>
<text x="830" y="289" fill="#fff" font-size="16" font-weight="800">5</text>
<text x="830" y="338" fill="#f8fafc" font-size="18" font-weight="800">Real-time Web</text>
<text x="830" y="365" fill="#a8adbd" font-size="15">Chat - Game</text>
<text x="830" y="390" fill="#a8adbd" font-size="15">Dashboard - IoT</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

43
docs/slides/assets/websocket-osi.svg Normal file
View File

@@ -0,0 +1,43 @@
<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 OSI model</title>
<desc id="desc">A compact OSI stack with English technical names and Persian supporting labels.</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>
<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"/>
<text x="72" y="76" fill="#f8fafc" font-size="34" font-weight="800">WebSocket in the OSI Model</text>
<text x="72" y="112" fill="#a8adbd" font-size="17">Application Layer over TCP/IP</text>
<g filter="url(#shadow)">
<rect x="106" y="142" width="748" height="350" rx="26" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
</g>
<g font-size="17">
<rect x="138" y="170" width="684" height="52" rx="14" fill="#2563eb"/>
<text x="162" y="203" fill="#fff" font-weight="800">Layer 7 - Application</text>
<text x="516" y="203" fill="#fff">WebSocket - JSON - Chat</text>
<rect x="138" y="232" width="684" height="44" rx="13" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
<text x="162" y="260" fill="#f8fafc" font-weight="800">Layer 6 - Presentation</text>
<text x="516" y="260" fill="#a8adbd">UTF-8 - Text</text>
<rect x="138" y="286" width="684" height="44" rx="13" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
<text x="162" y="314" fill="#f8fafc" font-weight="800">Layer 5 - Session</text>
<text x="516" y="314" fill="#a8adbd">Long-lived conversation</text>
<rect x="138" y="340" width="684" height="52" rx="14" fill="#10b981"/>
<text x="162" y="373" fill="#fff" font-weight="800">Layer 4 - Transport</text>
<text x="516" y="373" fill="#fff">TCP reliable stream</text>
<rect x="138" y="402" width="684" height="44" rx="13" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
<text x="162" y="430" fill="#f8fafc" font-weight="800">Layer 3 - Network</text>
<text x="516" y="430" fill="#a8adbd">IP routing</text>
<rect x="138" y="456" width="684" height="44" rx="13" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
<text x="162" y="484" fill="#f8fafc" font-weight="800">Layers 2-1 - Link / Physical</text>
<text x="516" y="484" fill="#a8adbd">Ethernet - Wi-Fi</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

44
docs/slides/assets/websocket-pros-cons.svg Normal file
View File

@@ -0,0 +1,44 @@
<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 pros and cons</title>
<desc id="desc">A compact pros and cons diagram for WebSocket.</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>
<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="M38 412 L244 320 L330 484 L96 548 Z" fill="#43d9a3" opacity=".12"/>
<path d="M720 34 L936 112 L828 236 L640 136 Z" fill="#fb7185" opacity=".12"/>
<text x="72" y="76" fill="#f8fafc" font-size="34" font-weight="800">WebSocket Trade-offs</text>
<text x="72" y="112" fill="#a8adbd" font-size="17">Strengths and limitations at a glance</text>
<g filter="url(#shadow)">
<rect x="92" y="154" width="350" height="286" rx="28" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
<rect x="518" y="154" width="350" height="286" rx="28" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
</g>
<text x="130" y="206" fill="#047857" font-size="25" font-weight="800">Pros</text>
<text x="158" y="256" fill="#f8fafc" font-size="17">Low latency</text>
<text x="158" y="304" fill="#f8fafc" font-size="17">Full-duplex</text>
<text x="158" y="352" fill="#f8fafc" font-size="17">Less HTTP overhead</text>
<text x="158" y="400" fill="#f8fafc" font-size="17">Good for Chat / Dashboard</text>
<circle cx="136" cy="250" r="7" fill="#10b981"/>
<circle cx="136" cy="298" r="7" fill="#10b981"/>
<circle cx="136" cy="346" r="7" fill="#10b981"/>
<circle cx="136" cy="394" r="7" fill="#10b981"/>
<text x="556" y="206" fill="#b42318" font-size="25" font-weight="800">Cons</text>
<text x="584" y="256" fill="#f8fafc" font-size="17">Server state</text>
<text x="584" y="304" fill="#f8fafc" font-size="17">Open socket memory</text>
<text x="584" y="352" fill="#f8fafc" font-size="17">Reconnect handling</text>
<text x="584" y="400" fill="#f8fafc" font-size="17">Scaling needs design</text>
<circle cx="562" cy="250" r="7" fill="#ef4444"/>
<circle cx="562" cy="298" r="7" fill="#ef4444"/>
<circle cx="562" cy="346" r="7" fill="#ef4444"/>
<circle cx="562" cy="394" r="7" fill="#ef4444"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB