34 lines
2.9 KiB
XML
34 lines
2.9 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 Timeline</title>
|
|
<desc id="desc">A minimal timeline showing the evolution from AJAX polling to the WebSocket RFC.</desc>
|
|
<rect width="960" height="540" fill="#f7f9fc"/>
|
|
<text x="72" y="74" fill="#101828" font-family="Inter, Arial, sans-serif" font-size="34" font-weight="700">WebSocket History</text>
|
|
<text x="72" y="108" fill="#667085" font-family="Inter, Arial, sans-serif" font-size="16">From repeated HTTP requests to one persistent full-duplex connection</text>
|
|
<line x1="110" y1="278" x2="850" y2="278" stroke="#c7d7fe" stroke-width="8" stroke-linecap="round"/>
|
|
<g font-family="Inter, Arial, sans-serif">
|
|
<circle cx="150" cy="278" r="22" fill="#2563eb"/>
|
|
<text x="150" y="338" text-anchor="middle" fill="#101828" font-size="18" font-weight="700">1990s</text>
|
|
<text x="150" y="366" text-anchor="middle" fill="#475467" font-size="15">Classic HTTP</text>
|
|
<text x="150" y="388" text-anchor="middle" fill="#475467" font-size="15">request/response</text>
|
|
<circle cx="330" cy="278" r="22" fill="#2563eb"/>
|
|
<text x="330" y="338" text-anchor="middle" fill="#101828" font-size="18" font-weight="700">2005</text>
|
|
<text x="330" y="366" text-anchor="middle" fill="#475467" font-size="15">AJAX polling</text>
|
|
<text x="330" y="388" text-anchor="middle" fill="#475467" font-size="15">near-real-time web</text>
|
|
<circle cx="510" cy="278" r="22" fill="#2563eb"/>
|
|
<text x="510" y="338" text-anchor="middle" fill="#101828" font-size="18" font-weight="700">2008</text>
|
|
<text x="510" y="366" text-anchor="middle" fill="#475467" font-size="15">WebSocket idea</text>
|
|
<text x="510" y="388" text-anchor="middle" fill="#475467" font-size="15">HTML5 discussions</text>
|
|
<circle cx="690" cy="278" r="22" fill="#2563eb"/>
|
|
<text x="690" y="338" text-anchor="middle" fill="#101828" font-size="18" font-weight="700">2011</text>
|
|
<text x="690" y="366" text-anchor="middle" fill="#475467" font-size="15">RFC 6455</text>
|
|
<text x="690" y="388" text-anchor="middle" fill="#475467" font-size="15">standard protocol</text>
|
|
<circle cx="830" cy="278" r="22" fill="#12b76a"/>
|
|
<text x="830" y="338" text-anchor="middle" fill="#101828" font-size="18" font-weight="700">Today</text>
|
|
<text x="830" y="366" text-anchor="middle" fill="#475467" font-size="15">Chat, games,</text>
|
|
<text x="830" y="388" text-anchor="middle" fill="#475467" font-size="15">dashboards, IoT</text>
|
|
</g>
|
|
<rect x="72" y="150" width="816" height="86" rx="14" fill="#ffffff" stroke="#d0d5dd"/>
|
|
<text x="106" y="186" fill="#344054" font-family="Inter, Arial, sans-serif" font-size="16" font-weight="700">Problem</text>
|
|
<text x="106" y="212" fill="#344054" font-family="Inter, Arial, sans-serif" font-size="15">Browsers needed fast server-to-client updates without repeatedly opening new HTTP requests.</text>
|
|
</svg>
|
