64 lines
3.4 KiB
XML
64 lines
3.4 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 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>
|