Självstudie: Visualisera sensordata i realtid från din Azure IoT-hubb i ett webbprogram

Artikel
03/05/2024

I den här artikeln får du lära dig hur du visualiserar sensordata i realtid som din IoT-hubb tar emot med en Node.js webbapp som körs på den lokala datorn. När du har kört webbappen lokalt kan du vara värd för webbappen i Azure App Service.

End-to-end diagram

Förutsättningar

Webbprogramexemplet för den här självstudien är skrivet i Node.js. Stegen i den här artikeln förutsätter en Windows-utvecklingsdator. Men du kan också utföra de här stegen på ett Linux-system i önskat gränssnitt.

En Azure-prenumeration. Om du inte har någon Azure-prenumeration kan du skapa ett kostnadsfritt konto innan du börjar.
En IoT-hubb i din Azure-prenumeration. Om du inte har någon hubb ännu kan du följa stegen för att skapa en IoT-hubb med hjälp av CLI eller Azure-portalen.
En enhet som är registrerad i din IoT-hubb. Om du inte har registrerat en enhet än registrerar du en i Azure-portalen.
En simulerad enhet som skickar telemetrimeddelanden till din IoT-hubb. Använd Raspberry Pi-onlinesimulatorn för att hämta en simulerad enhet som skickar temperaturdata till IoT Hub.
Node.js version 14 eller senare. Kontrollera nodversionen genom att köra node --version.
Git.

Använd Bash-miljön i Azure Cloud Shell. Mer information finns i Snabbstart för Bash i Azure Cloud Shell.
Om du föredrar att köra CLI-referenskommandon lokalt installerar du Azure CLI. Om du kör i Windows eller macOS kan du köra Azure CLI i en Docker-container. Mer information finns i Så här kör du Azure CLI i en Docker-container.
- Om du använder en lokal installation loggar du in på Azure CLI med hjälp av kommandot az login. Slutför autentiseringsprocessen genom att följa stegen som visas i terminalen. Andra inloggningsalternativ finns i Logga in med Azure CLI.
- När du uppmanas att installera Azure CLI-tillägget vid första användningen. Mer information om tillägg finns i Använda tillägg med Azure CLI.
- Kör az version om du vill hitta versionen och de beroende bibliotek som är installerade. Om du vill uppgradera till den senaste versionen kör du az upgrade.

Lägga till en konsumentgrupp i din IoT-hubb

Konsumentgrupper tillhandahåller oberoende vyer i händelseströmmen som gör det möjligt för appar och Azure-tjänster att självständigt använda data från samma Event Hubs-slutpunkt. I det här avsnittet lägger du till en konsumentgrupp i din IoT Hubs inbyggda slutpunkt som webbappen använder för att läsa data.

Kör följande kommando för att lägga till en konsumentgrupp i den inbyggda slutpunkten för din IoT-hubb:

az iot hub consumer-group create --hub-name YOUR_IOT_HUB_NAME --name YOUR_CONSUMER_GROUP_NAME

Anteckna namnet du väljer. Du behöver det senare i den här självstudien.

Hämta en tjänst anslutningssträng för din IoT-hubb

IoT-hubbar skapas med flera standardåtkomstprinciper. En sådan princip är tjänstprincipen, som ger tillräcklig behörighet för att en tjänst ska kunna läsa och skriva IoT-hubbens slutpunkter. Kör följande kommando för att hämta en anslutningssträng för din IoT-hubb som följer tjänstprincipen:

az iot hub connection-string show --hub-name YOUR_IOT_HUB_NAME --policy-name service

Tjänsten anslutningssträng bör se ut ungefär som i följande exempel:

"HostName=YOUR_IOT_HUB_NAME.azure-devices.net;SharedAccessKeyName=service;SharedAccessKey=YOUR_SHARED_ACCESS_KEY"

Anteckna tjänsten anslutningssträng, du behöver den senare i den här självstudien.

Ladda ned webbappen från GitHub

Ladda ned eller klona webbappexemplet från GitHub: web-apps-node-iot-hub-data-visualization.

Granska webbappens kod

På utvecklingsdatorn navigerar du till katalogen web-apps-node-iot-hub-data-visualization och öppnar sedan webbappen i din favoritredigerare. Följande visar filstrukturen som visas i Visual Studio Code:

Screenshot that shows the web app file structure.

Ta en stund att undersöka följande filer:

server.js är ett skript på tjänstsidan som initierar webbsocket och Event Hubs-omslutningsklassen. Det ger ett återanrop till event hubs-omslutningsklassen som klassen använder för att sända inkommande meddelanden till webbsocketen.
scripts/event-hub-reader.js är ett skript på tjänstsidan som ansluter till IoT-hubbens inbyggda slutpunkt med den angivna anslutningssträng och konsumentgruppen. Den extraherar DeviceId och EnqueuedTimeUtc från metadata på inkommande meddelanden och vidarebefordrar sedan meddelandet med hjälp av motringningsmetoden som registrerats av server.js.
public/js/chart-device-data.js är ett skript på klientsidan som lyssnar på webbsocket, håller reda på varje DeviceId och lagrar de senaste 50 punkterna inkommande data för varje enhet. Den binder sedan de valda enhetsdata till diagramobjektet.
public/index.html hanterar användargränssnittslayouten för webbsidan och refererar till nödvändiga skript för logik på klientsidan.

Konfigurera miljövariabler för webbappen

För att läsa data från din IoT-hubb behöver webbappen din IoT-hubbs anslutningssträng och namnet på konsumentgruppen som den ska läsa igenom. Den hämtar dessa strängar från processmiljön i följande rader i server.js:

const iotHubConnectionString = process.env.IotHubConnectionString;
if (!iotHubConnectionString) {
  console.error(`Environment variable IotHubConnectionString must be specified.`);
  return;
}
console.log(`Using IoT Hub connection string [${iotHubConnectionString}]`);

const eventHubConsumerGroup = process.env.EventHubConsumerGroup;
console.log(eventHubConsumerGroup);
if (!eventHubConsumerGroup) {
  console.error(`Environment variable EventHubConsumerGroup must be specified.`);
  return;
}
console.log(`Using event hub consumer group [${eventHubConsumerGroup}]`);

Ange miljövariablerna i kommandofönstret med följande kommandon. Ersätt platshållarvärdena med tjänsten anslutningssträng för din IoT-hubb och namnet på den konsumentgrupp som du skapade tidigare. Citera inte strängarna.

set IotHubConnectionString=YOUR_IOT_HUB_CONNECTION_STRING
set EventHubConsumerGroup=YOUR_CONSUMER_GROUP_NAME

Kör webbappen

Kontrollera att enheten körs och skickar data.
I kommandofönstret kör du följande rader för att ladda ned och installera refererade paket och starta webbplatsen:
```
npm install
npm start
```
Du bör se utdata i konsolen som anger att webbappen har anslutits till din IoT-hubb och lyssnar på port 3000:

Öppna en webbsida för att se data från din IoT-hubb

Öppna en webbläsare för http://localhost:3000.

I listan Välj en enhet väljer du enheten för att se en körningsritning av de senaste 50 datapunkterna för temperatur och luftfuktighet som skickats av enheten till din IoT-hubb.

Screenshot of the web app running on localhost, showing real-time temperature and humidity.

Du bör också se utdata i konsolen som visar de meddelanden som webbappen sänder till webbläsarklienten:

Screenshot of the web app output on console.

Värd för webbappen i App Service

Azure App Service tillhandahåller en plattform som en tjänst (PAAS) för att vara värd för webbprogram. Webbprogram som finns i App Service kan dra nytta av kraftfulla Azure-funktioner som säkerhet, belastningsutjämning och skalbarhet samt Azure- och Partner DevOps-lösningar som kontinuerlig distribution, pakethantering och så vidare. App Service har stöd för webbprogram som utvecklats på många populära språk och distribuerats i Windows- eller Linux-infrastruktur.

I det här avsnittet etablerar du en webbapp i App Service och distribuerar koden till den med hjälp av Azure CLI-kommandon. Du hittar information om de kommandon som används i az webapp-dokumentationen.

En App Service-plan definierar en uppsättning beräkningsresurser för en app som ska köras i App Service. I den här självstudien använder vi nivån Utvecklare/Kostnadsfri för att vara värd för webbappen. Med den kostnadsfria nivån körs din webbapp på delade Windows-resurser med andra App Service-appar, inklusive appar för andra kunder. Azure erbjuder även App Service-planer för att distribuera webbappar på Linux-beräkningsresurser. Du kan hoppa över det här steget om du redan har en App Service-plan som du vill använda.

Om du vill skapa en App Service-plan med den kostnadsfria Windows-nivån använder du kommandot az appservice plan create . Använd samma resursgrupp som din IoT-hubb finns i. Namnet på tjänstplanen kan innehålla versaler och gemener, siffror och bindestreck.
```
az appservice plan create --name NEW_NAME_FOR_YOUR_APP_SERVICE_PLAN --resource-group YOUR_RESOURCE_GROUP_NAME --sku FREE
```
Använd kommandot az webapp create för att etablera en webbapp i din App Service-plan. Parametern --deployment-local-git gör att webbappkoden kan laddas upp och distribueras från en Git-lagringsplats på den lokala datorn. Webbappens namn måste vara globalt unikt och kan innehålla versaler och gemener, siffror och bindestreck. Se till att ange Node version 14 eller senare för parametern --runtime , beroende på vilken version av Node.js körning du använder. Du kan använda az webapp list-runtimes kommandot för att hämta en lista över körningsmiljöer som stöds.
```
az webapp create -n NEW_NAME_FOR_YOUR_WEB_APP -g YOUR_RESOURCE_GROUP_NAME -p YOUR_APP_SERVICE_PLAN_NAME --runtime "NODE:14LTS" --deployment-local-git
```
Använd kommandot az webapp config appsettings set för att lägga till programinställningar för miljövariablerna som anger IoT Hub-anslutningssträng och konsumentgruppen Händelsehubb. Enskilda inställningar är utrymmesavgränsade i parametern -settings . Använd tjänsten anslutningssträng för din IoT-hubb och konsumentgruppen som du skapade tidigare i den här självstudien.
```
az webapp config appsettings set -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --settings EventHubConsumerGroup=YOUR_CONSUMER_GROUP_NAME IotHubConnectionString="YOUR_IOT_HUB_CONNECTION_STRING"
```

Aktivera Web Sockets-protokollet för webbappen och ange att webbappen endast ska ta emot HTTPS-begäranden (HTTP-begäranden omdirigeras till HTTPS).

az webapp config set -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --web-sockets-enabled true
az webapp update -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --https-only true

Om du vill distribuera koden till App Service använder du autentiseringsuppgifter för distribution på användarnivå. Dina autentiseringsuppgifter för distribution på användarnivå skiljer sig från dina Azure-autentiseringsuppgifter och används för lokala Git- och FTP-distributioner till en webbapp. När de har angetts är de giltiga för alla dina App Service-appar i alla prenumerationer i ditt Azure-konto. Om du tidigare har angett autentiseringsuppgifter för distribution på användarnivå kan du använda dem.

Om du inte tidigare har angett autentiseringsuppgifter för distribution på användarnivå eller om du inte kommer ihåg lösenordet kör du kommandot az webapp deployment user set . Distributionsanvändarnamnet måste vara unikt i Azure och får inte innehålla @-symbolen för lokala Git-pushar. När du uppmanas att ange och bekräfta ditt nya lösenord. Lösenordet måste vara minst åtta tecken långt, med två av följande tre element: bokstäver, siffror och symboler.
```
az webapp deployment user set --user-name NAME_FOR_YOUR_USER_CREDENTIALS
```

Hämta Git-URL:en som ska användas för att push-överföra koden till App Service.

az webapp deployment source config-local-git -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME

Lägg till en fjärranslutning till din klon som refererar till Git-lagringsplatsen för webbappen i App Service. GIT_ENDPOINT_URL Ersätt platshållaren med url:en som returnerades i föregående steg. Kontrollera att du är i exempelkatalogen, web-apps-code-iot-hub-data-visualization och kör sedan följande kommando i kommandofönstret.
```
git remote add webapp GIT_ENDPOINT_URL
```
Om du vill distribuera koden till App Service anger du följande kommando i kommandofönstret. Kontrollera att du är i exempelkatalogen web-apps-code-iot-hub-data-visualization. Om du uppmanas att ange autentiseringsuppgifter anger du de autentiseringsuppgifter för distribution på användarnivå som du skapade i steg 5. Skicka till huvudgrenen för App Service-fjärrtjänsten.
```
git push webapp master:master
```

Förloppet för distributionsuppdateringarna i kommandofönstret. En lyckad distribution avslutas med rader som liknar följande utdata:

remote:
remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Deployment successful.
To https://contoso-web-app-3.scm.azurewebsites.net/contoso-web-app-3.git
6b132dd..7cbc994  master -> master

Kör följande kommando för att fråga efter tillståndet för webbappen och kontrollera att den körs:
```
az webapp show -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --query state
```
Gå till https://<your web app name>.azurewebsites.net i en webbläsare. En webbsida som liknar den du såg när du körde webbappen lokalt. Förutsatt att enheten kör och skickar data bör du se en körningsritning av de 50 senaste temperatur- och luftfuktighetsavläsningarna som skickats av enheten.

Felsökning

Om du stöter på problem med det här exemplet kan du prova stegen i följande avsnitt. Om du fortfarande har problem kan du skicka feedback till oss längst ned i den här artikeln.

Klientproblem

Om en enhet inte visas i listan eller om ingen graf ritas kontrollerar du att enhetskoden körs på enheten.
Öppna utvecklarverktygen i webbläsaren (I många webbläsare öppnar F12-nyckeln den) och letar upp konsolen. Leta efter varningar eller fel som skrivs ut där.
Du kan felsöka skript på klientsidan i /js/chat-device-data.js.

Problem med lokal webbplats

Titta på utdata i fönstret där du startade noden för konsolutdata.
Felsöka serverkoden, särskilt server.js och /scripts/event-hub-reader.js.

Problem med Azure App Service

Gå till din webbapp i Azure-portalen. Under Övervakning i den vänstra rutan väljer du App Service-loggar. Aktivera Programloggning (filsystem), ange Nivå till Fel och välj sedan Spara. Öppna sedan Loggström (under Övervakning).
Från din webbapp i Azure-portalen går du till Utvecklingsverktyg och väljer Konsol och verifierar nod- och npm-versioner med node -v och npm -v.
Om du ser ett fel om att inte hitta ett paket kan du ha kört stegen i fel ordning. När webbplatsen distribueras (med git push) körs npm installapptjänsten , som körs baserat på den aktuella versionen av noden som den har konfigurerat. Om det ändras i konfigurationen senare måste du göra en meningslös ändring av koden och push-överföra igen.

Nästa steg

Du har använt webbappen för att visualisera sensordata i realtid från din IoT-hubb.

Ett annat sätt att interagera med data från Azure IoT Hub finns i följande självstudie:

Använda Logic Apps för fjärrövervakning och aviseringar

Share via