Skip to main content

Set Up an MQTT Real-Time Connection

Configure an MQTT broker and create a connection for real-time data streaming.

Part 1: Add the MQTT config (Admin)​

Required role: Admin

1. Open Organization Settings​

Go to Organization Settings → Configs tab.

2. Add an MQTT config​

Click Add Config and select MQTT.

3. Enter broker details​

FieldWhat to enter
NameA label for this broker (e.g., "Factory Floor MQTT")
Broker URLWebSocket endpoint — must start with ws:// or wss://
Username(Optional) Broker login username
Password(Optional) Broker login password
Client ID(Optional) A specific MQTT client identifier

4. Test the connection​

Click Test Connection. You should see a success message confirming the broker is reachable.

5. Save and grant access​

Save the config, then go to the Users tab to grant access to the members who need it.

Part 2: Create an MQTT data connection (Any user with access)​

1. Create a new connection​

Go to Data Connections → New Connection → MQTT.

2. Configure the connection​

  1. Select the MQTT data source config.
  2. Enter the topic to subscribe to (e.g., factory/line-1/temperature).
  3. Choose a QoS level (0, 1, or 2). See MQTT Connections for guidance.
  4. (Optional) Enter a JSONPath to extract a specific field from JSON messages.
  5. Name the connection.

3. Save​

Click Save. The connection is now available to use in widgets.

4. Use in a widget​

In a widget, use onSourceData() for real-time updates:

onSourceData("My MQTT Feed", (data) => {
  document.getElementById("value").textContent = JSON.stringify(data);
});

See MQTT Connections for more details.