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 službu Azure Digital Twins Připojení uceleným řešením, 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 .

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.

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.

Diagram of Azure services in an end-to-end scenario, which shows data flowing in and out of Azure Digital Twins.

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 po instanci služby Azure Digital Twins (podrobnější informace o tomto scénáři najdete v Připojení kompletním ř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 soubor ZIP výběrem tlačítka Kód a Stáhnout ZIP.

      Screenshot of the digital-twins-samples repo on GitHub and the steps for downloading it as a zip.

    Toto tlačítko stáhne kopii ukázkového úložiště ve 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ý postup stahování ke stažení kopie ukázky do počítače jako digitaltwins-signalr-webapp-sample-main.zip. Rozbalte složku.

V této části vytvoříte základní instanci Azure SignalR, která se použije pro vaši aplikaci. Následující kroky používají azure Portal k vytvoření nové instance, ale můžete také použít Azure CLI. Další informace najdete v tématu az signalr create command in the Azure SignalR Service CLI Reference.

  1. Přihlaste se k portálu Azure.
  2. V levém horním rohu stránky vyberte + Vytvořit prostředek.
  3. Na stránce Vytvořit prostředek v textovém poli Search s a marketplace zadejte signalr a ze seznamu vyberte Službu SignalR.
  4. Na stránce Služby SignalR vyberte Vytvořit.
  5. Na kartě Základy zadáte základní informace pro novou instanci služby SignalR. Zadejte následující hodnoty:
Pole Navrhovaná hodnota Popis
Předplatné Zvolte si předplatné. Vyberte předplatné, které chcete použít k vytvoření nové instance služby SignalR.
Skupina prostředků Vytvoření skupiny prostředků s názvem SignalRTestResources Vyberte nebo vytvořte skupinu prostředků pro prostředek služby SignalR. Místo použití existující skupiny prostředků je užitečné vytvořit novou skupinu prostředků pro účely tohoto kurzu. Pokud chcete po dokončení kurzu uvolnit prostředky, odstraňte skupinu prostředků.

Odstraněním skupiny prostředků se odstraní také všechny prostředky, které patří do skupiny. Tuto akci nelze vrátit zpět. Před odstraněním skupiny prostředků se ujistěte, že neobsahuje prostředky, které chcete zachovat.

Další informace najdete v článku Použití skupin prostředků ke správě prostředků Azure.
Název prostředku testsignalr Zadejte jedinečný název prostředku, který se použije pro prostředek služby SignalR. Pokud je testsignalr už ve vaší oblasti pořízený, přidejte číslici nebo znak, dokud nebude název jedinečný.

Název musí být řetězec 1 až 63 znaků a musí obsahovat jenom číslice, písmena a pomlčka (-). Název nemůže začínat ani končit znakem spojovníku a po sobě jdoucí znaky spojovníku nejsou platné.
Oblast Vyberte vaši oblast Vyberte příslušnou oblast pro novou instanci služby SignalR.

Služba Azure SignalR není v současné době dostupná ve všech oblastech. Další informace najdete v tématu Dostupnost oblasti služby Azure SignalR Service.
Cenová úroveň Vyberte Změnit a pak zvolte Free (pouze vývoj/testování). Zvolením možnosti Vybrat potvrďte svou volbu cenové úrovně. Služba Azure SignalR má tři cenové úrovně: Free, Standard a Premium. Kurzy používají úroveň Free , pokud není uvedeno jinak v požadavcích.

Další informace o rozdílech funkcí mezi úrovněmi a cenami najdete v tématu Ceny služby Azure SignalR.
Režim služby Volba příslušného režimu služby Použití výchozího nastavení při hostování logiky centra SignalR ve webových aplikacích a použití služby SignalR jako proxy serveru. Bezserverové použití bezserverových technologií, jako je Azure Functions, k hostování logiky centra SignalR.

Klasický režim je pouze kvůli zpětné kompatibilitě a nedoporučuje se používat.

Další informace najdete v tématu Režim služby ve službě Azure SignalR.

V kurzech SignalR nemusíte měnit nastavení na kartách Sítě a značky .

  1. Vyberte tlačítko Zkontrolovat a vytvořit v dolní části karty Základy.
  2. Na kartě Zkontrolovat a vytvořit zkontrolujte hodnoty a pak vyberte Vytvořit. Dokončení nasazení chvíli trvá.
  3. Po dokončení nasazení vyberte tlačítko Přejít k prostředku .
  4. Na stránce prostředku SignalR vyberte v nabídce na levé straně v části Nastavení.
  5. Zkopírujte řetězec Připojení ion pro primární klíč. Tuto připojovací řetězec budete potřebovat ke konfiguraci aplikace později v tomto kurzu.

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 SignalR Připojení ionInfo ke generování a vracení 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 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.2.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.

    Screenshot of the Azure portal that shows the Keys page for the SignalR instance. The connection string is being copied.

  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á.

    Screenshot of the output in a command window, showing a list item called 'AzureSignalRConnectionString'.

Připojení funkce do 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.

Screenshot of how to create an event subscription in the Azure portal.

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.

Screenshot of the form for creating an event subscription in the Azure portal.

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í.

Screenshot of the Azure portal showing two event subscriptions in the Event Grid topic page.

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.

    Screenshot of the Azure portal function apps, with 'Functions' highlighted in the menu and 'negotiate' highlighted in the list of functions.

  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.

    Screenshot of the Azure portal showing the 'negotiate' function with the 'Get function URL' button and the function URL highlighted.

  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.

    Screenshot of the Azure portal showing the CORS Setting in Azure Function.

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ů:

Screenshot of the Visual Studio start button with the DeviceSimulator project open.

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.

Screenshot of the sample client web app, showing a visual temperature gauge. The temperature reflected is 67.52.

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:

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