47 lines
3.1 KiB
XML
47 lines
3.1 KiB
XML
<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>
|