教學課程：在 Web 應用程式中將來自 Azure IoT 中樞的即時感應器資料視覺化

發行項
06/24/2023

在本文中，您會了解如何在本機電腦上執行 Node.js Web 應用程式，將 IoT 中樞收到的即時感應器資料視覺化。在本機執行 Web 應用程式之後，您可以在 Azure App 服務中裝載 Web 應用程式。

端對端圖表

必要條件

本教學課程的 Web 應用程式範例是以 Node.js 撰寫。本文中的步驟假設 Windows 開發電腦;不過，您也可以在慣用殼層的 Linux 系統上執行這些步驟。

Azure 訂用帳戶。如果您沒有 Azure 訂用帳戶，請在開始前建立免費帳戶。
Azure 訂用帳戶中的 IoT 中樞。如果您還沒有中樞，您可以遵循使用CLI或Azure 入口網站建立 IoT 中樞的步驟。
在 IoT 中樞內註冊的裝置。如果您尚未註冊裝置，請在Azure 入口網站中註冊一個裝置。
模擬裝置，可將遙測訊息傳送至 IoT 中樞。使用Raspberry Pi 線上模擬器取得模擬裝置，以將溫度資料傳送至IoT 中樞。
Node.js 14 版或更新版本。若要檢查您的節點版本，請執行 node --version。
Git。

在 Azure Cloud Shell 中使用 Bash 環境。如需詳細資訊，請參閱 Azure Cloud Shell 中的 Bash 快速入門。
若要在本地執行 CLI 參考命令，請安裝 Azure CLI。若您在 Windows 或 macOS 上執行，請考慮在 Docker 容器中執行 Azure CLI。如需詳細資訊，請參閱〈如何在 Docker 容器中執行 Azure CLI〉。
- 如果您使用的是本機安裝，請使用 az login 命令，透過 Azure CLI 來登入。請遵循您終端機上顯示的步驟，完成驗證程序。如需其他登入選項，請參閱使用 Azure CLI 登入。
- 出現提示時，請在第一次使用時安裝 Azure CLI 延伸模組。如需擴充功能詳細資訊，請參閱使用 Azure CLI 擴充功能。
- 執行 az version 以尋找已安裝的版本和相依程式庫。若要升級至最新版本，請執行 az upgrade。

將取用者群組新增至 IoT 中樞

取用者群組會提供事件資料流程的獨立檢視，讓應用程式和 Azure 服務獨立取用來自相同事件中樞端點的資料。在本節中，您會將取用者群組新增至 Web 應用程式用來讀取資料的 IoT 中樞內建端點。

執行下列命令，將取用者群組新增至 IoT 中樞的內建端點：

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

記下您選擇的名稱，稍後在本教學課程中需要它。

取得 IoT 中樞的服務連接字串

IoT 中樞在建立時即含有數個預設存取原則。其中一個原則是服務原則，其提供可讓服務讀取和寫入 IoT 中樞端點的足夠權限。執行下列命令，以取得符合服務原則的 IoT 中樞連接字串：

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

服務連接字串看起來應該類似下列範例：

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

記下服務連接字串，您稍後在本教學課程中需要它。

從 GitHub 下載 Web 應用程式

從 GitHub 下載或複製 Web 應用程式範例： web-apps-node-iot-hub-data-visualization。

檢查 Web 應用程式程式碼

在您的開發電腦上，流覽至 web-apps-node-iot-hub-data-visualization 目錄，然後在您最愛的編輯器中開啟 Web 應用程式。以下顯示Visual Studio Code中檢視的檔案結構：

顯示 Web 應用程式檔案結構的螢幕擷取畫面。

請花點時間檢查下列檔案：

server.js 是服務端腳本，可初始化 Web 通訊端和事件中樞包裝函式類別。它會提供事件中樞包裝函式類別的回呼，類別會用來將傳入訊息廣播至 Web 通訊端。
scripts/event-hub-reader.js 是服務端腳本，會使用指定的連接字串和取用者群組連線到 IoT 中樞的內建端點。這個指令碼會從傳入訊息的中繼資料擷取 DeviceId 和 EnqueuedTimeUtc，然後使用 node.js 註冊的回呼方法來轉送訊息。
public/js/chart-device-data.js 是用戶端腳本，可在 Web 通訊端上接聽、追蹤每個 DeviceId，並儲存每個裝置的最後 50 點傳入資料。然後將選取的裝置資料繫結至圖表物件。
public/index.html 會處理網頁的 UI 配置，並參考用戶端邏輯的必要腳本。

針對 Web 應用程式設定環境變數

為讀取 IoT 中樞的資料，Web 應用程式需要使用 IoT 中樞的連接字串，以及用於讀取的取用者群組名稱。 Web 應用程式會從程序環境的 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}]`);

使用下列命令，在命令視窗中設定環境變數。將預留位置值取代為 IoT 中樞服務連接字串，以及先前建立的取用者群組名稱。請勿將字串加上引號。

set IotHubConnectionString=YOUR_IOT_HUB_CONNECTION_STRING
set EventHubConsumerGroup=YOUR_CONSUMER_GROUP_NAME

執行 Web 應用程式

請確認裝置正在執行並傳送資料。
在命令視窗中執行下列程式碼行，以下載並安裝參考的套件，然後啟動網站：
```
npm install
npm start
```
主控台應該會顯示輸出，其指出 Web 應用程式已成功連線到 IoT 中樞並於連接埠 3000 上接聽：

開啟網頁查看 IoT 中樞的資料

使用瀏覽器開啟 http://localhost:3000。

在 [選取裝置] 清單中，選取裝置，即可查看執行中的繪圖，其顯示裝置傳送給 IoT 中樞的最後 50 個溫度和濕度資料點。

在 localhost 上執行的 Web 應用程式螢幕擷取畫面，其中顯示即時溫度和濕度。

您也應該會在主控台中看到輸出，其顯示 Web 應用程式正在向瀏覽器用戶端廣播的訊息：

主控台上 Web 應用程式輸出的螢幕擷取畫面。

在 App Service 中裝載 Web 應用程式

Azure App 服務為裝載 Web 應用程式提供平臺即服務 (PAAS) 。裝載在 App Service 中的 Web 應用程式可以受益于強大的 Azure 功能，例如安全性、負載平衡和延展性，以及 Azure 和合作夥伴 DevOps 解決方案，例如持續部署、套件管理等等。 App Service支援以許多熱門語言開發的 Web 應用程式，並部署在 Windows 或 Linux 基礎結構上。

在本節中，您會使用 Azure CLI 命令在 App Service 中佈建 Web 應用程式，並將程式碼部署至其中。 az webapp 文件包含所使用命令的詳細資料。

App Service 方案會定義一組計算資源以供裝載於 App Service 中的應用程式執行。在本教學課程中，我們會使用開發人員/免費層來裝載 Web 應用程式。使用免費層時， Web 應用程式會和其他 App Service 應用程式一起在共用的 Windows 資源上執行，包括其他客戶的應用程式。 Azure 也提供可在 Linux 計算資源上部署 Web 應用程式的 App Service 方案。如果已有想要使用的 App Service 方案，則可略過此步驟。

若要使用 Windows 免費層建立App Service方案，請使用az appservice plan create命令。使用 IoT 中樞所在的相同資源群組。服務方案可包含大小寫字母、數字與連字號。
```
az appservice plan create --name NEW_NAME_FOR_YOUR_APP_SERVICE_PLAN --resource-group YOUR_RESOURCE_GROUP_NAME --sku FREE
```
使用az webapp create命令，在您的App Service方案中布建 Web 應用程式。您可使用 --deployment-local-git 參數，在本機電腦上透過 Git 存放庫來上傳和部署 Web 應用程式程式碼。 Web 應用程式名稱必須是全域唯一名稱，並可包含大小寫字母、數字與連字號。請務必針對參數指定節點版本 14 或更新 --runtime 版本，視您使用的Node.js執行時間版本而定。您可使用 az webapp list-runtimes 命令來取得支援的執行階段清單。
```
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
```
使用 az webapp config appsettings set 命令，為指定 IoT 中樞連接字串和事件中樞取用者群組的環境變數新增應用程式設定。個別設定在參數中 -settings 以空格分隔。使用 IoT 中樞服務連接字串，以及先前在本教學課程中建立的取用者群組。
```
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"
```

啟用 Web 應用程式的 Web 通訊端通訊協定，並將 Web 應用程式設定為只接收 HTTPS 要求 (系統會將 HTTP 要求重新導向至 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

若要將程式碼部署至App Service，請使用使用者層級部署認證。使用者層級部署認證可用於 Web 應用程式的 Git 本機和 FTP 部署，其與 Azure 認證不同。一旦設定使用者層級部署認證之後，該認證在 Azure 帳戶中每個訂用帳戶的所有 App Service 應用程式均有效。如果先前已設定使用者層級部署認證，則可直接使用。

如果您先前尚未設定使用者層級部署認證，或無法記住密碼，請執行 az webapp deployment user set 命令。部署使用者名稱在 Azure 中必須是唯一名稱，且不得包含 ‘@’ 符號才能用於本機 Git 推送。收到系統提示時，請輸入新密碼並確認。密碼長度必須至少為 8 個字元，包含下列三個元素其中兩個：字母、數字及符號。
```
az webapp deployment user set --user-name NAME_FOR_YOUR_USER_CREDENTIALS
```

取得用來將程式碼推送至 App Service 的 Git URL。

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

將遠端新增至複本，以在 App Service 中參考 Web 應用程式的 Git 存放庫。將 GIT_ENDPOINT_URL 預留位置取代為上一個步驟中傳回的 URL。確定您位於範例目錄 web-apps-code-iot-hub-data-visualization 中，然後在命令視窗中執行下列命令。
```
git remote add webapp GIT_ENDPOINT_URL
```
若要將程式碼部署至 App Service，請在命令視窗中輸入下列命令。確定您位於範例目錄 web-apps-code-iot-hub-data-visualization 中。如果系統提示您輸入認證，請輸入您在步驟 5 中建立的使用者層級部署認證。推送至 App Service 遠端的主要分支。
```
git push webapp master:master
```

命令視窗中部署更新的進度。成功的部署會以類似下列輸出的行結束：

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

執行下列命令來查詢 Web 應用程式的狀態，並確定它正在執行：
```
az webapp show -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --query state
```
在瀏覽器中，瀏覽至 https://<your web app name>.azurewebsites.net 。此網頁類似於在本機執行 Web 應用程式時所看到的網頁。假設裝置正在執行並傳送資料，則應該會看到正在執行的繪圖，其顯示裝置傳送的最近 50 個溫度和濕度讀數。

疑難排解

如果遇到本範例的任何問題，請嘗試下列各節中的步驟。如果您仍有問題，請在本文底部傳送意見反應給我們。

用戶端問題

如果裝置未出現在清單中，或未繪製圖表，請確定裝置程式碼正在您的裝置上執行。
在瀏覽器中，在許多瀏覽器中開啟開發人員工具 (F12 機碼會開啟它) ，然後尋找主控台。尋找其中是否有列印任何警告或錯誤。
您可對 /js/chat-device-data.js 中的用戶端指令碼進行偵錯。

本機網站問題

在啟動 Node 以取得主控台輸出的視窗中，仔細檢查輸出。
對伺服器程式碼進行偵錯，特別是 server.js 和 /scripts/event-hub-reader.js。

Azure App Service 問題

在 Azure 入口網站中，移至 Web 應用程式。在左窗格的 [監視] 下，選取 [App Service 記錄]。開啟 [應用程式記錄 (檔案系統)]，並將 [層級] 設為 [錯誤]，然後選取 [儲存]。接著，開啟 [監視] 下的 [記錄資料流]。
從 Azure 入口網站的 Web 應用程式中，選取 [開發工具] 下的 [主控台]，然後使用 node -v 和 npm -v 來驗證 Node 和 npm 版本。
如果出現找不到套件的錯誤，您可能未按照順序執行步驟。當部署網站 (使用 git push) 時，App Service 會根據目前已設定的 Node 版本來執行 npm install。如果稍後在組態中變更，您必須對程式碼進行無意義的變更，然後再推送一次。

後續步驟

您已成功使用 Web 應用程式 (web app) 將 IoT 中樞的即時感應器資料視覺化。

如需從Azure IoT 中樞與資料互動的另一種方式，請參閱下列教學課程：

使用 Logic Apps 進行遠端監視和通知

Share via