You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
|Metric data|Metrics are numerical values that describe an aspect of a system at a particular point in time. Metrics can be aggregated using algorithms, compared to other metrics, and analyzed for trends over time.|- Collected automatically at regular intervals.</br> - You can route some platform metrics to a Log Analytics workspace to query with other data. Check the **DS export** setting for each metric to see if you can use a diagnostic setting to route the metric data.|[Metrics explorer](/azure/azure-monitor/essentials/metrics-getting-started)|[Azure Backup metrics supported by Azure Monitor](monitor-backup-reference.md#metrics)|
23
+
|Resource log data|Logs are recorded system events with a timestamp. Logs can contain different types of data, and be structured or free-form text. You can route resource log data to Log Analytics workspaces for querying and analysis.|[Create a diagnostic setting](/azure/azure-monitor/essentials/create-diagnostic-settings) to collect and route resource log data.|[Log Analytics](/azure/azure-monitor/learn/quick-create-workspace)|[Azure Backup resource log data supported by Azure Monitor](monitor-backup-reference.md#resource-logs)|
24
+
|Activity log data|The Azure Monitor activity log provides insight into subscription-level events. The activity log includes information like when a resource is modified or a virtual machine is started.|- Collected automatically.</br> - [Create a diagnostic setting](/azure/azure-monitor/essentials/create-diagnostic-settings) to a Log Analytics workspace at no charge.|[Activity log](/azure/azure-monitor/essentials/activity-log)||
For more information about alerts for Azure Backup, see [Manage Azure Monitor based alerts for Azure Backup](backup-azure-monitoring-alerts.md) and [Sample alert scenarios](metrics-overview.md#sample-alert-scenarios).
39
+
40
+
## Related content
41
+
42
+
-[Azure Backup monitoring data reference](monitor-backup-reference.md)
Copy file name to clipboardExpand all lines: articles/iot-hub/iot-hub-live-data-visualization-in-web-apps.md
+15-17Lines changed: 15 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,16 +7,15 @@ author: SoniaLopezBravo
7
7
ms.author: sonialopez
8
8
ms.service: azure-iot-hub
9
9
ms.topic: tutorial
10
-
ms.date: 05/23/2023
10
+
ms.date: 03/26/2025
11
11
ms.custom: ['Role: Cloud Development', 'Role: Data Analytics', devx-track-azurecli]
12
12
---
13
13
14
14
# Tutorial: Visualize real-time sensor data from your Azure IoT hub in a web application
15
15
16
16
In this article, you learn how to visualize real-time sensor data that your IoT hub receives with a Node.js web app running on your local computer. After running the web app locally, you can host the web app in Azure App Service.
:::image type="content" source="./media/iot-hub-live-data-visualization-in-web-apps/1_iot-hub-end-to-end-diagram.png" alt-text="Diagram that shows end-to-end flow of data visualization.":::
20
19
21
20
## Prerequisites
22
21
@@ -30,7 +29,7 @@ The web application sample for this tutorial is written in Node.js. The steps in
30
29
31
30
* A simulated device that sends telemetry messages to your IoT hub. Use the [Raspberry Pi online simulator](raspberry-pi-get-started.md) to get a simulated device that sends temperature data to IoT Hub.
32
31
33
-
*[Node.js](https://nodejs.org) version 14 or later. To check your node version run `node --version`.
32
+
*[Node.js](https://nodejs.org) version 14 or later. To check your Node.js version run `node --version`.
34
33
35
34
*[Git](https://www.git-scm.com/downloads).
36
35
@@ -45,7 +44,6 @@ Run the following command to add a consumer group to the built-in endpoint of yo
45
44
```azurecli-interactive
46
45
az iot hub consumer-group create --hub-name YOUR_IOT_HUB_NAME --name YOUR_CONSUMER_GROUP_NAME
47
46
```
48
-
49
47
Note down the name you choose, you need it later in this tutorial.
50
48
51
49
## Get a service connection string for your IoT hub
@@ -74,7 +72,7 @@ Download or clone the web app sample from GitHub: [web-apps-node-iot-hub-data-vi
74
72
75
73
On your development machine, navigate to the **web-apps-node-iot-hub-data-visualization** directory, then open the web app in your favorite editor. The following shows the file structure viewed in Visual Studio Code:
76
74
77
-
75
+
:::image type="content" source="./media/iot-hub-live-data-visualization-in-web-apps/web-app-files.png" alt-text="Screenshot that shows the web app file structure, with four files highlighted.":::
78
76
79
77
Take a moment to examine the following files:
80
78
@@ -110,7 +108,7 @@ set EventHubConsumerGroup=YOUR_CONSUMER_GROUP_NAME
110
108
npm start
111
109
```
112
110
113
-
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:
111
+
3. You should see output in the console that indicates that the web app successfully connected to your IoT hub and is listening on port 3000:
114
112
115
113
:::image type="content" source="./media/iot-hub-live-data-visualization-in-web-apps/web-app-console-start.png" alt-text="Screenshot showing the web app sample successfully running in the console.":::
116
114
@@ -129,7 +127,7 @@ You should also see output in the console that shows the messages that your web
129
127
130
128
## Host the web app in App Service
131
129
132
-
The [Azure App Service](../app-service/overview.md) provides a platform as a service (PAAS) for hosting web applications. Web applications hosted in App Service can benefit from powerful Azure features like security, load balancing, and scalability as well as Azure and partner DevOps solutions like continuous deployment, package management, and so on. App Service supports web applications developed in many popular languages and deployed on Windows or Linux infrastructure.
130
+
The [Azure App Service](../app-service/overview.md) provides a platform as a service (PAAS) for hosting web applications. Web applications hosted in App Service can benefit from Azure features like security, load balancing, and scalability. Web applications can also benefit from Azure and partner DevOps solutions like continuous deployment, package management, and so on. App Service supports web applications developed in many popular languages and deployed on Windows or Linux infrastructure.
133
131
134
132
In this section, you provision a web app in App Service and deploy your code to it by using Azure CLI commands. You can find details of the commands used in the [az webapp](/cli/azure/webapp) documentation.
135
133
@@ -141,10 +139,10 @@ In this section, you provision a web app in App Service and deploy your code to
141
139
az appservice plan create --name NEW_NAME_FOR_YOUR_APP_SERVICE_PLAN --resource-group YOUR_RESOURCE_GROUP_NAME --sku FREE
142
140
```
143
141
144
-
2. Use the [az webapp create](/cli/azure/webapp#az-webapp-create) command to provision a web app in your App Service plan. The `--deployment-local-git` parameter enables the web app code to be uploaded and deployed from a Git repository on your local machine. Your web app name must be globally unique and can contain upper and lower case letters, numbers, and hyphens. Be sure to specify Node version 14 or later for the `--runtime` parameter, depending on the version of the Node.js runtime you're using. You can use the `az webapp list-runtimes` command to get a list of supported runtimes.
142
+
2. Use the [az webapp create](/cli/azure/webapp#az-webapp-create) command to provision a web app in your App Service plan. The `--deployment-local-git` parameter enables the web app code to be uploaded and deployed from a Git repository on your local machine. Your web app name must be globally unique and can contain upper and lower case letters, numbers, and hyphens. Be sure to specify Node.js version 16 or later for the `--runtime` parameter, depending on the version of the Node.js runtime you're using. You can use the `az webapp list-runtimes` command to get a list of supported runtimes.
3. Use the [az webapp config appsettings set](/cli/azure/webapp/config/appsettings#az-webapp-config-appsettings-set) command to add application settings for the environment variables that specify the IoT hub connection string and the Event hub consumer group. Individual settings are space-delimited in the `-settings` parameter. Use the service connection string for your IoT hub and the consumer group you created previously in this tutorial.
@@ -160,7 +158,7 @@ In this section, you provision a web app in App Service and deploy your code to
160
158
az webapp update -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --https-only true
161
159
```
162
160
163
-
5. To deploy the code to App Service, you use [user-level deployment credentials](../app-service/deploy-configure-credentials.md). Your user-level deployment credentials are different from your Azure credentials and are used for Git local and FTP deployments to a web app. Once set, they're valid across all of your App Service apps in all subscriptions in your Azure account. If you've previously set user-level deployment credentials, you can use them.
161
+
5. To deploy the code to App Service, you use [user-level deployment credentials](../app-service/deploy-configure-credentials.md). Your user-level deployment credentials are different from your Azure credentials and are used for Git local and FTP deployments to a web app. Once set, they're valid across all of your App Service apps in all subscriptions in your Azure account. If you previously set user-level deployment credentials, you can use them.
164
162
165
163
If you haven't previously set user-level deployment credentials or you can't remember your password, run the [az webapp deployment user set](/cli/azure/webapp/deployment/user#az-webapp-deployment-user-set) command. Your deployment user name must be unique within Azure, and it must not contain the ‘\@’ symbol for local Git pushes. When you're prompted, enter and confirm your new password. The password must be at least eight characters long, with two of the following three elements: letters, numbers, and symbols.
166
164
@@ -215,25 +213,25 @@ If you come across any issues with this sample, try the steps in the following s
215
213
216
214
* In the browser, open the developer tools (in many browsers the F12 key opens it), and find the console. Look for any warnings or errors printed there.
217
215
218
-
* You can debug client-side script in /js/chat-device-data.js.
216
+
* You can debug client-side script in /js/chart-device-data.js.
219
217
220
218
### Local website issues
221
219
222
-
* Watch the output in the window where you launched node for console output.
220
+
* Watch the output in the window where you launched Node.js for console output.
223
221
224
-
* Debug the server code, specifically server.js and /scripts/event-hub-reader.js.
222
+
* Debug the server code, specifically code in server.js and /scripts/event-hub-reader.js.
225
223
226
224
### Azure App Service issues
227
225
228
226
* In Azure portal, go to your web app. Under **Monitoring** in the left pane, select **App Service logs**. Turn **Application Logging (File System)** to on, set **Level** to Error, and then select **Save**. Then open **Log stream** (under **Monitoring**).
229
227
230
-
* From your web app in Azure portal, under **Development Tools** select **Console** and validate node and npm versions with `node -v` and `npm -v`.
228
+
* From your web app in Azure portal, under **Development Tools** select **Console** and validate Node.js and npm versions with `node -v` and `npm -v`.
231
229
232
-
* If you see an error about not finding a package, you may have run the steps out of order. When the site is deployed (with `git push`) the app service runs `npm install`, which runs based on the current version of node it has configured. If that is changed in configuration later, you need to make a meaningless change to the code and push again.
230
+
* If you see an error about not finding a package, you might have run the steps out of order. When the site is deployed (with `git push`) the app service runs `npm install`, which runs based on the currently configured version of Node.js. If that is changed in configuration later, you need to make a meaningless change to the code and push again.
233
231
234
232
## Next steps
235
233
236
-
You've successfully used your web app to visualize real-time sensor data from your IoT hub.
234
+
You successfully used your web app to visualize real-time sensor data from your IoT hub.
237
235
238
236
For another way to interact with data from Azure IoT Hub, see the following tutorial:
Copy file name to clipboardExpand all lines: articles/iot-hub/troubleshoot-error-codes.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -128,8 +128,8 @@ This error can occur because the [SAS token used to connect to IoT Hub](iot-hub-
128
128
129
129
Some other possibilities include:
130
130
131
-
* The device lost underlying network connectivity longer than the [MQTT keep-alive](../iot/iot-mqtt-connect-to-iot-hub.md#default-keep-alive-time-out), resulting in a remote idle timeout. The MQTT keep-alive setting can be different per device.
132
-
* The device sent a TCP/IP-level reset but didn't send an application-level `MQTT DISCONNECT`. Basically, the device abruptly closed the underlying socket connection. Sometimes, this issue is caused by bugs in older versions of the Azure IoT SDK.
131
+
* The device lost underlying network connectivity longer than the [MQTT keep-alive](../iot/iot-mqtt-connect-to-iot-hub.md#default-keep-alive-time-out), resulting in a remote idle time-out. The MQTT keep-alive setting can be different per device.
132
+
* The device sent a TCP/IP-level reset but didn't send an application-level `MQTT DISCONNECT`. Basically, the device abruptly closed the underlying socket connection. Sometimes, bugs in older versions of the Azure IoT SDK might cause this issue.
133
133
* The device side application crashed.
134
134
135
135
Or, IoT Hub might be experiencing a transient issue. For more information, see [500xxx Internal errors](#500xxx-internal-errors).
0 commit comments