라운드 로빈 로드 밸런싱

<div class="demo"><div class="head"><b>LOAD BALANCER</b><span id="request">request #1</span></div><div class="scene"><div class="gateway">IN<br><strong>→</strong></div><div class="route">ROUTE<br><strong id="route">A</strong></div><div class="servers"><div class="server" id="a">SERVER A <b>0</b></div><div class="server" id="b">SERVER B <b>0</b></div><div class="server" id="c">SERVER C <b>0</b></div></div></div><div class="foot"><span>A → B → C → A</span><span>tap to route</span></div></div>

.demo{width:min(94vw,690px);height:min(86vh,310px);padding:clamp(10px,2.4vmin,20px);border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:600 clamp(9px,2.5vmin,15px)/1.3 ui-monospace,monospace}.head,.foot{display:flex;justify-content:space-between;gap:8px}.head b,.gateway strong,.route strong{color:var(--accent)}.head span,.foot{color:var(--muted)}.foot{font-size:.82em}.scene{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(5px,2vmin,20px)}.gateway,.route{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:.65em;text-align:center;min-width:19%}.gateway strong,.route strong{font-size:1.8em}.servers{width:42%;display:grid;gap:clamp(5px,1.4vmin,10px)}.server{border:1px solid var(--line);border-radius:6px;background:var(--bg);padding:.5em;display:flex;justify-content:space-between;opacity:.55;transition:opacity .2s,border-color .2s,background .2s}.server.on{opacity:1;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}.server b{color:var(--accent)}

const ids=['a','b','c'],counts=[0,0,0];let request=0;function route(){const index=request%3;counts[index]++;ids.forEach((id,i)=>{const el=document.getElementById(id);el.classList.toggle('on',i===index);el.querySelector('b').textContent=counts[i]});document.getElementById('route').textContent=ids[index].toUpperCase();document.getElementById('request').textContent='request #'+(request+1);request++}route();const timer=setInterval(route,700);document.querySelector('.demo').addEventListener('pointerdown',()=>{clearInterval(timer);route()})