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