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

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