Developing Azure IoT Hub in browser

Azure IoT Hub is an important part of Microsoft IoT, it is the bond between devices and Azure.

Azure IoT Hub team had released SDKs for both device side and service side in several programming languages, and you can use Azure IoT Hub in your project with those SDKs quite easy.

Also, Azure IoT Hub team had developed Device Explorer and iothub-explorer for monitoring messages anddevice management. Those tools can improve your development speed for projects with Azure IoT.

However, some user also wants to retrieve Azure IoT Hub messages in browser, some user wants to connect to AzureIoT Hub on device side using MQTT over WebSockets on port 443 without SDKs, and some user wants to connect to Azure IoT Hub on service side using AMQP directly.

I do understand their disappointment for nothing valuable after searching official docs, MSDN forum and Stack Overflow, and I know it’s time to do something for them.

IoT DevTool

IoT DevTool is a web-based tool for Azure IoT Hub, and you can use it in browser without downloading or installing anything. There’re four parts in the tool, Device, Registry, Service and RESTful.

The Device part is a device simulator, you can connect to IoT Hub as a device with it. Also, you can find MQTT connection option details, including host, port, client id, user name, password and so on. If you want to monitor cloud-to-device messages in browser or find MQTT connection options for connecting to Azure IoT Hub directly, Device tool is your choice.

Registry is a tool for Azure IoT Hub device management. You can create new devices and remove exist devices in this part. Also, you can generate specific device SAS token with this tool.

If you want to retrieve Azure IoT Hub messages from device side (device-to-cloud), Service tool is for your requirement. You can also send cloud-to-device messages and call direct method in this part. Also, AMQP connection option details will be shown.

RESTful tool has already had a built in API list, and when you select an API, request host name, path, authorization header and body will be filled for you automatically. Also, you can modify any of the filled information and make your own request.

Open Source on GitHub

IoT DevTool is absolute open source, you can find its source code here. Contribution is welcomed.

Device and Service tool are written with typescript, and code in master branch is built JavaScript. You need switch to source branch to find typescript code.

Deploy IoT DevTool Yourself

IoT DevTool is almost front-end code including HTML, CSS and JavaScript, however, there is also a backend service which is not included in GitHub.

The backend service is RESTful API proxy. Because Azure IoT Hub RESTful API doesn’t support CORS currently, you have to host a proxy to handle CORS. Also, you need change RESTful API host name in the source code before you deploy your own IoT DevTool.

But wait, you still have another choice to make deployment easy.

I have transplanted IoT DevTool to Azure Function App, and you can deploy IoT DevTool with some simple clicks. Don’t worry, Azure Function App is almost free.

Some Related Links

An Online Azure IoT Hub Developer Tool — IoT DevTool (Overview)

An Online Azure IoT Hub Developer Tool — IoT DevTool (For Cloud Developers)

An Online Azure IoT Hub Developer Tool — IoT DevTool ( For IoT Hub Device Administrators)

Connect to Azure IoT Hub in browser ( using AMQP over WebSockets )

Connect to Azure Event Hub in browser ( using AMQP over WebSockets )

How to use AMQP protocol in Browser (JavaScript)

Like what you read? Give Sneezry a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.