Integrace služby Azure Digital Twins se službou Azure SignalR Service

V tomto článku se dozvíte, jak integrovat Službu Azure Digital Twins se službou Azure SignalR.

Řešení popsané v tomto článku umožňuje odesílat telemetrická data digitálních dvojčat připojeným klientům, jako je jedna webová stránka nebo mobilní aplikace. V důsledku toho se klienti aktualizují o metriky a stav ze zařízení IoT v reálném čase, aniž by se museli dotazovat na server nebo odesílat nové požadavky HTTP na aktualizace.

Požadavky

Tady jsou požadavky, které byste měli před pokračováním dokončit:

• Před integrací řešení se službou Azure SignalR v tomto článku byste měli dokončit kompletní řešení Azure Digital Twins Connect, protože tento článek s postupy vychází z tohoto článku. Tento kurz vás provede nastavením instance Služby Azure Digital Twins, která funguje s virtuálním zařízením IoT k aktivaci aktualizací digitálních dvojčat. Tento článek s postupy tyto aktualizace propojí s ukázkovou webovou aplikací pomocí služby Azure SignalR.

• V tomto kurzu budete potřebovat následující hodnoty:

  • Téma Event Gridu
  • Skupina prostředků
  • Název služby App Service nebo aplikace funkcí

• Na svém počítači budete potřebovat Node.js nainstalovat.

Nezapomeňte se přihlásit k webu Azure Portal pomocí svého účtu Azure, protože ho budete muset použít v této příručce.

Stažení ukázkových aplikací

Nejdřív si stáhněte požadované ukázkové aplikace. Budete potřebovat obě následující ukázky:

• Kompletní ukázky služby Azure Digital Twins: Tato ukázka obsahuje AdtSampleApp , která obsahuje dvě funkce Azure pro přesouvání dat kolem instance služby Azure Digital Twins (podrobnější informace o tomto scénáři najdete v tématu Připojení kompletního řešení). Obsahuje také ukázkovou aplikaci DeviceSimulator , která simuluje zařízení IoT a generuje novou hodnotu teploty každou sekundu.

  • Pokud jste ukázku ještě nestáhli v rámci kurzu v části Požadavky, přejděte k ukázce a vyberte tlačítko Procházet kód pod názvem. Tím přejdete do úložiště GitHubu pro ukázky, které si můžete stáhnout jako .zip výběrem tlačítka Kód a Stáhnout ZIP.

    

  Toto tlačítko stáhne kopii ukázkového úložiště na vašem počítači jako digital-twins-samples-main.zip. Rozbalte složku.

• Ukázka webové aplikace pro integraci služby SignalR: Tato ukázková webová aplikace React bude využívat telemetrická data služby Azure Digital Twins ze služby Azure SignalR.

  • Přejděte na ukázkový odkaz a použijte stejný proces stahování ke stažení kopie ukázky do počítače, jak je digitaltwins-signalr-webapp-sample-main.zip. Rozbalte složku.

Architektura řešení

Službu Azure SignalR Service připojíte ke službě Azure Digital Twins pomocí níže uvedené cesty. Oddíly A, B a C v diagramu pocházejí z diagramu architektury kompletního kurzu. V tomto článku s postupy vytvoříte oddíl D na stávající architektuře, která obsahuje dvě nové funkce Azure, které komunikují se službou SignalR a klientskými aplikacemi.

Vytvoření instance Azure SignalR

Dále vytvořte instanci Azure SignalR, která se použije v tomto článku, a to podle pokynů v tématu Vytvoření instance služby Azure SignalR (prozatím proveďte pouze kroky v této části).

Nechte okno prohlížeče otevřené na webu Azure Portal, protože ho znovu použijete v další části.

Publikování a konfigurace aplikace Azure Functions

V této části nastavíte dvě funkce Azure:

• negotiate – funkce triggeru HTTP. Používá vstupní vazbu SignalRConnectionInfo ke generování a vrácení platných informací o připojení.
• všesměrové vysílání – funkce triggeru Event Gridu . Přijímá telemetrická data služby Azure Digital Twins prostřednictvím služby Event Grid a používá výstupní vazbu instance SignalR, kterou jste vytvořili v předchozím kroku, k vysílání zprávy všem připojeným klientským aplikacím.

Spusťte Visual Studio nebo jiný editor kódu podle svého výběru a otevřete řešení kódu ve složce digital-twins-samples-main\ADTSampleApp . Pak pomocí následujících kroků vytvořte funkce:

1. V projektu SampleFunctionsApp vytvořte novou třídu jazyka C# s názvem SignalRFunctions.cs.

2. Obsah souboru třídy nahraďte následujícím kódem:

   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. V okně konzoly sady Visual Studio Správce balíčků nebo libovolném příkazovém okně na počítači přejděte do složky digital-twins-samples-main\AdtSampleApp\SampleFunctionsApp a spuštěním následujícího příkazu nainstalujte SignalRService balíček NuGet do projektu:

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

   Spuštěním tohoto příkazu by se měly vyřešit všechny problémy se závislostmi ve třídě.

4. Pomocí preferované metody publikujte funkci do Azure.

   Pokyny k publikování funkce pomocí sady Visual Studio najdete v tématu Vývoj azure Functions pomocí sady Visual Studio. Pokyny k publikování funkce pomocí editoru Visual Studio Code najdete v tématu Vytvoření funkce jazyka C# v Azure pomocí editoru Visual Studio Code. Pokyny k publikování funkce pomocí Azure CLI najdete v tématu Vytvoření funkce jazyka C# v Azure z příkazového řádku.

Konfigurace funkce

Dále nakonfigurujte funkci tak, aby komunikuje s vaší instancí Azure SignalR. Začnete tím, že shromáždíte připojovací řetězec instance SignalR a pak ji přidáte do nastavení aplikace funkcí.

1. Přejděte na web Azure Portal a na panelu hledání v horní části portálu vyhledejte název vaší instance SignalR. Instanci vyberte a otevřete.

2. V nabídce instance vyberte klíče a zobrazte připojovací řetězec pro instanci služby SignalR.

3. Výběrem ikony Kopírovat zkopírujte primární PŘIPOJOVACÍ ŘETĚZEC.

   

4. Nakonec pomocí následujícího příkazu Azure CLI přidejte připojovací řetězec Azure SignalR do nastavení aplikace funkce. Zástupné symboly nahraďte také skupinou prostředků a názvem služby App Service nebo aplikace funkcí z předpokladu kurzu. Příkaz můžete spustit v Azure Cloud Shellu nebo místně, pokud máte na počítači nainstalované Rozhraní příkazového řádku Azure:

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

   Výstup tohoto příkazu vytiskne všechna nastavení aplikace nastavená pro vaši funkci Azure. AzureSignalRConnectionString V dolní části seznamu vyhledejte ověření, jestli je přidaná.

   

Připojení funkce k Event Gridu

Dále se přihlaste k odběru funkce Azure broadcastu do tématu Event Gridu, které jste vytvořili během předpokladu kurzu. Tato akce umožní tok telemetrických dat z dvojčete termostatu67 prostřednictvím tématu Event Gridu a do funkce. Odsud může funkce vysílat data všem klientům.

Pokud chcete data vysílat, vytvoříte odběr událostí z tématu Event Gridu do funkce Azure všesměrového vysílání jako koncový bod.

Na webu Azure Portal přejděte na téma Event Gridu tak, že na horním panelu hledání vyhledáte jeho název. Vyberte + Odběr události.

Na stránce Vytvořit odběr události vyplňte pole následujícím způsobem (pole vyplněná ve výchozím nastavení se nezmiňují):

• NÁZEV PODROBNOSTI ODBĚRU>UDÁLOSTI: Zadejte název odběru události.
• Typ koncového bodu PODROBNOSTI>koncového bodu: V možnostech nabídky vyberte funkci Azure Functions.
• Koncový bod PODROBNOSTI>o koncovém bodu: Vyberte odkaz na koncový bod, který otevře okno Vybrat funkci Azure:
  • Vyplňte své předplatné, skupinu prostředků, aplikaci funkcí a funkci (všesměrové vysílání). Některá z těchto polí se můžou po výběru předplatného automaticky naplní.
  • Zvolte Potvrdit výběr.

Zpět na stránce Vytvořit odběr události vyberte Vytvořit.

V tomto okamžiku by se na stránce tématu Event Gridu měly zobrazit dvě odběry událostí.

Konfigurace a spuštění webové aplikace

V této části uvidíte výsledek v akci. Nejprve nakonfigurujte ukázkovou webovou aplikaci klienta tak, aby se připojila k toku Azure SignalR, který jste nastavili. Dále spustíte ukázkovou aplikaci simulovaného zařízení, která odesílá telemetrická data zařízení prostřednictvím instance služby Azure Digital Twins. Potom zobrazíte ukázkovou webovou aplikaci, abyste viděli data simulovaného zařízení, která aktualizují ukázkovou webovou aplikaci v reálném čase.

Konfigurace ukázkové klientské webové aplikace

Dále nakonfigurujete ukázkovou webovou aplikaci klienta. Začněte tím, že shromáždíte adresu URL koncového bodu HTTP funkce Negotiate a pak ji použijete ke konfiguraci kódu aplikace na vašem počítači.

1. Přejděte na stránku Aplikace funkcí na webu Azure Portal a ze seznamu vyberte svou aplikaci funkcí. V nabídce aplikace vyberte Funkce a zvolte funkci negotiate.

   

2. Vyberte Získat adresu URL funkce a zkopírujte hodnotu nahoru přes /api (nezahrnujte poslední /negotiate?). Tuto hodnotu použijete v dalším kroku.

   

3. Pomocí sady Visual Studio nebo libovolného editoru kódu otevřete rozbalenou složku digitaltwins-signalr-webapp-sample-main, kterou jste stáhli v části Stáhnout ukázkové aplikace.

4. Otevřete soubor src/App.js a nahraďte adresu URL funkce adresou URL HubConnectionBuilder koncového bodu HTTP funkce negotiate, kterou jste uložili v předchozím kroku:

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

5. V příkazovém řádku vývojáře sady Visual Studio nebo v libovolném příkazovém okně na vašem počítači přejděte do složky digitaltwins-signalr-webapp-sample-main\src . Spuštěním následujícího příkazu nainstalujte závislé balíčky uzlů:

   npm install
   

Dále nastavte oprávnění v aplikaci funkcí na webu Azure Portal:

1. Na stránce Aplikace funkcí na webu Azure Portal vyberte instanci vaší aplikace funkcí.

2. Posuňte se v nabídce instance dolů a vyberte CORS. Na stránce CORS přidejte http://localhost:3000 jako povolený původ zadáním do prázdného pole. Zaškrtněte políčko Povolit přístup-Control-Allow-Credentials a vyberte Uložit.

   

Spuštění simulátoru zařízení

Během kompletního kurzu jste nakonfigurovali simulátor zařízení tak, aby odesílal data přes IoT Hub a do instance služby Azure Digital Twins.

Nyní spusťte projekt simulátoru umístěný v digital-twins-samples-main\DeviceSimulator\DeviceSimulator.sln. Pokud používáte Visual Studio, můžete projekt otevřít a pak ho spustit pomocí tohoto tlačítka na panelu nástrojů:

Otevře se okno konzoly a zobrazí zprávy telemetrie teploty simulovaného zařízení. Tyto zprávy se odesílají prostřednictvím vaší instance služby Azure Digital Twins, kde je pak vyzvedne funkce Azure a signalR.

V této konzole nemusíte dělat nic jiného, ale nechte ho spuštěný, až dokončíte další krok.

Zobrazení výsledků

Pokud chcete zobrazit výsledky v akci, spusťte ukázku webové aplikace pro integraci služby SignalR. Můžete to udělat z libovolného okna konzoly v umístění digitaltwins-signalr-webapp-sample-main\src spuštěním tohoto příkazu:

npm start

Spuštěním tohoto příkazu otevřete okno prohlížeče se spuštěnou ukázkovou aplikací, která zobrazí vizuální měřidlo teploty. Po spuštění aplikace byste měli začít zobrazovat hodnoty telemetrie teploty ze simulátoru zařízení, který se šíří prostřednictvím služby Azure Digital Twins, které webová aplikace odráží v reálném čase.

Vyčištění prostředků

Pokud už prostředky vytvořené v tomto článku nepotřebujete, odstraňte je následujícím postupem.

Pomocí Azure Cloud Shellu nebo místního Azure CLI můžete pomocí příkazu az group delete odstranit všechny prostředky Azure ve skupině prostředků. Odebráním skupiny prostředků se odebere také:

• Instance Služby Azure Digital Twins (od kompletního kurzu)
• Centrum IoT a registrace zařízení centra (od kompletního kurzu)
• Téma Event Gridu a přidružená předplatná
• Aplikace Azure Functions, včetně všech tří funkcí a přidružených prostředků, jako je úložiště
• Instance Azure SignalR

Důležité

Odstranění skupiny prostředků je nevratné. Skupina prostředků i všechny prostředky v ní obsažené se trvale odstraní. Ujistěte se, že nechtěně neodstraníte nesprávnou skupinu prostředků nebo prostředky.

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

Nakonec odstraňte ukázkové složky projektu, které jste stáhli do místního počítače (digital-twins-samples-main.zip, digitaltwins-signalr-webapp-sample-main.zip a jejich rozbalené protějšky).

Další kroky

V tomto článku nastavíte službu Azure Functions se službou SignalR tak, aby vysílala telemetrické události Služby Azure Digital Twins do ukázkové klientské aplikace.

Další informace o službě Azure SignalR:

• Co je služba Azure SignalR?

Nebo si přečtěte další informace o ověřování služby Azure SignalR pomocí azure Functions:

• Ověřování pomocí služby Azure SignalR