mqtt.js Browser Client Examples

These examples are based on the mqtt.js client library.

mqttjs-client-simple

This is a bare minimum client example for mqtt.js. On document load, the script for this page gets two divs from the HTML document for local and remote messages.Then it attempts to connect to the broker. Once it does, it sends the local time if it’s connected every two seconds. The publish button allows you to turn on and off publishing status, in case you’re testing with a second client that’s sending to the same topic.

The ArduinoMqttClient example uses the same topic and sends the same range of numeric values if you want to test against another client.

mqttjs-p5js-mousepressed-client

This example uses p5.js and the mqtt.js client library to create an MQTT client that sends and receives MQTT messages. The client is set up for use on the shiftr.io test MQTT broker, but other options listed will work.

mqtt-midi-controller

This example uses the mqtt.js library and the Web MIDI API to create an MQTT client that sends and receives MQTT messages that are MIDI messages. You can use keyboard input as well, as shown in the HTML. The client is set up for use on the shiftr.io test MQTT broker, but has also been tested on other brokers.

This Arduino MQTT-to-MIDI Player Client can receive MIDI messages from the same broker and send MIDI to your operating system or MIDI system. This Arduino MIDI-to-MQTT Controller Client can send noteon and noteoff messages via MQTT at the push of a button.

mqttjsHueLightControl

This example will change the brightness of a light on a local Philips Hue Hub when you change the slider, and will send an MQTT message with the value of the slider when you press the button. If it receives an MQTT message on the lights topic, it uses that value to change the brightness of the light. So you can use this to change the brightness of a local hub, or of a friend’s hub on a remote network if you are both connected to the same broker.