iot-central-web-mqtt-device

Create a simple IoT device that runs fully contained in the web browser that can communicate with Azure IoT Central over MQTT (using websockets).

Introduction

This project is based in large part on the work done by Github user ridomin in the repository iothub-webclient, take a look at his repository for the details on what is happening below the covers. In this project I have focused the sample on connecting to an IoT Central application and it exclusively uses the Device Provisioning Service (DPS) for the provisioning and connection of the device. IoT Central does not support connection strings and requires the device to use DPS to obtain it the location of it's IoT hub, this allows a device to be moved between hubs and in the near futrure for IoT Central to support IoT Hub redundancy. The device running in the browser is also setup to run as an autonomous device very much like if the device was running in the real world. The devices two way communication between IoT Central and itself can be observed in the console output on the web page once sending telemetry has been started.

The device supports the following functionality:

Connection to IoT Central using DPS. The device does not need to be registered in the application prior to connecting
The device can be authenticated via either the device SAS token or the Group SAS token for the application (in this case the device SAS token is automatically generated)
The device is automatically associated with the model identity provided by the user in the form
Sending the telemetry values for temperature and humidity (randomly generated values in a range) ever ~5 seconds
Sending the reported property of fan speed to IoT Central every ~10 seconds
Accepting a desired (writable) property setTemp to set the temperature of a thermostat on the device
Accepting the direct method call sendTextMessage from IoT Central with a text message and responding with a boolean return value if the message is read
Accepting a cloud to device message startVacuumCleaner that takes a time value as a parameter (this is additional functionality over iothub-webclient version)

All communication and payloads are displayed on the web browser console output with the last 200 transmissions held in history.

Hosting locally

To host this locally clone this repository to your computer and run the following:

npm install
npm start

The following should be seen after running the last command

> webmqtt@1.0.0 start D:\github\iot-central-web-mqtt-device
> node server.js

Listening at http//localhost:8080

If you see an error check to see if the port 8080 is already in use on your machine and if it is feel free to change the port to a free one by changing the code in server.js on line 23.

Open your browser of choice and go to the URL http//localhost:8080/device.html. You should see the following in you browser:

Enjoy the retro 2010 web page look :-)

Hosting on Azure

The code can obviously be hosted on any web service but in my case I chose to host using an Azure function as it is a cost effective way to host infrequently accessed static web pages.

I used this blog post to setup my Azure function. The code needed for the Azure Function can be found in the file azure-function/index.js.

You will need to copy the contents of the content directory up to your Azure Function location and also install the needed npm package mime-types. All this is explained in the blog post. Once you have followed the insdtructions you should be able to browse to your azure functions URL with https://.azurewebsites.net/device.html and you should see the following in your browser:

Enjoy the retro 2010 web page look :-)

Running your device in the browser

To run the device you are obviously going to need an Azure IoT Central application. You can find instructions on getting started with Azure IoT Central here. Once you have an Azure IoT Central application you need to import in the device model used by this device. The device model can be obtained either from the browser by clicking the link in the first page or by grabbing it from the GitHub repository here.

You can import in the model by looking at this information. You can also create a view for the device twin properties so you can send the writable property "setTemp" to the device.

Once you have an Azure IoT Central application and have imported and published the device template you are ready to connect the device. First thing we need to do is provide information so your device knows where to connect. You are going to need to fill in the Scope Identity and Group SAS Token. These can be obtained from the IoT Central application in the Administrator page under the Device connection tab.

The Scope Identity can be obtained here and pasted into the browser form:

The Group SAS Token can be obtained here and pasted into the browser form:

You should now see that the Device SAS Token has been populated with it's generated value and you are ready to click "Provision and Connect"!

The connection can take a few seconds especially on the first connection so give it a minute to connect if necessary. Subsequent connections should be much quicker. You should now see the following screen:

Now click the "Start Sending Telemetry" button and telemetry and reported properties will be sent to your IoT Central application.

In the IoT Central you should be seeing data arrive in the raw data view and if you have set up a view of telemetry you will see a graph of the data:

You can send commands to the device from the IoT Central application like this:

You can update the thermostat setting on the device using IoT Central like this:

These will show up in the console window respectively when they arrive at the device:

Finally the complete device twin can be pulled from IoT Central by clicking the "Fetch Full Twin" button and it will be displayed in the console window:

Features needed to be added