How to Connect AVstudio Editor to MQTT Using WebSockets (WS/WSS)

(Includes Mosquitto and Aedes Node-RED Broker Setup)

AVstudio Editor runs inside a browser, so it cannot connect to MQTT using raw TCP (1883/8883).

To work with MQTT, you must connect through:

• WS (ws://)

• WSS (wss:// — required when using HTTPS)

This guide explains how to configure your environment and provides two options:

• Option A: Mosquitto with WebSocket support

• Option B: Aedes MQTT Broker directly inside Node-RED

1. Why WebSockets Are Required

Browsers block raw MQTT connections. They only allow WebSockets.

That means:

❌ No: mqtt://192.168.1.10:1883

✔ Yes: ws://192.168.1.10:9001

✔ Yes: wss://mqtt.myserver.com:9443

If your MQTT broker does not expose WS/WSS, AVstudio Editor cannot connect.

2. MQTT Requirements for AVstudio

Your broker must support:

✔ MQTT over WebSockets (required)

Provides a WS/WSS port.

✔ CORS Headers (recommended)

If behind a proxy:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

✔ WSS if running over HTTPS

Required because browsers block insecure WS under HTTPS.

3. Option A — Mosquitto WebSocket Setup (Quick Version)

(Kept minimal since main request was Aedes)

Add to mosquitto.conf:

listener 9001
protocol websockets

Restart:

sudo systemctl restart mosquitto

4. Option B — Using Aedes MQTT Broker Inside Node-RED

(Recommended for testing, small systems, self-contained development setups)

The Aedes MQTT broker node allows Node-RED to run its own broker with built-in WebSocket support — no Mosquitto needed.

Perfect for:

• Local development

• Small IoT setups

• Quick testing

• AVstudio demos

Below is the full setup.

4.1 Install the Aedes Broker Node

In Node-RED:

1. Go to Menu → Manage Palette → Install

2. Search for:

node-red-contrib-aedes

3. Click Install

You will now have two new nodes:

• Aedes Broker

• Aedes Client

4.2 Configure the Aedes Broker (WS Enabled)

Drag Aedes Broker onto the canvas, double-click it, and set:

Basic Settings

Enable WebSockets

Turn ON:

✔ “Enable WebSocket” (port 9001)

OPTIONAL: “Enable Secure WebSocket (WSS)” (port 9443)

4.3 (Optional) Enable Secure WSS

If Node-RED is behind HTTPS or used remotely, you should enable WSS.

Provide certificate files:

• Private key

• Certificate

• CA file (optional)

Example paths:

/etc/ssl/private/server.key
/etc/ssl/certs/server.crt

4.4 Create a Simple Test Flow

Use these nodes:

• Inject → payload “hello from Node-RED”

• Aedes Client → Publish

• Aedes Client → Subscribe

• Debug

Configure Aedes Client (Publisher/Subscriber)

Use:

ws://<your-ip>:9001

Example:

ws://192.168.1.50:9001
Topic: avstudio/test

If using WSS:

wss://your-domain.com:9443

5. Connecting AVstudio Editor to Aedes Broker

Inside AVstudio, create a DataSource → MQTT.

Connection Example (WS)

Full URL:

ws://192.168.1.50:9001

Connection Example (WSS)

wss://mqtt.myserver.com:9443

Make sure certificate is valid (or browser will block before AVstudio even tries).

6. Using MQTT in AVstudio

Once connected:

✔ Bind any UI element to Topic

• Sensors

• Buttons

• Sliders

• Dynamic text

• Page logic

• JavaScript blocks

✔ Publish on button click

✔ Update variables from subscriptions

✔ Live updates inside AVstudio Preview

7. Common Issues & Fixes