AGC - WebSockets

JackStromberg · web-flow · commit c51e68077463 · 2025-01-13T21:52:03.000-06:00
diff --git a/articles/application-gateway/for-containers/media/websockets/websockets.svg b/articles/application-gateway/for-containers/media/websockets/websockets.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1243.68" height="624.768" viewBox="0 0 932.75 468.579" color-interpolation-filters="sRGB" fill="none" fill-rule="evenodd" font-size="12" overflow="visible" stroke-linecap="square" stroke-miterlimit="3" xmlns:v="https://vecta.io/nano"><style><![CDATA[.i{font-family:Segoe UI}.j{font-size:1.16666em}.k{fill:#000}.l{fill:#2f2f2f}.m{fill-opacity:.2}.n{filter:url(#N)}.o{font-size:1em}.p{fill:url(#D)}.q{fill:#341a6e}.r{stroke-linecap:round}.s{stroke-linejoin:round}.t{overflow:visible}.u{stroke:#0070c0}.v{stroke:#318e4d}.w{marker-end:url(#I)}.x{stroke-width:1.5}.y{fill-opacity:1}.z{stroke-opacity:1}.AA{stroke-width:.373}.AB{fill:#50e6ff}.AC{fill:#bfbfbf}.AD{fill:#318e4d}.AE{fill:#0078d4}.AF{marker-end:url(#J)}.AG{marker-start:url(#M)}]]></style><defs><linearGradient id="A" x1="0" y1="1" x2="0" y2="0"><stop offset="0" stop-color="#005ba1"/><stop offset="1" stop-color="#0078d4"/></linearGradient><radialGradient id="B" cx=".5" cy="0" r="1.1"><stop offset="0" stop-color="gray"/><stop offset=".19" stop-color="#a1a1a1"/><stop offset=".4" stop-color="silver"/><stop offset=".52" stop-color="#ccc"/><stop offset=".63" stop-color="#c9c9c9"/><stop offset=".715" stop-color="#bfbfbf"/><stop offset=".785" stop-color="#afafaf"/><stop offset=".85" stop-color="#999"/><stop offset=".91" stop-color="gray"/></radialGradient><linearGradient id="C" x1="0" y1="1" x2="0" y2="0"><stop offset="0" stop-color="#5ea0ef"/><stop offset="1" stop-color="#83b9f9"/></linearGradient><linearGradient id="D" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#b77af4"/><stop offset="1" stop-color="#773adc"/></linearGradient><path id="E" d="M0 171.579h171v297H0z"/><path id="F" d="M737.629 49.579h171v297h-171z"/><path id="G" d="M0 437.694h82.621v30.885H0z"/><path d="M3 1L0 0l3-1v2" stroke="none" id="H"/><marker id="I" refX="-8.04" orient="auto" markerUnits="strokeWidth" fill="#0070c0" class="t u y"><use href="#H" transform="scale(-2.68)" class="z AA"/></marker><marker id="J" refX="-8.04" orient="auto" markerUnits="strokeWidth" class="t v y AD"><use href="#H" transform="scale(-2.68)" class="z AA"/></marker><path d="M2 1L0 0l1.981-.993A2.25 2.25 0 0 0 1.985 1" stroke="none" id="K"/><marker id="L" refX="4.45" orient="auto" markerUnits="strokeWidth" class="t v y AD"><use href="#K" transform="scale(2.68)" class="z AA"/></marker><marker id="M" refX="7.8" orient="auto" markerUnits="strokeWidth" class="t v y AD"><use href="#H" transform="scale(2.68)" class="z AA"/></marker><filter id="N"><feGaussianBlur stdDeviation="2.667"/></filter></defs><path d="M0 0h932.75v468.579H0z" fill="#fff"/><path d="M19.879 450.08h247.5v-76.5h-247.5v76.5z" stroke="#000" stroke-dasharray="0,5" class="r s"/><use href="#E" transform="translate(739.75 -119.879)" class="k m n"/><use href="#F" fill="#b6daf8"/><use href="#E" transform="translate(22 -119.879)" class="k m n"/><use href="#F" x="-717.75" fill="#d8d8d8"/><use href="#E" transform="translate(382 -119.879)" class="k m n"/><use href="#F" x="-357.75" fill="#dbeef3"/><text x="85.409" y="222.901" class="i j l">Client</text><g class="AE"><path d="M114.467 185.885h-1.48-14.48-.74c1.97 7.12-.74 8.11-12.52 8.11v3.68h14.98 10.8 14.24v-3.68c-11.54 0-12.77-1.23-10.8-8.11z"/><path d="M85.247 197.676h40.02v-3.68h-40.02v3.68zm51.068-57.46h-61.87v45.67h61.87v-45.67z"/></g><path d="M133.122 143.411h-55.24v39.04h55.24v-39.04z" class="AB"/><path d="M84.516 201.11c-1.23 0-2.46-.98-2.46-2.46v-29.46c0-1.22.98-2.45 2.46-2.45h13.99c1.23 0 2.45.98 2.45 2.45v29.46c0 1.23-.98 2.46-2.45 2.46h-13.99z" class="AE"/><path d="M89.175 199.15h4.17v-1.47h-4.17v1.47zm2.944-29.712c0 .49-.24.74-.73.74s-.74-.25-.74-.74.25-.73.74-.73c.24 0 .73.24.73.73z" class="AB"/><path d="M83.284 195.958h15.96v-24.06h-15.96v24.06z" fill="#fff"/><path d="M84.511 175.33h13.5v-1.97h-13.5v1.97z" class="AB"/><path d="M84.511 193.254h13.5v-.74h-13.5v.74zm0 1.476h13.5v-.74h-13.5v.74z" class="AE"/><path d="M84.511 191.776h13.5v-10.56h-13.5v10.56z" fill="#3bcaf4"/><path d="M84.511 180.244h13.5v-4.17h-13.5v4.17z" class="AB"/><g transform="translate(443.834 -360.5)"><path d="M44.04 449.34a1.51 1.51 0 0 0-.19-.74l-10.26-17.77a1.51 1.51 0 0 0-1.28-.74H11.8c-.53.01-1.02.29-1.28.75L.26 448.59a1.5 1.5 0 0 0 0 1.48l10.26 17.76c.26.46.75.74 1.28.75h20.51c.53-.01 1.02-.29 1.28-.75l10.26-17.75c.13-.23.19-.48.19-.74h0z" fill="url(#A)" transform="translate(0 -2.885)"/><path d="M37.611 459.678l-14.07-14.07v-.15h-.15l-.27-.27-.27.27h-1.43l-.38-.39-14.41 14.61 2.05 2.02 11.98-12.15v15.56h2.88v-15.43l12.04 12.03 2.03-2.03z" fill="url(#B)"/><circle cx="22.104" cy="465.107" r="3.472" fill="url(#C)"/><path d="M16.145 446.131a5.98 5.98 0 1 0 11.96.08 5.97 5.97 0 0 0-4.37-5.8v-4.28c1.8-.93 2.5-3.14 1.57-4.94s-3.14-2.5-4.94-1.57-2.5 3.14-1.57 4.94c.35.67.9 1.22 1.57 1.57v4.38a5.95 5.95 0 0 0-4.22 5.62z" fill="#fff"/><g fill="url(#C)"><circle cx="22.104" cy="446.155" r="3.472"/><circle cx="7.655" cy="460.692" r="3.472"/><circle cx="36.595" cy="460.692" r="3.472"/></g></g><text x="6.78" y="448.86" font-weight="bold" transform="translate(422.91 -326.379)" class="i j l">Application <tspan x="4.67" dy="1.2em" class="o">Gateway for </tspan><tspan x="9.47" dy="1.2em" class="o">Containers</tspan></text><path d="M0 216.579h137.621v252H0z" transform="translate(756.439 -133.379)" class="k m n"/><path d="M754.318 81.079h137.621v252H754.318z" fill="#eaf4fd"/><g transform="translate(782.718 -311)"><use href="#G" transform="translate(2.121 2.121)" class="k m n"/><use href="#G" class="AC"/><text x="22.73" y="457.34" class="i j k">Pod A</text></g><path d="M0 311.079h130.5v157.5H0z" transform="translate(402.25 -137.879)" class="k m n"/><path d="M400.129 171.079h130.5v157.5h-130.5z" fill="#92cddc"/><text x="2.44" y="425.27" transform="translate(411.379 -182.776)" class="i j l">ws(s) traffic non-<tspan x="18.14" dy="1.2em" class="o">terminating</tspan></text><path d="M193.129 72.08h172.44" class="r s u w x"/><text y="448.86" transform="translate(229.504 -418.259)" x="0" class="i j l">HTTP Request<tspan dy="1.2em" x="0" class="o">Connection: Upgrade</tspan><tspan dy="1.2em" x="0" class="o">Upgrade: WebSocket</tspan></text><g class="r s u x w"><path d="M553.129 72.08h172.44"/><path d="M733.129 114.918h-167.94"/></g><text y="109.66" x="615.754" class="i j l">HTTP 101</text><path d="M375.379 114.918h-170.19" class="r s u w x"/><text y="109.66" x="247.129" class="i j l">HTTP 101</text><g class="r s"><g class="v x"><path d="M395.629 198.078h-190.44" class="AF"/><path d="M395.629 308.328h-190.44" class="AF"/><path d="M728.709 196.953h-195.83" marker-start="url(#L)"/><path d="M723.679 307.203h-190.8" class="AG"/></g><path d="M314.628 207.079v90" stroke="#000" stroke-dasharray="0,12.5" stroke-width="2.5"/></g><path d="M265.129 238.579h103.5v27h-103.5z" fill="#fff"/><text x="13.51" y="450.88" transform="translate(265.129 -203)" class="i j l">Bidirectional <tspan x="6.06" dy="1.2em" class="o">Data exchange</tspan></text><text x="16.14" y="457.26" transform="translate(245.16 -135.129)" class="i j l">WebSocket(s) <tspan x="6.36" dy="1.2em" class="o">connection close</tspan></text><text y="47.401" font-weight="bold" x="764.629" class="i j l">AKS Cluster</text><text x="759.291" y="110.401" class="i j l">Contoso.com service</text><g transform="translate(782.718 -259.25)"><use href="#G" transform="translate(2.121 2.121)" class="k m n"/><use href="#G" class="AC"/><text x="23.24" y="457.34" class="i j k">Pod B</text></g><g transform="translate(782.718 -208.115)"><use href="#G" transform="translate(2.121 2.121)" class="k m n"/><use href="#G" class="AC"/><text x="22.92" y="457.34" class="i j k">Pod C</text></g><g transform="translate(782.718 -158)"><use href="#G" transform="translate(2.121 2.121)" class="k m n"/><use href="#G" class="AC"/><text x="22.34" y="457.34" class="i j k">Pod D</text></g><g class="r s x"><path d="M37.629 396.08h78.19" class="u w"/><path d="M116.179 430.078h-78.3" class="v AG"/></g><text x="134.304" y="400.281" class="i j l">HTTP Request</text><text x="133.039" y="434.031" class="i j l">WebSocket Frame</text><path d="M730.34 30.575l-6.21 1.15v8.47l6.21 1.32 6.22-2.5v-6.31l-6.22-2.13z" class="p"/><path d="M724.13 31.725v8.47l6.27 1.32v-10.85l-6.27 1.06zm2.65 7.81l-1.76-.34v-6.51l1.76-.29v7.14zm2.73.5l-2.02-.32v-7.45l2.02-.34v8.11z" class="q"/><path d="M743.773 30.684l-6.21 1.15v8.47l6.21 1.32 6.2-2.52v-6.29l-6.2-2.13z" class="p"/><path d="M737.563 31.834v8.47l6.23 1.32v-10.85l-6.23 1.06zm2.63 7.81l-1.76-.34v-6.51l1.76-.29v7.14zm2.73.5l-2.02-.32v-7.45l2.02-.36v8.13z" class="q"/><path d="M723.982 42.25l-6.21 1.15v8.47l6.21 1.32 6.22-2.5v-6.31l-6.22-2.13z" class="p"/><path d="M717.75 43.405v8.4l6.27 1.32v-10.85l-6.27 1.13zm2.63 7.83l-1.76-.37v-6.51l1.76-.3v7.18zm2.75.57l-2.02-.33v-7.53l2.02-.35v8.21z" class="q"/><path d="M737.371 42.165l-6.21 1.15v8.46l6.21 1.35 6.2-2.52v-6.31l-6.2-2.13z" class="p"/><path d="M731.161 43.315v8.49l6.25 1.32v-10.85l-6.25 1.04zm2.63 7.83l-1.76-.36v-6.51l1.76-.31v7.18zm2.73.48l-2.02-.32v-7.45l2.02-.34v8.11z" class="q"/><path d="M750.761 42.272l-6.21 1.15v8.47l6.21 1.32 6.22-2.5v-6.31l-6.22-2.13z" class="p"/><path d="M744.551 43.425v8.38l6.27 1.32v-10.85l-6.27 1.15zm2.65 7.83l-1.76-.37v-6.51l1.76-.3v7.18zm2.73.48l-2.02-.33v-7.44l2.02-.35v8.12z" class="q"/><path d="M730.188 54.055l-6.21 1.13v8.46l6.21 1.35 6.22-2.52v-6.29l-6.22-2.13z" class="p"/><path d="M723.978 55.185v8.46l6.27 1.35v-11.02l-6.27 1.21zm2.65 7.83l-1.76-.36v-6.51l1.76-.31v7.18zm2.73.5l-2.02-.32v-7.47l2.02-.34v8.13z" class="q"/><path d="M743.599 54.142l-6.21 1.15v8.47l6.21 1.32 6.22-2.5v-6.31l-6.22-2.13z" class="p"/><path d="M737.389 55.292v8.47l6.27 1.32v-10.85l-6.27 1.06zm2.65 7.84l-1.76-.37v-6.51l1.76-.31v7.19zm2.73.47l-2.02-.32v-7.45l2.02-.34v8.11z" class="q"/></svg>
