Real-Time Message Jitter Buffer (2D)

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 2D flow diagram: packets leave a source at a fixed rate, cross a jittery network lane that scrambles their arrival order and occasionally drops one, and land in a playout buffer that reorders them against a fixed delivery schedule. Two strip charts underneath replay the delivered/dropped history and the buffer occupancy over time. Tune the send rate, jitter spread, loss probability, buffer delay and playback speed 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.