Home▸Computer Science▸Real-Time Message Jitter Buffer

Real-Time Message Jitter Buffer

Interactive 3D simulator of the jitter buffer that real-time mobile apps use to reorder WebSocket/chat messages: watch packets arrive out of order over a jittery network, queue in a playout buffer, and either deliver in sequence or get skipped as late.

Computer Science3DModerate60 FPS📱 Mobile-adapted⇄ 2D version

Mobile real-time features — live chat, collaborative cursors, push feeds — all sit on top of a channel (WebSocket, Server-Sent Events, Firebase Realtime Database) that does not guarantee messages arrive in the order they were sent. This simulator renders that pipeline as a live 3D flow: packets leave a source at a fixed rate, cross a jittery network segment that scrambles their arrival order and occasionally drops one, and land in a playout buffer that reorders them against a fixed delivery schedule. Tune the send rate, jitter spread, loss probability and buffer delay to see the exact trade-off every real-time client makes — a larger buffer absorbs more jitter but adds latency, while a smaller one feels instant but starts skipping late arrivals as visible gaps.

⚙ Under the hood

Watch a live WebSocket/push-style message stream cross a jittery, lossy network, queue in a playout buffer, and get replayed in order — tune send rate, jitter, loss and buffer delay to see the classic real-time latency-vs-order trade-off.

real-timewebsocketjitter-buffernetworkingmobilequeueing

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install