整合 Azure Digital Twins 與 Azure SignalR 服務

在本文中，您將了解如何整合 Azure Digital Twins 與 Azure SignalR Service。

本文中所述的解決方案可讓您將數位對應項遙測資料推送至連線的用戶端，例如單一網頁或行動應用程式。 因此，用戶端可以透過 IoT 裝置的即時計量和狀態進行更新，而不需要輪詢伺服器或提交新的 HTTP 更新要求。

必要條件

以下是您在繼續進行之前必須先完成的必要條件：

• 將解決方案與本文中的 Azure SignalR Service 整合之前，您應該先完成 Azure Digital Twins Connect 端對端解決方案，因為本操作說明文章是以其為基礎所建置。 本教學課程會逐步引導您設定可與虛擬 IoT 裝置搭配運作的 Azure Digital Twins 執行個體，以觸發數位對應項更新。 本操作說明文章使用 Azure SignalR Service，將這些更新連線到範例 Web 應用程式。

• 您將需要本教學課程中的下列值：

  • 事件方格主題
  • 資源群組
  • App Service/函數應用程式名稱

• 您的機器上必須安裝 Node.js。

請務必使用您的 Azure 帳戶登入 Azure 入口網站，因為您在本指南中必須用到。

下載範例應用程式

首先，下載必要的範例應用程式。 您將需要下列兩個範例：

• Azure Digital Twins 端對端範例：此範例包含一個 AdtSampleApp，其中包含兩個 Azure 函式，可將資料在 Azure Digital Twins 執行個體周圍移動，(您可以在連線端對端解決方案中更詳細地了解此案例)。 其也包含 DeviceSimulator 範例應用程式，可模擬 IoT 裝置，並且每秒產生新的溫度值。

  • 如果您尚未在必要條件教學課程中下載範例，請導覽至範例，然後選取標題下方的 [瀏覽程式碼] 按鈕。 這麼做會帶您前往樣本的 GitHub 存放庫，您可以選取 [程式碼] 按鈕，以及 [下載 ZIP] 按鈕，以 .zip 形式下載樣本。

    

  此按鈕會在您的電腦中下載範例存放庫的複本，如 digital-twins-samples-main.zip。 將資料夾解壓縮。

• SignalR 整合 Web 應用程式範例：此範例 React Web 應用程式會取用來自 Azure SignalR Service 的 Azure Digital Twins 遙測資料。

  • 導覽至範例連結，並使用相同的下載程序將範例複本下載到您的電腦，如 digitaltwins-signalr-webapp-sample-main.zip。 將資料夾解壓縮。

解決方案架構

您將透過下列路徑將 Azure SignalR Service 連結至 Azure Digital Twins。 圖表中的 A、B 和 C 區段取自端對端教學課程必要條件的架構圖表。 在本操作說明文章中，您會將第 D 節建置於現有的架構上，其中包含兩個新的 Azure 函式，可與 SignalR 和用戶端應用程式進行通訊。

建立 Azure SignalR 實例

接下來，遵循建立 Azure SignalR 服務實例中的 指示，建立 Azure SignalR 實例 以在本文中使用（目前，只需完成本節中的步驟）。

將瀏覽器視窗保持開啟至 Azure 入口網站，因為您在下一節中將會再次用到。

發佈並設定 Azure Functions 應用程式

在本節中，您將設定兩個 Azure 函式：

• negotiate - HTTP 觸發程序函數。 其會使用 SignalRConnectionInfo 輸入繫結來產生並傳回有效的連線資訊。
• broadcast - 事件方格觸發程序函數。 其會透過事件方格接收 Azure Digital Twins 遙測資料，並使用您在上一個步驟中所建立 SignalR 執行個體的輸出繫結，將訊息廣播至所有已連線的用戶端應用程式。

啟動 Visual Studio 或您所選的另一個程式碼編輯器，並在 digital-twins-samples-main\ADTSampleApp 資料夾中開啟程式碼解決方案。 然後，執行下列步驟來建立函式：

1. 在 SampleFunctionsApp 專案中，建立名為 SignalRFunctions.cs 的新 C# 類別。

2. 將類別檔案的內容取代為下列程式碼：

   using System;
   using System.Collections.Generic;
   using System.Threading.Tasks;
   using Microsoft.AspNetCore.Http;
   using Microsoft.Azure.WebJobs;
   using Microsoft.Azure.WebJobs.Extensions.Http;
   using Microsoft.Azure.WebJobs.Extensions.EventGrid;
   using Microsoft.Azure.WebJobs.Extensions.SignalRService;
   using Microsoft.Extensions.Logging;
   using Newtonsoft.Json;
   using Newtonsoft.Json.Linq;
   using Azure.Messaging.EventGrid;
   
   namespace SignalRFunction
   {
       public static class SignalRFunctions
       {
           public static double temperature;
   
           [FunctionName("negotiate")]
           public static SignalRConnectionInfo GetSignalRInfo(
               [HttpTrigger(AuthorizationLevel.Anonymous, "post")] HttpRequest req,
               [SignalRConnectionInfo(HubName = "dttelemetry")] SignalRConnectionInfo connectionInfo)
           {
               return connectionInfo;
           }
   
           [FunctionName("broadcast")]
           public static Task SendMessage(
               [EventGridTrigger] EventGridEvent eventGridEvent,
               [SignalR(HubName = "dttelemetry")] IAsyncCollector<SignalRMessage> signalRMessages,
               ILogger log)
           {
               JObject eventGridData = (JObject)JsonConvert.DeserializeObject(eventGridEvent.Data.ToString());
   
               log.LogInformation($"Event grid message: {eventGridData}");
   
               var patch = (JObject)eventGridData["data"]["patch"][0];
               if (patch["path"].ToString().Contains("/Temperature"))
               {
                   temperature = Math.Round(patch["value"].ToObject<double>(), 2);
               }
   
               var message = new Dictionary<object, object>
               {
                   { "temperatureInFahrenheit", temperature},
               };
   
               return signalRMessages.AddAsync(
                   new SignalRMessage
                   {
                       Target = "newMessage",
                       Arguments = new[] { message }
                   });
           }
       }
   }
   

3. 在 Visual Studio 的 [套件管理員主控台] 視窗中，或您電腦上的任何命令視窗，導覽至 digital-twins-samples-main\AdtSampleApp\SampleFunctionsApp 資料夾，然後執行下列命令，將 SignalRService NuGet 套件安裝至專案：

   dotnet add package Microsoft.Azure.WebJobs.Extensions.SignalRService --version 1.14.0
   

   執行此命令應可解決類別中的任何相依性問題。

4. 使用您慣用的方法將函式發佈至 Azure。

   如需如何使用 Visual Studio 來發佈函式的相關指示，請參閱使用 Visual Studio 來開發 Azure Functions。 如需如何使用 Visual Studio Code 來發佈函式的相關指示，請參閱使用 Visual Studio Code 以在 Azure 中建立 C# 函式。 如需如何使用 Azure CLI 來發佈函式的相關指示，請參閱從命令列在 Azure 中建立 C# 函式。

設定函式

接下來，設定函式來與您的 Azure SignalR 執行個體進行通訊。 您一開始會收集 SignalR 執行個體的連接字串，然後將其新增至函數應用程式的設定。

1. 移至 Azure 入口網站，然後在入口網站頂端的搜尋列中，搜尋 SignalR 執行個體的名稱。 選取該執行個體以開啟它。

2. 從執行個體功能表中選取 [金鑰]，以檢視 SignalR 服務執行個體的連接字串。

3. 選取 [複製] 圖示以複製 [主要連接字串]。

   

4. 最後，使用下列 Azure CLI 命令，將 Azure SignalR 連接字串新增至函式的應用程式設定。 此外，請從教學課程必要條件中，將預留位置取代為您的資源群組和 App Service/函數應用程式名稱。 您可在 Azure Cloud Shell 中執行此命令，或者如果您機器上安裝了 Azure CLI，則可在本機執行：

   az functionapp config appsettings set --resource-group <your-resource-group> --name <your-function-app-name> --settings "AzureSignalRConnectionString=<your-Azure-SignalR-ConnectionString>"
   

   此命令的輸出會列印針對 Azure 函式設定的所有應用程式設定。 在清單底部查看 AzureSignalRConnectionString 以確認已將其新增。

   

將函式連線至事件方格

接下來，針對 broadcast Azure 函式，請訂閱您在教學課程必要條件期間建立的「事件方格」主題。 此動作可讓遙測資料從 thermostat67 對應項流經事件方格主題並流向函式。 從這裡，函式可以將資料廣播到所有用戶端。

若要廣播資料，您將從事件方格主題建立事件訂用帳戶到 broadcast Azure 函式作為端點。

在 Azure 入口網站中，導覽至您的事件方格主題，方法是在頂端的搜尋列中搜尋其名稱。 選取 [+ 事件訂用帳戶]。

在 [建立事件訂用帳戶] 頁面中，填寫下列欄位 (不會提及依預設填入的欄位)：

• 事件訂用帳戶詳細資料>名稱：為您的事件訂用帳戶命名。
• 端點詳細資料>端點類型：從功能表選項選取 [Azure 函式]。
• 端點詳細資料>端點：選取 [選取端點] 連結，會開啟 [選取 Azure 函式] 視窗：
  • 填入您的 [訂用帳戶]、[資源群組]、[函數應用程式] 和 [函式] (broadcast)。 在您選取訂用帳戶後，其中有些欄位可能會自動填入。
  • 選取 [確認選取項目]。

回到 [建立事件訂閱] 頁面，選取 [建立]。

此時，您應該會在 [事件方格主題] 頁面中，看到兩個事件訂用帳戶。

設定和執行 Web 應用程式

在本節中，您會看到結果實際運作情形。 首先，設定範例用戶端 Web 應用程式，以連線到您已設定的 Azure SignalR 流程。 接下來，您將啟動模擬裝置範例應用程式，可透過 Azure Digital Twins 執行個體傳送裝置遙測資料。 之後，您將檢視範例 Web 應用程式，以查看即時更新範例 Web 應用程式的模擬裝置資料。

設定範例用戶端 Web 應用程式

接下來，您將設定範例用戶端 Web 應用程式。 首先，收集 negotiate 函式的 HTTP 端點 URL，然後將其用來設定電腦上的應用程式程式碼。

1. 移至 Azure 入口網站的函數應用程式頁面，然後從清單中選取您的函數應用程式。 在應用程式功能表中，選取 [函式]，然後選擇 negotiate 函式。

   

2. 選取 [取得函式 URL]，然後透過 /api (不包含最後一個 /negotiate?) 複製值。 您將在下一個步驟中使用此值。

   

3. 使用 Visual Studio 或任何您選擇的程式碼編輯器，開啟您在 [下載範例應用程式] 區段中下載的解壓縮 digitaltwins-signalr-webapp-sample-main 資料夾。

4. 開啟 src/App.js 檔案，並以您在上一個步驟中所儲存 negotiate 函式的 HTTP 端點 URL 取代 HubConnectionBuilder 中的函式 URL：

       const hubConnection = new HubConnectionBuilder()
           .withUrl('<Function-URL>')
           .build();
   

5. 在 Visual Studio 的 [開發人員命令提示字元] 或您電腦上的任何命令視窗中，導覽至 digitaltwins-signalr-webapp-sample-main\src 資料夾。 執行下列命令來安裝相依節點套件：

   npm install
   

接下來，在 Azure 入口網站中設定函數應用程式中的權限：

1. 在 Azure 入口網站的函數應用程式頁面中，選取您的函數應用程式執行個體。

2. 在執行個體功能表中向下捲動，然後選取 [CORS]。 在 [CORS] 頁面上，將 http://localhost:3000 輸入空白方塊，以將其新增為允許的來源。 核取 [啟用 Access-Control-Allow-Credentials] 的方塊，然後選取 [儲存]。

   

執行裝置模擬器

在端對端教學課程必要條件期間，您已將裝置模擬器設定為將資料透過 IoT 中樞傳送至 Azure Digital Twins 執行個體。

現在，啟動位於 digital-twins-samples-main\DeviceSimulator\DeviceSimulator.sln 中的模擬器專案。 如果您使用 Visual Studio，則可以開啟專案，然後在工具列中使用此按鈕加以執行：

主控台視窗會開啟並顯示模擬的裝置溫度遙測訊息。 這些訊息會透過您的 Azure Digital Twins 執行個體傳送，然後由 Azure 函式和 SignalR 挑選這些訊息。

您在此主控台中不必執行任何其他動作，但在完成後續步驟時，請保持其執行狀態。

查看結果

若要查看結果實際運作情形，請啟動 SignalR 整合 Web 應用程式範例。 您可以執行下列命令，從 digitaltwins-signalr-webapp-sample-main\src 位置的任何主控台視窗中執行此動作：

npm start

執行此命令會開啟執行範例應用程式的瀏覽器視窗，顯示視覺溫度量測計。 一旦應用程式執行之後，您應該會開始從裝置模擬器中看到溫度遙測值，這些值會透過 Web 應用程式即時反映的 Azure Digital Twins 來進行傳播。

清除資源

如果您不再需要本文中建立的資源，請按照下列步驟加以刪除。

您可以使用 Azure Cloud Shell 或本機 Azure CLI，透過 az group delete 命令刪除資源群組中的所有 Azure 資源。 移除資源群組也將移除：

• Azure Digital Twins 執行個體 (從端對端教學課程)
• IoT 中樞和中樞裝置註冊 (從端對端教學課程)
• 事件方格主題和相關聯的訂用帳戶
• Azure Functions 應用程式，包括所有三個函式和相關聯的資源，例如儲存體
• Azure SignalR 執行個體

az group delete --name <your-resource-group>

最後，刪除您下載到本機電腦 (digital-twins-samples-main.zip、digitaltwins-signalr-webapp-sample-main.zip 及其解壓縮的對應項目) 的專案範例資料夾。

下一步

在本文中，您要使用 SignalR 設定 Azure 函式，將 Azure Digital Twins 遙測事件廣播至範例用戶端應用程式。

接下來，深入了解 Azure SignalR Service：

• 什麼是 Azure SignalR 服務？

或深入了解使用 Azure Functions 進行 Azure SignalR 服務驗證：

• Azure SignalR 服務驗證