Awesome
IoTHub WebClient
Web application to connect to Azure IoT Hub from the browser (no server code required), written completely in JavaScript ES6
https://mqtt.rido.dev
MQTT in the browser
This app uses the Eclipse Paho JavaScript Client to communicate to Azure IoT Hub as described in Communicate with your IoT hub using the MQTT protocol
Sample code
requires paho to be added to the page using
<script>
import { AzIoTHubClient, ackPayload } from './AzIoTHubClient.js'
const client = new AzIoTHubClient(host, deviceId, deviceKey, modelId)
client.setDirectMehodCallback((method, payload, rid) => {
const response = JSON.stringify({ customResponse: 'cmdResponsePayload' })
client.commandResponse(method, response, rid, 200)
})
client.setDesiredPropertyCallback((desired) => {
const dco = JSON.parse(desired)
const payload = ackPayload(dco, status, dco.$version)
const updateResult = await client.updateTwin(JSON.stringify(payload))
})
await client.connect()
const twin = await client.getTwin()
await client.updateTwin('{}')
Authentication
Azure IoT Hub uses an HMAC signature to produce a SaS token used to authenticate the MQTT client. This client uses the HMAC primitives avaiable on modern browsers.
Features
- Connect using the PnP Convention (announce
model-id
) with SasKeys - Read Device Twin reported and desired properties (D2C)
- Update reported properties (D2C)
- Receive desired properties updates (C2D)
- ACK desired properties updates following the PnP convention (D2C)
- Receive command request (C2D)
- Reply commands with custom responses (D2C)
- .d.ts typings
Roadmap
- DPS client over MQTT
- DPS with master keys
- Suggest payloads from PnP models
- Create ES6 modules for paho js client