Wizualizowanie danych z czujników w czasie rzeczywistym z usługi Azure IoT hub w aplikacji sieci webVisualize real-time sensor data from your Azure IoT hub in a web application

Diagram end-to-end

Uwaga

Przed rozpoczęciem tego samouczka, wykonaj symulatora w trybie online urządzenia Raspberry Pi samouczka lub jednym z samouczków urządzenia; na przykład Raspberry Pi w środowisku node.js.Before you start this tutorial, complete the Raspberry Pi online simulator tutorial or one of the device tutorials; for example, Raspberry Pi with node.js. W tych artykułach skonfiguruj swoje urządzenia Azure IoT i Centrum IoT hub i wdrożysz przykładową aplikację do uruchamiania na urządzeniu z systemem.In these articles, you set up your Azure IoT device and IoT hub, and you deploy a sample application to run on your device. Aplikacja wysyła dane zebrane czujnika do usługi IoT hub.The application sends collected sensor data to your IoT hub.

Omawiane zagadnieniaWhat you learn

W tym samouczku dowiesz się, jak wizualizować dane czujników w czasie rzeczywistym usługi IoT hub odbierze za pomocą aplikacji internetowej node.js uruchomionej na komputerze lokalnym.In this tutorial, 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. Po uruchomieniu aplikacji sieci web lokalnie, można opcjonalnie wykonaj kroki, aby hostować aplikację sieci web w usłudze Azure App Service.After running the web app locally, you can optionally follow steps to host the web app in Azure App Service. Jeśli chcesz wypróbować jej możliwości do wizualizacji danych w usłudze IoT hub za pomocą usługi Power BI, zobacz usługa Power BI umożliwia wizualizowanie danych z czujników w czasie rzeczywistym z usługi Azure IoT Hub.If you want to try to visualize the data in your IoT hub by using Power BI, see Use Power BI to visualize real-time sensor data from Azure IoT Hub.

Co należy zrobićWhat you do

  • Dodaj grupę odbiorców do usługi IoT hub, który aplikacja sieci web będzie używany do odczytu danych z czujnikówAdd a consumer group to your IoT hub that the web application will use to read sensor data
  • Pobieranie kodu aplikacji internetowej z usługi GitHubDownload the web app code from GitHub
  • Badanie kodu aplikacji sieci webExamine the web app code
  • Konfigurowanie zmiennych środowiskowych do przechowywania artefaktów wymagane przez aplikację sieci web w Centrum IoT HubConfigure environment variables to hold the IoT Hub artifacts needed by your web app
  • Uruchamianie aplikacji sieci web na komputerze deweloperskimRun the web app on your development machine
  • Otwórz stronę sieci web, aby wyświetlić dane w czasie rzeczywistym temperatury i wilgotności z usługi IoT hubOpen a web page to see real-time temperature and humidity data from your IoT hub
  • (Opcjonalnie) Użyj wiersza polecenia platformy Azure do hostowania aplikacji sieci web w usłudze Azure App Service(Optional) Use Azure CLI to host your web app in Azure App Service

Co jest potrzebneWhat you need

  • Wykonaj symulatora w trybie online urządzenia Raspberry Pi samouczka lub jednym z samouczków urządzenia; na przykład Raspberry Pi w środowisku node.js.Complete the Raspberry Pi online simulator tutorial or one of the device tutorials; for example, Raspberry Pi with node.js. Obejmują one następujące wymagania:These cover the following requirements:

    • Aktywna subskrypcja platformy AzureAn active Azure subscription
    • Centrum Iot hub w ramach Twojej subskrypcjiAn Iot hub under your subscription
    • Aplikacja kliencka, która wysyła komunikaty do Centrum Iot hubA client application that sends messages to your Iot hub
  • Pobierz narzędzia GitDownload Git

  • W tym artykule założono w nim komputera deweloperskiego z systemem Windows; Jednakże, możesz łatwo te kroki można wykonać w systemie Linux w powłoce preferowany.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.

Używanie usługi Azure Cloud ShellUse Azure Cloud Shell

Platforma Azure obsługuje Azure Cloud Shell, interaktywne środowisko powłoki, z którego można korzystać w przeglądarce.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell pozwala korzystać bash z usług platformy PowerShell Azure lub do pracy z tymi usługami.Cloud Shell lets you use either bash or PowerShell to work with Azure services. Możesz użyć wstępnie zainstalowanych poleceń Cloud Shell, aby uruchomić kod w tym artykule bez konieczności instalowania niczego w środowisku lokalnym.You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Aby uruchomić Azure Cloud Shell:To launch Azure Cloud Shell:

OpcjaOption Przykład/linkExample/Link
Wybierz pozycję Wypróbuj w prawym górnym rogu bloku kodu.Select Try It in the upper-right corner of a code block. Wybranie przycisku Wypróbuj nie powoduje automatycznego skopiowania kodu do Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Przykład try dla Azure Cloud Shell
Przejdź do https://shell.azure.com lub wybierz przycisk Uruchom Cloud Shell , aby otworzyć Cloud Shell w przeglądarce.Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. Uruchom Cloud Shell w nowym oknieLaunch Cloud Shell in a new window
Wybierz przycisk Cloud Shell w prawym górnym pasku menu w Azure Portal.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Przycisk Cloud Shell w witrynie Azure Portal

Aby uruchomić kod w tym artykule w Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Otwórz usługę Cloud Shell.Open Cloud Shell.
  2. Aby skopiować kod, wybierz przycisk Kopiuj w bloku kodu.Select the Copy button on a code block to copy the code.
  3. Wklej kod do sesji Cloud Shell przy użyciu kombinacji klawiszy CTRL+SHIFT+v w systemach Windows i Linux lub cmd+SHIFT+v w macOS.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.
  4. Naciśnij klawisz Enter , aby uruchomić kod.Press Enter to run the code.

Uruchom następujące polecenie, aby dodać rozszerzenia usługi Microsoft Azure IoT dla interfejsu wiersza polecenia platformy Azure do swojego wystąpienia usługi Cloud Shell.Run the following command to add the Microsoft Azure IoT Extension for Azure CLI to your Cloud Shell instance. Rozszerzenia IOT dodaje określone polecenia usługi IoT Hub, IoT Edge i usługi aprowizacji urządzeń IoT (DPS) do wiersza polecenia platformy Azure.The IOT Extension adds IoT Hub, IoT Edge, and IoT Device Provisioning Service (DPS) specific commands to Azure CLI.

az extension add --name azure-cli-iot-ext

Dodaj grupę odbiorców do usługi IoT hubAdd a consumer group to your IoT hub

Grupy konsumentów zapewnia niezależne widoki do strumienia zdarzeń, które umożliwiają aplikacjom i usługom platformy Azure niezależnie korzystają z tego samego punktu końcowego Centrum zdarzeń danych.Consumer groups provide independent views into the event stream that enable apps and Azure services to independently consume data from the same Event Hub endpoint. W tej sekcji dodajesz grupy odbiorców do usługi IoT hub wbudowany punkt końcowy, który aplikacja sieci web będzie używać do odczytywania danych z.In this section, you add a consumer group to your IoT hub's built-in endpoint that the web app will use to read data from.

Uruchom następujące polecenie, aby dodać grupę odbiorców do wbudowany punkt końcowy usługi IoT Hub:Run the following command to add a consumer group to the built-in endpoint of your IoT hub:

az iot hub consumer-group create --hub-name YourIoTHubName --name YourConsumerGroupName

Uwaga w dół do wybranej nazwy, będzie on potrzebny w dalszej części tego samouczka.Note down the name you choose, you'll need it later in this tutorial.

Pobieranie parametrów połączenia usługi dla Centrum IoT hubGet a service connection string for your IoT hub

Centra IoT Hub są tworzone za pomocą kilku domyślne zasady dostępu.IoT hubs are created with several default access policies. Takie zasady jest usługi zasad, które dostarcza wystarczających uprawnień dla usługi w celu odczytu i zapisu punktów końcowych usługi IoT hub.One such policy is the service policy, which provides sufficient permissions for a service to read and write the IoT hub's endpoints. Uruchom następujące polecenie, aby pobrać parametry połączenia dla usługi IoT hub, która jest zgodna z zasadami usługi:Run the following command to get a connection string for your IoT hub that adheres to the service policy:

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

Parametry połączenia powinien wyglądać podobnie do następującego:The connection string should look similar to the following:

"HostName={YourIotHubName}.azure-devices.net;SharedAccessKeyName=service;SharedAccessKey={YourSharedAccessKey}"

Zanotuj parametry połączenia usługi będzie potrzebny w dalszej części tego samouczka.Note down the service connection string, you'll need it later in this tutorial.

Pobieranie aplikacji internetowej z usługi GitHubDownload the web app from GitHub

Otwórz okno polecenia i wprowadź następujące polecenia, aby pobrać próbkę z usługi GitHub, a następnie przejdź do katalogu, przykładowe:Open a command window, and enter the following commands to download the sample from GitHub and change to the sample directory:

git clone https://github.com/Azure-Samples/web-apps-node-iot-hub-data-visualization.git
cd web-apps-node-iot-hub-data-visualization

Badanie kodu aplikacji sieci webExamine the web app code

Z katalogu web-apps-node-iot-hub-data-visualization Otwórz aplikację sieci web w ulubionym edytorze.From the web-apps-node-iot-hub-data-visualization directory, open the web app in your favorite editor. Poniżej przedstawiono strukturę pliku, wyświetlane w programie VS Code:The following shows the file structure viewed in VS Code:

Struktura plików aplikacji sieci Web

Poświęć chwilę, aby sprawdzić następujące pliki:Take a moment to examine the following files:

  • Server.js skrypt po stronie usługi, która inicjuje gniazda sieci web i klasa otoki Centrum zdarzeń.Server.js is a service-side script that initializes the web socket and the Event Hub wrapper class. Umożliwia wywołanie zwrotne do klasy otoki Centrum zdarzeń, która używa klasy w celu emisji komunikatów przychodzących dla gniazda sieci web.It provides a callback to the Event Hub wrapper class that the class uses to broadcast incoming messages to the web socket.

  • Zdarzenia hub-reader.js jest skryptu po stronie usługi, który nawiązuje połączenie z wbudowanego punktu końcowego Centrum IoT przy użyciu grupy ciągu i konsumentów określone połączenie.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. Go wyodrębnia DeviceId i EnqueuedTimeUtc z metadanych dla wiadomości przychodzących, a następnie przekazuje komunikat przy użyciu metody wywołania zwrotnego, zarejestrowanych przez server.js.It extracts the DeviceId and EnqueuedTimeUtc from metadata on incoming messages and then relays the message using the callback method registered by server.js.

  • Wykres — urządzenia — data.js to skrypt po stronie klienta, który nasłuchuje gniazda sieci web, przechowuje informacje o każdym DeviceId i przechowuje ostatnie 50 punkty danych przychodzących dla każdego urządzenia.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. Następnie powiąże dane wybranego urządzenia do obiektu wykresu.It then binds the selected device data to the chart object.

  • Index.HTML obsługuje układ interfejsu użytkownika dla strony sieci web i zawiera odwołania do wymaganymi skryptami logiki po stronie klienta.Index.html handles the UI layout for the web page and references the necessary scripts for client-side logic.

Konfigurowanie zmiennych środowiskowych dla aplikacji sieci webConfigure environment variables for the web app

Do odczytywania danych z usługi IoT hub, aplikacji sieci web wymaga parametrów połączenia Centrum IoT i nazwę grupy odbiorców, który powinni przeczytać za pośrednictwem.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. Pobiera te ciągi w środowisku procesu w następujących wierszach w server.js:It gets these strings from the process environment in the following lines in server.js:

const iotHubConnectionString = process.env.IotHubConnectionString;
const eventHubConsumerGroup = process.env.EventHubConsumerGroup;

W oknie polecenia za pomocą następujących poleceń, należy ustawić zmienne środowiskowe.Set the environment variables in your command window with the following commands. Zastąp wartości symboli zastępczych parametrami połączenia usługi dla Centrum IoT i nazwę grupy odbiorców, która została utworzona wcześniej.Replace the placeholder values with the service connection string for your IoT hub and the name of the consumer group you created previously. Nie oferty ciągi.Don't quote the strings.

set IotHubConnectionString=YourIoTHubConnectionString
set EventHubConsumerGroup=YourConsumerGroupName

Uruchamianie aplikacji sieci webRun the web app

  1. Upewnij się, że urządzenie działa i wysyłanie danych.Make sure that your device is running and sending data.

  2. W oknie wiersza polecenia Uruchom następujące wiersze, aby pobrać i zainstalować pakiety odwołania i uruchomić witrynę internetową:In the command window, run the following lines to download and install referenced packages and start the website:

    npm install
    npm start
    
  3. Powinny zostać wyświetlone dane wyjściowe w konsoli, która wskazuje, że aplikacja sieci web pomyślnie połączył się z Centrum IoT i nasłuchuje na porcie 3000: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:

    Aplikacja sieci Web, pracę w konsoli

Otwórz stronę sieci web, aby wyświetlić dane z usługi IoT hubOpen a web page to see data from your IoT hub

Otwórz w przeglądarce http://localhost:3000.Open a browser to http://localhost:3000.

W wybierz urządzenie wybierz swoje urządzenie, aby wyświetlić wykres uruchomionych 50 ostatnich temperatury i wilgotności punktów danych wysyłane przez urządzenie do Centrum IoT.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.

Wyświetlanie w czasie rzeczywistym temperatury i wilgotności strona aplikacji internetowej

Również powinny zostać wyświetlone dane wyjściowe w konsoli, która zawiera wiadomości, które rozgłasza aplikacji sieci web do przeglądarki klienta:You should also see output in the console that shows the messages that your web app is broadcasting to the browser client:

Aplikacja sieci Web, emisji dane wyjściowe w konsoli

Host aplikacji sieci web w usłudze App ServiceHost the web app in App Service

Funkcji Web Apps w usłudze Azure App Service zapewnia to platforma jako usługa (PAAS) do hostowania aplikacji sieci web.The Web Apps feature of Azure App Service provides a platform as a service (PAAS) for hosting web applications. Aplikacje sieci Web hostowaną w usłudze Azure App Service mogą korzystać z zaawansowanych funkcji platformy Azure, takich jak dodatkowe zabezpieczenia, równoważenie obciążenia, i skalowalności, jak również platformy Azure i jej partnerów DevOps rozwiązań, takich jak ciągłe wdrażanie, Zarządzanie pakietami i tak dalej.Web applications hosted in Azure App Service can benefit from powerful Azure features like additional security, load balancing, and scalability as well as Azure and partner DevOps solutions like continuous deployment, package management, and so on. Usługa Azure App Service obsługuje aplikacje sieci web opracowanych w wielu popularnych języków i wdrożone w infrastrukturze Windows lub Linux.Azure App Service supports web applications developed in many popular languages and deployed on Windows or Linux infrastructure.

W tej sekcji Inicjowanie obsługi administracyjnej aplikacji sieci web, w usłudze App Service i wdrożyć kod za pomocą poleceń interfejsu wiersza polecenia platformy Azure.In this section, you provision a web app in App Service and deploy your code to it by using Azure CLI commands. Można znaleźć szczegółowe informacje o polecenia używane w az webapp dokumentacji.You can find details of the commands used in the az webapp documentation. Przed rozpoczęciem upewnij się, że ukończono kroki, aby Dodaj grupę zasobów do usługi IoT hub, uzyskać parametry połączenia usługi IoT hub, i pobieranie aplikacji internetowej z usługi GitHub.Before starting, make sure you've completed the steps to add a resource group to your IoT hub, get a service connection string for your IoT hub, and download the web app from GitHub.

  1. Planu usługi App Service definiuje zestaw zasobów obliczeniowych dla aplikacji hostowanej w usłudze App Service do uruchomienia.An App Service plan defines a set of compute resources for an app hosted in App Service to run. W tym samouczku używamy warstwy Deweloper/bezpłatna do hostowania tej aplikacji sieci web.In this tutorial, we use the Developer/Free tier to host the web app. W ramach warstwy bezpłatna działa aplikacja sieci web ze współużytkowanych zasobów Windows z innymi aplikacjami usługi App Service, w tym aplikacje innych klientów.With the Free tier, your web app runs on shared Windows resources with other App Service apps, including apps of other customers. Usługa Azure również oferty planów usługi App Service do wdrażania aplikacji sieci web w systemie Linux zasoby obliczeniowe.Azure also offers App Service plans to deploy web apps on Linux compute resources. Można pominąć ten krok, jeśli masz już plan usługi App Service, do którego chcesz używać.You can skip this step if you already have an App Service plan that you want to use.

    Aby utworzyć plan usługi App Service, korzystając z bezpłatnej warstwy Windows, uruchom następujące polecenie.To create an App Service plan using the Windows free tier, run the following command. Użyj tej samej grupie zasobów, jest Centrum IoT hub.Use the same resource group your IoT hub is in. Nazwę planu usługi może zawierać górny i małe litery, cyfry i łączniki.Your service plan name can contain upper and lower case letters, numbers, and hyphens.

    az appservice plan create --name <app service plan name> --resource-group <your resource group name> --sku FREE
    
  2. Teraz aprowizować aplikację internetową w planie usługi App Service.Now provision a web app in your App Service plan. --deployment-local-git Parametr umożliwia kodu aplikacji sieci web, przekazać i wdrożyć z repozytorium Git na komputerze lokalnym.The --deployment-local-git parameter enables the web app code to be uploaded and deployed from a Git repository on your local machine. Nazwa aplikacji internetowej musi być globalnie unikatowa i może zawierać górny i małe litery, cyfry i łączniki.Your web app name must be globally unique and can contain upper and lower case letters, numbers, and hyphens.

    az webapp create -n <your web app name> -g <your resource group name> -p <your app service plan name> --deployment-local-git
    
  3. Teraz dodaj ustawienia aplikacji, zmienne środowiskowe, które określają parametry połączenia Centrum IoT i grupa konsumentów Centrum zdarzeń.Now add Application Settings for the environment variables that specify the IoT hub connection string and the Event hub consumer group. Poszczególne ustawienia są spacjami w -settings parametru.Individual settings are space delimited in the -settings parameter. Użyj parametrów połączenia usługi dla Centrum IoT i grupy odbiorców, która została utworzona wcześniej w tym samouczku.Use the service connection string for your IoT hub and the consumer group you created previously in this tutorial. Nie oferty wartości.Don't quote the values.

    az webapp config appsettings set -n <your web app name> -g <your resource group name> --settings EventHubConsumerGroup=<your consumer group> IotHubConnectionString=<your IoT hub connection string>
    
  4. Włącz gniazda sieci Web protokołu dla aplikacji sieci web i ustaw aplikacji sieci web, aby otrzymać HTTPS żądań tylko (żądania HTTP są przekierowywane do protokołu HTTPS).Enable the Web Sockets protocol for the web app and set the web app to receive HTTPS requests only (HTTP requests are redirected to 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
    
  5. Aby wdrożyć kod w usłudze App Service, użyjesz usługi poświadczenia wdrażania na poziomie użytkownika.To deploy the code to App Service, you'll use your user-level deployment credentials. Poświadczenia wdrażania na poziomie użytkownika różni się od swoich poświadczeń platformy Azure i są używane do lokalnej usługi Git i FTP wdrożenia aplikacji sieci web.Your user-level deployment credentials are different from your Azure credentials and are used for Git local and FTP deployments to a web app. Po ustawieniu, są one prawidłowe dla wszystkich aplikacji usługi App Service w taki sposób, w przypadku wszystkich subskrypcji na Twoim koncie platformy Azure.Once set, they're valid across all of your App Service apps in all subscriptions in your Azure account. Jeśli już wcześniej ustawić poświadczenia wdrażania na poziomie użytkownika, można je.If you've previously set user-level deployment credentials, you can use them.

    Jeśli nie zostało wcześniej ustawione poświadczenia wdrażania na poziomie użytkownika lub nie pamiętasz hasła, uruchom następujące polecenie.If you haven't previously set user-level deployment credentials or you can't remember your password, run the following command. Nazwa użytkownika wdrożenia musi być unikatowa na platformie Azure i nie może zawierać "@" symboli dla wypycha lokalnego narzędzia Git.</span><span class="sxs-lookup">Your deployment user name must be unique within Azure, and it must not contain the ‘@’ symbol for local Git pushes. Po wyświetleniu monitu wprowadź i Potwierdź nowe hasło.When you're prompted, enter and confirm your new password. Hasło musi mieć co najmniej ośmiu znaków i zawierać dwa z następujących trzech elementów: litery, cyfry i symbole.The password must be at least eight characters long, with two of the following three elements: letters, numbers, and symbols.

    az webapp deployment user set --user-name <your deployment user name>
    
  6. Pobierz adres URL usługi Git służące do wypchnąć kod do usługi App Service.Get the Git URL to use to push your code up to App Service.

    az webapp deployment source config-local-git -n <your web app name> -g <your resource group name>
    
  7. Dodaj zdalną na klonie, który odwołuje się do repozytorium Git dla aplikacji sieci web w usłudze App Service.Add a remote to your clone that references the Git repository for the web app in App Service. Aby uzyskać <adres URL klonowania Git>, użyj adresu URL, w zwróconym w poprzednim kroku.For <Git clone URL>, use the URL returned in the previous step. Uruchom następujące polecenie w oknie polecenia.Run the following command in your command window.

    git remote add webapp <Git clone URL>
    
  8. Aby wdrożyć kod w usłudze App Service, wprowadź następujące polecenie w oknie polecenia.To deploy the code to App Service, enter the following command in your command window. Jeśli zostanie wyświetlony monit o poświadczenia, wprowadź poświadczenia wdrażania na poziomie użytkownika, które zostały utworzone w kroku 5.If you are prompted for credentials, enter the user-level deployment credentials that you created in step 5. Upewnij się, wypchnięciu do głównej gałęzi zdalnej usługi App Service.Make sure that you push to the master branch of the App Service remote.

    git push webapp master:master
    
  9. Postęp wdrażania zostanie zaktualizowana w oknie polecenia.The progress of the deployment will update in your command window. Pomyślne wdrożenie zakończy się wierszami podobnymi do następujących danych wyjściowych:A successful deployment will end with lines similar to the following output:

    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
    
  10. Uruchom następujące polecenie, aby zbadać stan aplikacji sieci web i upewnij się, że jest on uruchomiony:Run the following command to query the state of your web app and make sure it is running:

    az webapp show -n <your web app name> -g <your resource group name> --query state
    
  11. W przeglądarce przejdź do adresu https://<your web app name>.azurewebsites.net.Navigate to https://<your web app name>.azurewebsites.net in a browser. Strona internetowa podobna do jednego widoczny po uruchomieniu aplikacji sieci web lokalnie Wyświetla.A web page similar to the one you saw when you ran the web app locally displays. Przy założeniu, że urządzenie jest uruchomiony i wysyłanie danych, powinien zostać wyświetlony wykres uruchomionych 50 ostatnich temperatury i wilgotności odczytów wysyłane przez urządzenie.Assuming that your device is running and sending data, you should see a running plot of the 50 most recent temperature and humidity readings sent by the device.

Rozwiązywanie problemówTroubleshooting

Jeśli przejście na problemy z tego przykładu spróbuj wykonać kroki opisane w poniższych sekcjach.If you come across any issues with this sample, try the steps in the following sections. Jeśli nadal występują problemy, Wyślij do nas opinii na końcu tego tematu.If you still have problems, send us feedback at the bottom of this topic.

Problemy z klientemClient issues

  • Jeśli urządzenie nie ma na liście lub nie wykresu jest rysowana, upewnij się, że kod urządzenia jest uruchomiona na urządzeniu.If a device does not appear in the list, or no graph is being drawn, make sure the device code is running on your device.

  • W przeglądarce otwórz narzędzia deweloperskie (w wielu przeglądarkach naciśnięcie klawisza F12 klucz zostanie on otwarty) i Znajdź konsoli.In the browser, open the developer tools (in many browsers the F12 key will open it), and find the console. Odszukaj wszelkie ostrzeżenia lub błędy drukowane.Look for any warnings or errors printed there.

  • Można debugować skrypt po stronie klienta /js/chat-device-data.js.You can debug client-side script in /js/chat-device-data.js.

Problemy z lokalną witrynę sieci WebLocal website issues

  • Obejrzyj danych wyjściowych w oknie, w której został uruchomiony węzeł dla danych wyjściowych konsoli.Watch the output in the window where you launched node for console output.

  • Debugowanie kodu serwera, szczególnie plików server.js i /scripts/event-hub-reader.js.Debug the server code, specifically server.js and /scripts/event-hub-reader.js.

Problemy z usługi Azure App ServiceAzure App Service issues

  • W witrynie Azure portal przejdź do aplikacji sieci web.In Azure portal, go to your web app. W obszarze monitorowanie w okienku po lewej stronie wybierz usługi App Service, dzienniki.Under Monitoring in the left pane, select App Service logs. Włącz rejestrowanie aplikacji (System plików) , ustawić poziom błąd, a następnie wybrania Zapisz.Turn Application Logging (File System) to on, set Level to Error, and then select Save. Następnie otwórz strumień dziennika (w obszarze monitorowanie).Then open Log stream (under Monitoring).

  • Z aplikacji sieci web w witrynie Azure portal w obszarze narzędzia programistyczne wybierz konsoli i Zweryfikuj wersje oprogramowania node i Menedżera npm przy użyciu node -v i npm -v.From your web app in Azure portal, under Development Tools select Console and validate node and npm versions with node -v and npm -v.

  • Jeśli zostanie wyświetlony błąd o nie możesz znaleźć pakiet może trzeba uruchomić poza kolejnością kroków.If you see an error about not finding a package, you may have run the steps out of order. Podczas wdrażania witryny (z git push) uruchamia usługę aplikacji npm install, której działa w oparciu o bieżącą wersję węzła została skonfigurowana.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. Jeśli się zmieniło w konfiguracji później, należy wprowadzić zmianę znaczenia w kodzie, a następnie wypchnąć ponownie.If that is changed in configuration later, you'll need to make a meaningless change to the code and push again.

Kolejne krokiNext steps

Aplikacji sieci web została pomyślnie użyta, wizualizowanie danych z czujników w czasie rzeczywistym z usługi IoT hub.You've successfully used your web app to visualize real-time sensor data from your IoT hub.

Innym sposobem wizualizacji danych z usługi Azure IoT Hub, zobacz usługa Power BI umożliwia wizualizowanie danych z czujników w czasie rzeczywistym z usługi IoT hub.For another way to visualize data from Azure IoT Hub, see Use Power BI to visualize real-time sensor data from your IoT hub.

Aby kontynuować, aby rozpocząć pracę z usługą Azure IoT Hub i zapoznać się z wszystkie rozszerzone scenariusze IoT, zobacz następujące tematy:To continue to get started with Azure IoT Hub and to explore all extended IoT scenarios, see the following: