Message queue

메시지 큐

A queue buffers work so consumers pull it at a manageable pace.

···
html
<div class="scene"><div class="title">BURST → BUFFER → WORKER</div><div class="row"><div class="tile">PRODUCER<br><b id="sent">0 sent</b></div><div class="queue" id="queue"></div><div class="tile">WORKER<br><b id="done">0 done</b></div></div><div class="muted" id="queueState">Queue absorbs a burst</div></div>
css
.scene{width:min(94vw,760px);height:min(86vh,320px);padding:clamp(10px,2.5vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);font:500 clamp(11px,1.3vw,16px)/1.25 "Pretendard Variable",Pretendard,-apple-system,sans-serif;display:flex;flex-direction:column;gap:clamp(7px,1.6vmin,12px);overflow:hidden}.scene *{box-sizing:border-box}.title{font-weight:750;color:var(--accent)}.muted{color:var(--muted)}.mono{font-family:ui-monospace,monospace}.row{display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.4vmin,12px);flex:1;min-height:0}.tile{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(6px,1.6vmin,12px);text-align:center;min-width:0}.on{border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important}.pulse{animation:pulse 1.6s infinite alternate}@keyframes pulse{to{border-color:var(--accent);transform:translateY(-3px)}}.queue{flex:1;min-width:70px;height:52%;border:2px solid var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:flex-end;gap:3px;padding:5px}.queue i{width:14%;height:70%;border-radius:4px;background:var(--accent);animation:pulse 1s infinite alternate}.tile b{color:var(--accent)}
js
let sent=0,done=0,t=0;function tick(){if(t%8<5)sent+=2;else done=Math.min(sent,done+2);const count=Math.min(6,sent-done);document.getElementById('queue').innerHTML='<i></i>'.repeat(count);document.getElementById('sent').textContent=sent+' sent';document.getElementById('done').textContent=done+' done';document.getElementById('queueState').textContent=count>=5?'Backlog rises during burst':'Worker drains backlog';if(++t%16===0){sent=0;done=0}}tick();setInterval(tick,500)

A message queue decouples the sender from the worker that performs a task. Producers can enqueue faster than consumers process.

The demo grows a backlog during a burst and then drains it one item at a time. Queuing adds delay, so backlog and failed-message handling need monitoring.

When to use

Use it to buffer work such as email sending or image processing outside the request path.

Open as page ↗