How to visualize real-time sensor data from your Azure IoT hub in a web application

[Alnur ELBERIER]

In this article, you learn how to visualize real-time use data that your IoT hub receives with a Node.js web app running on your local computer.

1. Introduction

In this article, we use an IoT Hub, which has the B-U5U5I-IOT20A board connected to it. B-U585I-IOT20A board consists of a low power microcontroller and sensors such as temperature and humidity, a magnetometer, accelerometer, gyroscope, pressure, Time-of-Flight, and gesture-detection. It also provides a Wi-Fi module, which allows us to connect it to Azure IoT Hub.
The board can be purchased here.
 
Note: Before starting this tutorial, you set up your Azure IoT device and IoT hub, link for which is given in the prerequisites section.
 

2. Prerequisites

1. An active Azure subscription (click here to create one)
2. Complete the B-U585I-IOT20A board tutorial by downloading the azure package from here and refer to this article to install the packaging and provision the board
3. An Azure IoT hub under your subscription.
4. Connect the B-U585I-IOT20A board to your IoT Hub by following this article
5. Node.js version 10.6 or later. To check your node version run node --version.
6. Download Git
7. The steps in this article assume a Windows development machine; however, you can easily perform these steps on a Linux system in your preferred shell.

1. Use the Bash environment in Azure Cloud Shell. For more information, see Azure Cloud Shell Quickstart - Bash.
    
   If you prefer to run CLI reference commands locally, install the Azure CLI. If you are running on Windows or macOS, consider running Azure CLI in a Docker container. For more information, see How to run the Azure CLI in a Docker container.
   1. If you are using a local installation, sign in to the Azure CLI by using the az login command. To finish the authentication process, follow the steps displayed in your terminal. For other sign-in options, see Sign in with the Azure CLI.
   2. When prompted, install the Azure CLI extension on first use. For more information about extensions, see Use extensions with the Azure CLI.

Run az version to find the version and dependent libraries that are installed. To upgrade to the latest version, run az upgrade.
 

3. Add a consumer group to your IoT hub

Consumer groups provide independent views into the event stream that enable apps and Azure services to consume independently data from the same Event Hub endpoint. In this section, you add a consumer group to your IoT hub's built-in endpoint that the web app uses to read data from.
Run the following command to add a consumer group to the built-in endpoint of your IoT hub:
Azure CLI-
 
az iot hub consumer-group create --hub-name YourIoTHubName --name YourConsumerGroupName
 
Note down the name you choose, you will need it later in this tutorial.
 

4. Download the web app from GitHub

Open a command window, and enter the following commands to download the sample from GitHub and change to the sample directory:
Cmd
git clone https://github.com/Azure-Samples/web-apps-node-iot-hub-data-visualization.git
cd web-apps-node-iot-hub-data-visualization
Examine the web app code
From the web-apps-node-iot-hub-data-visualization directory, open the web app in your favorite editor( I have used Visual Studio Code here for which you need to write code. ). The following shows the file structure viewed in VS Code:

Take a moment to examine the following files:

1. Server.js is a service-side script that initializes the web socket and the Event Hub wrapper class. It provides a callback to the Event Hub wrapper class that the class uses to broadcast incoming messages to the web socket.
2. Event-hub-reader.js is a service-side script that connects to the IoT hub's built-in endpoint using the specified connection string and consumer group. It extracts the DeviceId and EnqueuedTimeUtc from metadata on incoming messages and then relays the message using the callback method registered by server.js.
3. Chart-device-data.js is a client-side script that listens on the web socket, keeps track of each DeviceId, and stores the last 50 points of incoming data for each device. It then binds the selected device data to the chart object.
4. Index.html handles the UI layout for the web page and references the necessary scripts for client-side logic.

5. Configure environment variables for the web app

To read data from your IoT hub, the web app needs your IoT hub's connection string and the name of the consumer group that it should read through. It gets these strings from the process environment in the following lines in server.js:
JavaScript
const iotHubConnectionString = process.env.IotHubConnectionString;
const eventHubConsumerGroup = process.env.EventHubConsumerGroup;
Set the environment variables in your command window with the following commands. Replace the placeholder values with the service connection string for your IoT hub and the name of the consumer group that you created previously. Do not quote the strings.
Cmd
set IotHubConnectionString=YourIoTHubConnectionString
set EventHubConsumerGroup=YourConsumerGroupName
 

6. Run the web app

1. Make sure that your device is running and sending data.
2. In the command window, run the following lines to download and install referenced packages and start the website:

Cmd
npm install
npm start

3. You should see output in the console that indicates that the web app has successfully connected to your IoT hub and is listening on port 3000

 

7. Open a web page to see data from your IoT hub

Open a browser to http://localhost:3000.
In the Select a device list, select your device to see a running plot of the last 50 temperature and humidity data points sent by the device to your IoT hub.