docs(slides): improve slides images and theme
This commit is contained in:
47
docs/slides/assets/app-demo.svg
Normal file
47
docs/slides/assets/app-demo.svg
Normal file
@@ -0,0 +1,47 @@
|
||||
<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 app mockup</title>
|
||||
<desc id="desc">English mockup of the WebSocket chatroom user interface.</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=".16"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect width="960" height="540" fill="#262a3a"/>
|
||||
<path d="M42 430 L260 322 L358 488 L96 548 Z" fill="#f4b740" opacity=".13"/>
|
||||
<path d="M720 34 L930 96 L820 228 L640 140 Z" fill="#6d8cff" opacity=".14"/>
|
||||
<g id="diagram-content-shift" transform="translate(0,-28)">
|
||||
<g filter="url(#shadow)">
|
||||
<rect x="88" y="74" width="784" height="392" rx="28" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
||||
</g>
|
||||
<text x="132" y="122" fill="#f8fafc" font-size="28" font-weight="800">Simple WebSocket Chatroom</text>
|
||||
<rect x="710" y="98" width="96" height="34" rx="17" fill="#43d9a3" opacity=".22" stroke="#43d9a3"/>
|
||||
<text x="758" y="121" text-anchor="middle" fill="#9ff4d5" font-size="14" font-weight="800">Connected</text>
|
||||
<rect x="132" y="164" width="496" height="232" rx="18" fill="#ffffff" opacity=".07" stroke="#ffffff"/>
|
||||
<text x="162" y="204" fill="#f8fafc" font-size="20" font-weight="800">Room: internet-engineering</text>
|
||||
<text x="162" y="232" fill="#a8adbd" font-size="15">You are chatting as Ali.</text>
|
||||
<rect x="230" y="266" width="244" height="48" rx="14" fill="#ffffff" opacity=".10" stroke="#ffffff"/>
|
||||
<text x="352" y="296" text-anchor="middle" fill="#f8fafc" font-size="15">Hello from WebSocket!</text>
|
||||
<rect x="362" y="332" width="210" height="48" rx="14" fill="#6d8cff" opacity=".32" stroke="#6d8cff"/>
|
||||
<text x="467" y="362" text-anchor="middle" fill="#f8fafc" font-size="15">Instant delivery</text>
|
||||
<rect x="132" y="412" width="496" height="34" rx="12" fill="#ffffff" opacity=".09" stroke="#ffffff"/>
|
||||
<text x="162" y="434" fill="#a8adbd" font-size="14">Type a message...</text>
|
||||
<rect x="548" y="412" width="80" height="34" rx="12" fill="#f4b740"/>
|
||||
<text x="588" y="434" text-anchor="middle" fill="#1f2937" font-size="14" font-weight="800">Send</text>
|
||||
<rect x="660" y="164" width="166" height="282" rx="18" fill="#ffffff" opacity=".07" stroke="#ffffff"/>
|
||||
<text x="743" y="204" text-anchor="middle" fill="#f8fafc" font-size="20" font-weight="800">Online Users</text>
|
||||
<text x="704" y="252" fill="#a8adbd" font-size="16">Ali</text>
|
||||
<text x="704" y="292" fill="#a8adbd" font-size="16">Sara</text>
|
||||
<text x="704" y="332" fill="#a8adbd" font-size="16">Reza</text>
|
||||
<circle cx="684" cy="246" r="6" fill="#43d9a3"/>
|
||||
<circle cx="684" cy="286" r="6" fill="#43d9a3"/>
|
||||
<circle cx="684" cy="326" r="6" fill="#43d9a3"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
@@ -1,6 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540" role="img" aria-labelledby="title desc">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="500" viewBox="0 0 1200 500" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Chatroom architecture</title>
|
||||
<desc id="desc">A compact architecture diagram for the chatroom project.</desc>
|
||||
<desc id="desc">A compact architecture diagram for the FastAPI WebSocket chatroom project.</desc>
|
||||
<defs>
|
||||
<style>
|
||||
@font-face {
|
||||
@@ -9,41 +9,46 @@
|
||||
font-weight: 100 900;
|
||||
}
|
||||
text { font-family: "Vazirmatn", Arial, sans-serif; }
|
||||
.title { fill: #f8fafc; font-size: 38px; font-weight: 850; }
|
||||
.sub { fill: #a8adbd; font-size: 18px; font-weight: 500; }
|
||||
.node-title { fill: #f8fafc; font-size: 22px; font-weight: 850; }
|
||||
.node-sub { fill: #a8adbd; font-size: 16px; }
|
||||
.label { font-size: 16px; font-weight: 850; }
|
||||
</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"/>
|
||||
<feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#0f172a" flood-opacity=".16"/>
|
||||
</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>
|
||||
<rect width="1200" height="500" fill="#262a3a"/>
|
||||
<path d="M42 396 L258 286 L374 438 L92 532 Z" fill="#f4b740" opacity=".13"/>
|
||||
<path d="M880 42 L1146 112 L1030 262 L812 182 Z" fill="#6d8cff" opacity=".16"/>
|
||||
<g id="diagram-content-shift" transform="translate(0,-28)">
|
||||
<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"/>
|
||||
<rect x="106" y="174" width="236" height="88" rx="22" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
||||
<rect x="106" y="306" width="236" height="88" rx="22" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
||||
<rect x="476" y="164" width="248" height="230" rx="28" fill="#2563eb"/>
|
||||
<rect x="858" y="164" width="236" height="96" rx="24" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
||||
<rect x="858" y="316" width="236" height="96" rx="24" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
||||
</g>
|
||||
<text x="224" y="212" text-anchor="middle" class="node-title">Client A</text>
|
||||
<text x="224" y="240" text-anchor="middle" class="node-sub">Browser tab</text>
|
||||
<text x="224" y="344" text-anchor="middle" class="node-title">Client B</text>
|
||||
<text x="224" y="372" text-anchor="middle" class="node-sub">Browser tab</text>
|
||||
<text x="600" y="232" text-anchor="middle" fill="#ffffff" font-size="30" font-weight="850">Server</text>
|
||||
<text x="600" y="272" text-anchor="middle" fill="#dbeafe" font-size="17">WebSocket Endpoint</text>
|
||||
<text x="600" y="306" text-anchor="middle" fill="#dbeafe" font-size="17">ConnectionManager</text>
|
||||
<text x="600" y="342" text-anchor="middle" fill="#ffffff" font-size="17" font-weight="850">/ws/{room}/{user}</text>
|
||||
<text x="976" y="204" text-anchor="middle" class="node-title">Room: general</text>
|
||||
<text x="976" y="234" text-anchor="middle" class="node-sub">A - B - C</text>
|
||||
<text x="976" y="356" text-anchor="middle" class="node-title">Room: class</text>
|
||||
<text x="976" y="386" text-anchor="middle" class="node-sub">D - E</text>
|
||||
<path d="M342 218 C408 218 428 232 476 232" fill="none" stroke="#2563eb" stroke-width="5" marker-end="url(#arrow)"/>
|
||||
<path d="M342 350 C408 350 428 326 476 326" fill="none" stroke="#2563eb" stroke-width="5" marker-end="url(#arrow)"/>
|
||||
<path d="M724 238 C790 210 812 212 858 212" fill="none" stroke="#10b981" stroke-width="5" marker-end="url(#arrow-green)"/>
|
||||
<path d="M724 320 C790 354 812 364 858 364" fill="none" stroke="#10b981" stroke-width="5" marker-end="url(#arrow-green)"/>
|
||||
<text x="376" y="188" fill="#f7c75f" class="label">WebSocket Frames</text>
|
||||
<text x="778" y="164" fill="#43d9a3" class="label">Broadcast by room</text>
|
||||
</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>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
43
docs/slides/assets/http-mechanism.svg
Normal file
43
docs/slides/assets/http-mechanism.svg
Normal file
@@ -0,0 +1,43 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="500" viewBox="0 0 1200 500" role="img" aria-labelledby="title desc">
|
||||
<title id="title">HTTP mechanism</title>
|
||||
<desc id="desc">A short HTTP request response exchange.</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; }
|
||||
.title { fill: #f8fafc; font-size: 38px; font-weight: 850; }
|
||||
.sub { fill: #a8adbd; font-size: 18px; font-weight: 500; }
|
||||
.node-title { fill: #f8fafc; font-size: 25px; font-weight: 850; }
|
||||
.node-sub { fill: #a8adbd; font-size: 16px; }
|
||||
.label { font-size: 18px; font-weight: 850; }
|
||||
</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>
|
||||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#0f172a" flood-opacity=".16"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect width="1200" height="500" fill="#262a3a"/>
|
||||
<path d="M42 396 L258 286 L374 438 L92 532 Z" fill="#f4b740" opacity=".13"/>
|
||||
<path d="M880 42 L1146 112 L1030 262 L812 182 Z" fill="#6d8cff" opacity=".16"/>
|
||||
<g id="diagram-content-shift" transform="translate(0,-28)">
|
||||
<g filter="url(#shadow)">
|
||||
<rect x="92" y="166" width="250" height="132" rx="26" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
||||
<rect x="858" y="166" width="250" height="132" rx="26" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
||||
</g>
|
||||
<text x="217" y="220" text-anchor="middle" class="node-title">Browser</text>
|
||||
<text x="217" y="254" text-anchor="middle" class="node-sub">HTTP Client</text>
|
||||
<text x="983" y="220" text-anchor="middle" class="node-title">Server</text>
|
||||
<text x="983" y="254" text-anchor="middle" class="node-sub">HTTP Endpoint</text>
|
||||
<line x1="372" y1="188" x2="828" y2="188" stroke="#2563eb" stroke-width="5" marker-end="url(#arrow-blue)"/>
|
||||
<text x="600" y="166" text-anchor="middle" fill="#f7c75f" class="label">1. GET /resource</text>
|
||||
<line x1="828" y1="252" x2="372" y2="252" stroke="#10b981" stroke-width="5" marker-end="url(#arrow-green)"/>
|
||||
<text x="600" y="236" text-anchor="middle" fill="#43d9a3" class="label">2. 200 OK Response</text>
|
||||
<line x1="372" y1="304" x2="828" y2="304" stroke="#fb7185" stroke-width="4" stroke-dasharray="12 10"/>
|
||||
<text x="600" y="334" text-anchor="middle" fill="#fb7185" class="label">3. Connection closes</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
46
docs/slides/assets/long-polling-mechanism.svg
Normal file
46
docs/slides/assets/long-polling-mechanism.svg
Normal file
@@ -0,0 +1,46 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="500" viewBox="0 0 1200 500" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Long Polling mechanism</title>
|
||||
<desc id="desc">An HTTP request held by the server until data is ready.</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; }
|
||||
.title { fill: #f8fafc; font-size: 38px; font-weight: 850; }
|
||||
.sub { fill: #a8adbd; font-size: 18px; font-weight: 500; }
|
||||
.node-title { fill: #f8fafc; font-size: 25px; font-weight: 850; }
|
||||
.node-sub { fill: #a8adbd; font-size: 16px; }
|
||||
.label { font-size: 18px; font-weight: 850; }
|
||||
</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=".16"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect width="1200" height="500" fill="#262a3a"/>
|
||||
<path d="M42 396 L258 286 L374 438 L92 532 Z" fill="#f4b740" opacity=".13"/>
|
||||
<path d="M880 42 L1146 112 L1030 262 L812 182 Z" fill="#6d8cff" opacity=".16"/>
|
||||
<g id="diagram-content-shift" transform="translate(0,-28)">
|
||||
<g filter="url(#shadow)">
|
||||
<rect x="92" y="166" width="250" height="132" rx="26" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
||||
<rect x="858" y="166" width="250" height="132" rx="26" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
||||
</g>
|
||||
<text x="217" y="220" text-anchor="middle" class="node-title">Browser</text>
|
||||
<text x="217" y="254" text-anchor="middle" class="node-sub">Waiting request</text>
|
||||
<text x="983" y="220" text-anchor="middle" class="node-title">Server</text>
|
||||
<text x="983" y="254" text-anchor="middle" class="node-sub">Holds response</text>
|
||||
<line x1="372" y1="174" x2="828" y2="174" stroke="#2563eb" stroke-width="5" marker-end="url(#arrow-blue)"/>
|
||||
<text x="600" y="152" text-anchor="middle" fill="#f7c75f" class="label">1. HTTP Request</text>
|
||||
<line x1="468" y1="230" x2="732" y2="230" stroke="#f4b740" stroke-width="8" stroke-linecap="round" stroke-dasharray="14 12"/>
|
||||
<text x="600" y="216" text-anchor="middle" fill="#f7c75f" class="label">2. Hold Open</text>
|
||||
<line x1="828" y1="292" x2="372" y2="292" stroke="#10b981" stroke-width="5" marker-end="url(#arrow-green)"/>
|
||||
<text x="600" y="278" text-anchor="middle" fill="#43d9a3" class="label">3. Message Response</text>
|
||||
<line x1="372" y1="332" x2="828" y2="332" stroke="#7c3aed" stroke-width="4" stroke-dasharray="10 9" marker-end="url(#arrow-purple)"/>
|
||||
<text x="600" y="362" text-anchor="middle" fill="#aebdff" class="label">4. New Request</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
49
docs/slides/assets/polling-mechanism.svg
Normal file
49
docs/slides/assets/polling-mechanism.svg
Normal file
@@ -0,0 +1,49 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="500" viewBox="0 0 1200 500" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Polling mechanism</title>
|
||||
<desc id="desc">Repeated HTTP requests on a timer.</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; }
|
||||
.title { fill: #f8fafc; font-size: 38px; font-weight: 850; }
|
||||
.sub { fill: #a8adbd; font-size: 18px; font-weight: 500; }
|
||||
.node-title { fill: #f8fafc; font-size: 25px; font-weight: 850; }
|
||||
.node-sub { fill: #a8adbd; font-size: 16px; }
|
||||
.label { font-size: 17px; font-weight: 850; }
|
||||
</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>
|
||||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#0f172a" flood-opacity=".16"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect width="1200" height="500" fill="#262a3a"/>
|
||||
<path d="M42 396 L258 286 L374 438 L92 532 Z" fill="#f4b740" opacity=".13"/>
|
||||
<path d="M880 42 L1146 112 L1030 262 L812 182 Z" fill="#6d8cff" opacity=".16"/>
|
||||
<g id="diagram-content-shift" transform="translate(0,-28)">
|
||||
<g filter="url(#shadow)">
|
||||
<rect x="92" y="166" width="250" height="132" rx="26" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
||||
<rect x="858" y="166" width="250" height="132" rx="26" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
||||
</g>
|
||||
<text x="217" y="220" text-anchor="middle" class="node-title">Browser</text>
|
||||
<text x="217" y="254" text-anchor="middle" class="node-sub">Timer based checks</text>
|
||||
<text x="983" y="220" text-anchor="middle" class="node-title">Server</text>
|
||||
<text x="983" y="254" text-anchor="middle" class="node-sub">HTTP Endpoint</text>
|
||||
<line x1="372" y1="146" x2="828" y2="146" stroke="#2563eb" stroke-width="5" marker-end="url(#arrow-blue)"/>
|
||||
<text x="600" y="132" text-anchor="middle" fill="#f7c75f" class="label">Request 1</text>
|
||||
<line x1="828" y1="182" x2="372" y2="182" stroke="#10b981" stroke-width="5" marker-end="url(#arrow-green)"/>
|
||||
<text x="600" y="176" text-anchor="middle" fill="#43d9a3" class="label">Empty Response</text>
|
||||
<line x1="372" y1="224" x2="828" y2="224" stroke="#2563eb" stroke-width="5" marker-end="url(#arrow-blue)"/>
|
||||
<text x="600" y="218" text-anchor="middle" fill="#f7c75f" class="label">Request 2</text>
|
||||
<line x1="828" y1="260" x2="372" y2="260" stroke="#10b981" stroke-width="5" marker-end="url(#arrow-green)"/>
|
||||
<text x="600" y="254" text-anchor="middle" fill="#43d9a3" class="label">Empty Response</text>
|
||||
<line x1="372" y1="302" x2="828" y2="302" stroke="#2563eb" stroke-width="5" marker-end="url(#arrow-blue)"/>
|
||||
<text x="600" y="296" text-anchor="middle" fill="#f7c75f" class="label">Request 3</text>
|
||||
<line x1="828" y1="338" x2="372" y2="338" stroke="#10b981" stroke-width="5" marker-end="url(#arrow-green)"/>
|
||||
<text x="600" y="332" text-anchor="middle" fill="#43d9a3" class="label">Message Response</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540" role="img" aria-labelledby="title desc">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="500" viewBox="0 0 1200 500" role="img" aria-labelledby="title desc">
|
||||
<title id="title">WebSocket handshake</title>
|
||||
<desc id="desc">A compact HTTP Upgrade handshake diagram.</desc>
|
||||
<defs>
|
||||
@@ -9,32 +9,37 @@
|
||||
font-weight: 100 900;
|
||||
}
|
||||
text { font-family: "Vazirmatn", Arial, sans-serif; }
|
||||
.title { fill: #f8fafc; font-size: 38px; font-weight: 850; }
|
||||
.sub { fill: #a8adbd; font-size: 18px; font-weight: 500; }
|
||||
.node-title { fill: #f8fafc; font-size: 25px; font-weight: 850; }
|
||||
.node-sub { fill: #a8adbd; font-size: 16px; }
|
||||
.label { font-size: 18px; font-weight: 850; }
|
||||
</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"/>
|
||||
<feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#0f172a" flood-opacity=".16"/>
|
||||
</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>
|
||||
<rect width="1200" height="500" fill="#262a3a"/>
|
||||
<path d="M42 396 L258 286 L374 438 L92 532 Z" fill="#f4b740" opacity=".13"/>
|
||||
<path d="M880 42 L1146 112 L1030 262 L812 182 Z" fill="#6d8cff" opacity=".16"/>
|
||||
<g id="diagram-content-shift" transform="translate(0,-28)">
|
||||
<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"/>
|
||||
<rect x="92" y="166" width="250" height="132" rx="26" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
||||
<rect x="858" y="166" width="250" height="132" rx="26" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
||||
</g>
|
||||
<text x="217" y="220" text-anchor="middle" class="node-title">Browser</text>
|
||||
<text x="217" y="254" text-anchor="middle" class="node-sub">JavaScript WebSocket</text>
|
||||
<text x="983" y="220" text-anchor="middle" class="node-title">Server</text>
|
||||
<text x="983" y="254" text-anchor="middle" class="node-sub">/ws/{room}/{user}</text>
|
||||
<line x1="372" y1="176" x2="828" y2="176" stroke="#2563eb" stroke-width="5" marker-end="url(#arrow-blue)"/>
|
||||
<text x="600" y="154" text-anchor="middle" fill="#f7c75f" class="label">1. GET + Upgrade</text>
|
||||
<line x1="828" y1="240" x2="372" y2="240" stroke="#10b981" stroke-width="5" marker-end="url(#arrow-green)"/>
|
||||
<text x="600" y="224" text-anchor="middle" fill="#43d9a3" class="label">2. 101 Switching Protocols</text>
|
||||
<line x1="372" y1="298" x2="828" y2="298" stroke="#7c3aed" stroke-width="5" stroke-dasharray="10 9" marker-end="url(#arrow-purple)"/>
|
||||
<line x1="828" y1="336" x2="372" y2="336" stroke="#7c3aed" stroke-width="5" stroke-dasharray="10 9" marker-end="url(#arrow-purple)"/>
|
||||
<text x="600" y="360" text-anchor="middle" fill="#aebdff" class="label">3. Full-duplex WebSocket Frames</text>
|
||||
</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>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.1 KiB |
@@ -17,8 +17,7 @@
|
||||
<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>
|
||||
<g id="diagram-content-shift" transform="translate(0,-28)">
|
||||
<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"/>
|
||||
@@ -60,4 +59,5 @@
|
||||
<text x="830" y="390" fill="#a8adbd" font-size="15">Dashboard - IoT</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.2 KiB |
@@ -1,6 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540" role="img" aria-labelledby="title desc">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="500" viewBox="0 0 1200 500" 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>
|
||||
<desc id="desc">A compact OSI stack showing WebSocket at the application layer over TCP/IP.</desc>
|
||||
<defs>
|
||||
<style>
|
||||
@font-face {
|
||||
@@ -9,35 +9,49 @@
|
||||
font-weight: 100 900;
|
||||
}
|
||||
text { font-family: "Vazirmatn", Arial, sans-serif; }
|
||||
.layer { fill: #f8fafc; font-size: 18px; font-weight: 850; }
|
||||
.value { fill: #a8adbd; font-size: 18px; font-weight: 500; }
|
||||
.strong { fill: #ffffff; font-size: 19px; font-weight: 850; }
|
||||
.strongValue { fill: #ffffff; font-size: 19px; font-weight: 500; }
|
||||
.mutedRow { fill: #ffffff; opacity: .08; stroke: #ffffff; }
|
||||
</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"/>
|
||||
<feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#0f172a" flood-opacity=".16"/>
|
||||
</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>
|
||||
|
||||
<rect width="1200" height="500" fill="#262a3a"/>
|
||||
<path d="M42 396 L258 286 L374 438 L92 532 Z" fill="#f4b740" opacity=".13"/>
|
||||
<path d="M880 42 L1146 112 L1030 262 L812 182 Z" fill="#6d8cff" opacity=".16"/>
|
||||
|
||||
<!-- Diagram is intentionally placed slightly above center, with all rows inside the outer panel. -->
|
||||
<g id="diagram-content">
|
||||
<g filter="url(#shadow)">
|
||||
<rect x="150" y="80" width="900" height="350" rx="30" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
||||
</g>
|
||||
|
||||
<rect x="190" y="105" width="820" height="48" rx="15" fill="#2563eb"/>
|
||||
<text x="222" y="136" class="strong">Layer 7 - Application</text>
|
||||
<text x="712" y="136" class="strongValue">WebSocket - JSON - Chat</text>
|
||||
|
||||
<rect x="190" y="165" width="820" height="40" rx="14" class="mutedRow"/>
|
||||
<text x="222" y="191" class="layer">Layer 6 - Presentation</text>
|
||||
<text x="712" y="191" class="value">UTF-8 - Text</text>
|
||||
|
||||
<rect x="190" y="215" width="820" height="40" rx="14" class="mutedRow"/>
|
||||
<text x="222" y="241" class="layer">Layer 5 - Session</text>
|
||||
<text x="712" y="241" class="value">Long-lived conversation</text>
|
||||
|
||||
<rect x="190" y="265" width="820" height="48" rx="15" fill="#10b981"/>
|
||||
<text x="222" y="296" class="strong">Layer 4 - Transport</text>
|
||||
<text x="712" y="296" class="strongValue">TCP reliable stream</text>
|
||||
|
||||
<rect x="190" y="325" width="820" height="40" rx="14" class="mutedRow"/>
|
||||
<text x="222" y="351" class="layer">Layer 3 - Network</text>
|
||||
<text x="712" y="351" class="value">IP routing</text>
|
||||
|
||||
<rect x="190" y="375" width="820" height="40" rx="14" class="mutedRow"/>
|
||||
<text x="222" y="401" class="layer">Layers 2-1 - Link / Physical</text>
|
||||
<text x="712" y="401" class="value">Ethernet - Wi-Fi</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.8 KiB |
@@ -17,8 +17,7 @@
|
||||
<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 id="diagram-content-shift" transform="translate(0,-28)">
|
||||
<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"/>
|
||||
@@ -41,4 +40,5 @@
|
||||
<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"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.4 KiB |
Reference in New Issue
Block a user