RMQ Simulator — RabbitMQ visual no browser

Explicar RabbitMQ com slide é sofrimento: exchange, binding, routing key, prefetch — tudo abstrato até você ver a mensagem viajando. O RMQ Simulator resolve isso: um canvas onde você arrasta producers, exchanges, filas e consumers, liga tudo com bindings e assiste às bolinhas de mensagem sendo roteadas em tempo real, seguindo a semântica real do AMQP. Sem servidor, sem Docker, sem conta — abre no browser e funciona.

O que ele simula de verdade

• Os 4 tipos de exchange com roteamento fiel:
  • fanout — cópia para todas as filas ligadas;
  • direct — match exato de routing key;
  • topic — pattern matching com * (uma palavra) e # (zero ou mais);
  • headers — matching por headers da mensagem.
• Mensagem sem rota fica marcada como unroutable — igual na vida real.
• Semântica de ack: auto-ack vs. ack manual com mensagens in-flight, respeitando o prefetchCount do consumer — dá pra ver o backpressure acontecendo quando o consumer satura.
• 5 exemplos prontos espelhando os tutoriais oficiais do RabbitMQ: Simple Queue, Work Queues, Pub/Sub, Routing e Topics.

Além disso: undo/redo, duplicação de nós, export/import do diagrama em JSON, atalhos de teclado, pan/zoom com marquee selection, i18n (en/pt/es) e uma página /learn com o conteúdo teórico.

Arquitetura

Zero backend. A "engine" de mensageria roda inteira no browser: um store Zustand guarda o grafo e as mensagens, um loop de requestAnimationFrame avança as mensagens viajantes, e o roteamento acontece quando cada mensagem "chega" na exchange.

Visão de componentes:

Fluxo de uma mensagem:

Decisões técnicas que valem a pena contar

Topic matching de verdade. O algoritmo de matching do AMQP (* = exatamente uma palavra, # = zero ou mais) foi implementado com um parser de dois ponteiros sobre os segmentos da routing key — dá pra testar no simulador exatamente os patterns que você usaria em produção, tipo *.order.* ou us.#.

Coordenadas de mundo vs. tela. Pan, zoom e seleção por marquee exigem converter coordenadas de tela para "mundo" ((screen − offset) / scale) e interseção AABB dos nós. O zoom com Ctrl+scroll recalcula o offset para manter o ponto sob o cursor fixo — e usa listener nativo { passive: false } para poder bloquear o zoom do próprio browser.

Prefetch visível. O consumer para de receber quando o número de mensagens não confirmadas atinge o prefetchCount. É a demonstração mais didática de backpressure que já consegui fazer: a fila enche na tela.

Bônus: o experimento com LLMs

Este repo tem dois irmãos: claude-rmq-simulator e qwen-rmq-simulator — a mesma spec entregue a modelos de IA diferentes, para comparar as escolhas de arquitetura e stack que cada um faz (spoiler: ambos escolheram Next.js; a versão principal usa Vite). Um mini-benchmark prático de código gerado por IA.

Stack

React 19 · TypeScript · Vite 7 · Zustand · Tailwind CSS 4 · i18next · MIT license.

Status

No ar em rmq.racoelho.com.br, open source sob MIT. No roadmap: dead-letter exchange, enforcement de TTL/max-length nas filas e URLs compartilháveis de diagrama.