MQTT Publish-Subscribe Simulator¶
Specification¶
The full specification below is extracted from Chapter 10: Wireless Communication with the Pico W.
Type: microsim
**sim-id:** mqtt-publish-subscribe-simulator<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *understand* (Bloom L2: Understand) how a publisher, an MQTT broker, and one or more subscribers exchange messages organized by topic.
Canvas: 700x480px, responsive via `windowResized()` recalculating the three-column layout as fractions of `width`, collapsing to a stacked single column below 500px wide.
Layout: three columns — "Publishers" on the left (two icons, one Pico W robot and one classroom sensor), "MQTT Broker" in the center (a single labeled hub icon), and "Subscribers" on the right (three icons: a phone, a laptop dashboard, and a second robot). Each publisher and subscriber has a small colored tag showing which topic it publishes to or is subscribed to, chosen from `stem/robot1/distance`, `stem/robot1/battery`, and `stem/room/temperature`.
Controls: a `createSelect()` dropdown per publisher icon (two total) letting a student choose which topic that publisher sends to; a `createButton()` labeled "Publish Message" per publisher that fires an animated message packet toward the broker; checkboxes (via `createCheckbox()`) next to each subscriber letting a student toggle which topic(s) that subscriber listens to.
Interaction: when a publisher fires a message, it animates from the publisher icon to the broker, then the broker fans out a copy of that message only to subscriber icons currently subscribed to the matching topic — those copies animate onward to the matching subscribers while non-matching subscribers stay idle, making the topic-based filtering visible. Clicking the broker icon opens an infobox reminding the student that the broker never contacts a device that hasn't subscribed. Clicking any topic tag shows the topic string being used.
Implementation: p5.js. Represent topic subscriptions as a simple object per subscriber, e.g. `{distance: true, battery: false, temperature: true}`, checked against the topic of a fired message to decide which fan-out animations to launch. Animate packets with linear interpolation between fixed icon coordinates recalculated on resize.