Integrera Azure Digital Twins med Azure SignalR Service

  • Artikel

I den här artikeln får du lära dig hur du integrerar Azure Digital Twins med Azure SignalR Service.

Med den lösning som beskrivs i den här artikeln kan du skicka telemetridata för digitala tvillingar till anslutna klienter, till exempel en enda webbsida eller ett mobilprogram. Därför uppdateras klienterna med realtidsmått och status från IoT-enheter, utan att behöva avsöka servern eller skicka nya HTTP-begäranden om uppdateringar.

Förutsättningar

Här är de förutsättningar som du bör slutföra innan du fortsätter:

  • Innan du integrerar din lösning med Azure SignalR Service i den här artikeln bör du slutföra Azure Digital Twins-Anslut en lösning från slutpunkt till slutpunkt, eftersom den här artikeln bygger på den. Självstudien beskriver hur du konfigurerar en Azure Digital Twins-instans som fungerar med en virtuell IoT-enhet för att utlösa uppdateringar av digitala tvillingar. Den här artikeln ansluter uppdateringarna till en exempelwebbapp med Hjälp av Azure SignalR Service.

  • Du behöver följande värden från självstudien:

    • Event Grid-ämne
    • Resursgrupp
    • Apptjänst/funktionsappnamn

  • Du behöver Node.js installerat på datorn.

Logga in på Azure-portalen med ditt Azure-konto eftersom du måste använda det i den här guiden.

Lösningsarkitekturen

Du kommer att ansluta Azure SignalR Service till Azure Digital Twins via sökvägen nedan. Avsnitten A, B och C i diagrammet hämtas från arkitekturdiagrammet i självstudien från slutpunkt till slutpunkt. I den här instruktionsartikeln skapar du avsnitt D på den befintliga arkitekturen, som innehåller två nya Azure-funktioner som kommunicerar med SignalR och klientappar.

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

Ladda ned exempelprogrammen

Ladda först ned de exempelappar som krävs. Du behöver båda följande exempel:

  • Azure Digital Twins-exempel från slutpunkt till slutpunkt: Det här exemplet innehåller en AdtSampleApp som innehåller två Azure-funktioner för att flytta data runt en Azure Digital Twins-instans (du kan lära dig mer om det här scenariot i Anslut en lösning från slutpunkt till slutpunkt). Den innehåller också ett DeviceSimulator-exempelprogram som simulerar en IoT-enhet och genererar ett nytt temperaturvärde varje sekund.

    • Om du inte redan har laddat ned exemplet som en del av självstudien i Krav navigerar du till exemplet och väljer knappen Bläddra kod under rubriken. Om du gör det kommer du till GitHub-lagringsplatsen för exemplen, som du kan ladda ned som en .zip genom att välja knappen Kod och Ladda ned ZIP.

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

    Den här knappen laddar ned en kopia av exempelrepoen på datorn, som digital-twins-samples-main.zip. Packa upp mappen.

  • Exempel på SignalR-integreringswebbapp: Det här exemplet på React-webbappen använder Telemetridata för Azure Digital Twins från en Azure SignalR Service.

    • Gå till exempellänken och använd samma nedladdningsprocess för att ladda ned en kopia av exemplet till datorn, som digitaltwins-signalr-webapp-sample-main.zip. Packa upp mappen.

I det här avsnittet skapar du en grundläggande Azure SignalR-instans som ska användas för din app. Följande steg använder Azure-portalen för att skapa en ny instans, men du kan också använda Azure CLI. Mer information finns i kommandot az signalr create i Cli-referensen för Azure SignalR Service.

  1. Logga in på Azure-portalen.
  2. Välj + Skapa en resurs längst upp till vänster på sidan.
  3. På sidan Skapa en resurs går du till textrutan tjänsten Search s och marketplace och anger signalr och väljer sedan SignalR Service i listan.
  4. På sidan SignalR Service väljer du Skapa.
  5. På fliken Grundläggande anger du viktig information för din nya SignalR Service-instans. Ange följande värden:
Fält Föreslaget värde beskrivning
Abonnemang Välj din prenumeration Välj den prenumeration som du vill använda för att skapa en ny SignalR Service-instans.
Resursgrupp Skapa en resursgrupp med namnet SignalRTestResources Välj eller skapa en resursgrupp för SignalR-resursen. Det är användbart att skapa en ny resursgrupp för den här självstudien i stället för att använda en befintlig resursgrupp. Om du vill frigöra resurser när du har slutfört självstudien tar du bort resursgruppen.

Om du tar bort en resursgrupp tas även alla resurser som tillhör gruppen bort. Det går inte att ångra den här åtgärden. Innan du tar bort en resursgrupp kontrollerar du att den inte innehåller resurser som du vill behålla.

Mer information finns i Using resource groups to manage your Azure resources (Hantera dina Azure-resurser med hjälp av resursgrupper).
Resursnamn testsignalr Ange ett unikt resursnamn för SignalR-resursen. Om testsignaler redan har tagits i din region lägger du till en siffra eller ett tecken tills namnet är unikt.

Namnet måste vara en sträng på 1 till 63 tecken och innehålla endast siffror, bokstäver och bindestreck (-). Namnet kan inte starta eller sluta med bindestreckstecknet och efterföljande bindestreck är inte giltiga.
Region Välj din region Välj lämplig region för din nya SignalR Service-instans.

Azure SignalR Service är för närvarande inte tillgängligt i alla regioner. Mer information finns i Tillgänglighet för Azure SignalR Service-regionen
Prisnivå Välj Ändra och välj sedan Kostnadsfri (endast dev/test). Välj Välj för att bekräfta ditt val av prisnivå. Azure SignalR Service har tre prisnivåer: Kostnadsfri, Standard och Premium. Självstudier använder den kostnadsfria nivån, om inget annat anges i förutsättningarna.

Mer information om funktionsskillnader mellan nivåer och priser finns i Prissättning för Azure SignalR Service
Tjänstläge Välj lämpligt tjänstläge Använd Standard när du är värd för SignalR Hub-logiken i dina webbappar och använder SignalR-tjänsten som proxy. Använd Serverlös när du använder serverlösa tekniker som Azure Functions som värd för SignalR Hub-logiken.

Klassiskt läge är endast för bakåtkompatibilitet och rekommenderas inte att använda.

Mer information finns i Tjänstläge i Azure SignalR Service.

Du behöver inte ändra inställningarna på flikarna Nätverk och Taggar för SignalR-självstudierna.

  1. Välj knappen Granska + skapa längst ned på fliken Grundläggande.
  2. På fliken Granska + skapa granskar du värdena och väljer sedan Skapa. Det tar en stund innan distributionen har slutförts.
  3. När distributionen är klar väljer du knappen Gå till resurs .
  4. På sidan SignalR-resurs väljer du Nycklar på menyn till vänster under Inställningar.
  5. Kopiera Anslut ionssträngen för primärnyckeln. Du behöver den här anslutningssträng för att konfigurera appen senare i den här självstudien.

Låt webbläsarfönstret vara öppet på Azure-portalen eftersom du använder det igen i nästa avsnitt.

Publicera och konfigurera Azure Functions-appen

I det här avsnittet konfigurerar du två Azure-funktioner:

  • negotiate – en HTTP-utlösarfunktion. Den använder SignalR Anslut ionInfo-indatabindningen för att generera och returnera giltig anslutningsinformation.
  • broadcast – En Event Grid-utlösarfunktion . Den tar emot Telemetridata för Azure Digital Twins via händelserutnätet och använder utdatabindningen för SignalR-instansen som du skapade i föregående steg för att sända meddelandet till alla anslutna klientprogram.

Starta Visual Studio eller valfri kodredigerare och öppna kodlösningen i mappen digital-twins-samples-main\ADTSampleApp . Gör sedan följande steg för att skapa funktionerna:

  1. I SampleFunctionsApp-projektet skapar du en ny C#-klass med namnet SignalRFunctions.cs.

  2. Ersätt innehållet i klassfilen med följande kod:

    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. Gå till mappen digital-twins-samples-main\AdtSampleApp\SampleFunctionsApp i Visual Studio eller något kommandofönster på datorn och kör följande kommando för att installera SignalRService NuGet-paketet i projektet:

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

    Om du kör det här kommandot bör du lösa eventuella beroendeproblem i klassen.

  4. Publicera funktionen till Azure med den metod du föredrar.

    Anvisningar om hur du publicerar funktionen med Visual Studio finns i Utveckla Azure Functions med Visual Studio. Anvisningar om hur du publicerar funktionen med Visual Studio Code finns i Skapa en C#-funktion i Azure med Hjälp av Visual Studio Code. Anvisningar om hur du publicerar funktionen med hjälp av Azure CLI finns i Skapa en C#-funktion i Azure från kommandoraden.

Konfigurera funktionen

Konfigurera sedan funktionen så att den kommunicerar med din Azure SignalR-instans. Du börjar med att samla in SignalR-instansens anslutningssträng och sedan lägga till den i funktionsappens inställningar.

  1. Gå till Azure-portalen och sök efter namnet på din SignalR-instans i sökfältet överst i portalen. Välj instansen för att öppna den.

  2. Välj Nycklar på instansmenyn för att visa anslutningssträng för SignalR-tjänstinstansen.

  3. Välj ikonen Kopiera för att kopiera den primära ANSLUTNINGSSTRÄNGen.

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

  4. Lägg slutligen till din Azure SignalR-anslutningssträng i funktionens appinställningar med hjälp av följande Azure CLI-kommando. Ersätt också platshållarna med resursgruppen och apptjänstens/funktionsappens namn från självstudien. Kommandot kan köras i Azure Cloud Shell eller lokalt om du har Azure CLI installerat på datorn:

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

    Utdata från det här kommandot skriver ut alla appinställningar som konfigurerats för din Azure-funktion. Leta efter längst ned i listan för AzureSignalRConnectionString att kontrollera att den har lagts till.

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

Anslut funktionen till Event Grid

Prenumerera sedan på den sända Azure-funktionen till det Event Grid-ämne som du skapade under självstudiekursen. Med den här åtgärden kan telemetridata flöda från termostat67-tvillingen via Event Grid-ämnet och till funktionen. Härifrån kan funktionen sända data till alla klienter.

Om du vill sända data skapar du en händelseprenumeration från ditt Event Grid-ämne till din utsända Azure-funktion som slutpunkt.

I Azure-portalen navigerar du till event grid-ämnet genom att söka efter dess namn i det övre sökfältet. Välj + Händelseprenumeration.

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

På sidan Skapa händelseprenumeration fyller du i fälten enligt följande (fält som fylls i som standard nämns inte):

  • INFORMATION OM HÄNDELSEPRENUMERATION>: Ge händelseprenumerationen ett namn.
  • SLUTPUNKTSINFORMATION>Slutpunktstyp: Välj Azure-funktion i menyalternativen.
  • SLUTPUNKTSINFORMATION Slutpunkt: Välj länken Välj en slutpunkt, som öppnar fönstret Välj Azure-funktion:>
    • Fyll i din prenumeration, resursgrupp, funktionsapp och funktion (sändning). Vissa av dessa fält kan fyllas i automatiskt när du har valt prenumerationen.
    • Välj Bekräfta val.

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

På sidan Skapa händelseprenumeration väljer du Skapa.

Nu bör du se två händelseprenumerationer på sidan Event Grid-ämne .

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

Konfigurera och köra webbappen

I det här avsnittet visas resultatet i praktiken. Konfigurera först exempelklientwebbappen så att den ansluter till det Azure SignalR-flöde som du har konfigurerat. Sedan startar du den simulerade enhetsexempelappen som skickar telemetridata för enheten via din Azure Digital Twins-instans. Därefter visar du exempelwebbappen för att se simulerade enhetsdata som uppdaterar exempelwebbappen i realtid.

Konfigurera exempelklientwebbappen

Därefter konfigurerar du exempelklientwebbappen. Börja med att samla in HTTP-slutpunkts-URL:en för förhandlingsfunktionen och använd den sedan för att konfigurera appkoden på datorn.

  1. Gå till sidan Funktionsappar i Azure-portalen och välj funktionsappen i listan. I appmenyn väljer du Funktioner och väljer funktionen negotiate.

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

  2. Välj Hämta funktions-URL och kopiera upp värdet via /api (inkludera inte den senaste /negotiate?). Du använder det här värdet i nästa steg.

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

  3. Använd Visual Studio eller valfri kodredigerare och öppna den uppackade mappen digitaltwins-signalr-webapp-sample-main som du laddade ned i avsnittet Ladda ned exempelprogram.

  4. Öppna filen src/App.js och ersätt funktions-URL:en i HubConnectionBuilder med HTTP-slutpunkts-URL:en för den förhandlingsfunktion som du sparade i föregående steg:

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

  5. Gå till mappen digitaltwins-signalr-webapp-sample-main\src i Kommandotolken för Visual Studio eller något kommandofönster på datorn. Kör följande kommando för att installera de beroende nodpaketen:

    npm install

Ange sedan behörigheter i funktionsappen i Azure-portalen:

  1. På sidan Funktionsappar i Azure-portalen väljer du din funktionsappinstans.

  2. Rulla nedåt på instansmenyn och välj CORS. På CORS-sidan lägger du till http://localhost:3000 som ett tillåtet ursprung genom att ange det i den tomma rutan. Markera kryssrutan för Aktivera Åtkomstkontroll-Tillåt-autentiseringsuppgifter och välj Spara.

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

Kör enhetssimulatorn

Under självstudien från slutpunkt till slutpunkt konfigurerade du enhetssimulatorn för att skicka data via en IoT Hub och till din Azure Digital Twins-instans.

Starta nu simulatorprojektet i digital-twins-samples-main\DeviceSimulator\DeviceSimulator.sln. Om du använder Visual Studio kan du öppna projektet och sedan köra det med den här knappen i verktygsfältet:

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

Ett konsolfönster öppnas och visar simulerade telemetrimeddelanden för enhetstemperatur. Dessa meddelanden skickas via din Azure Digital Twins-instans, där de sedan hämtas av Azure-funktionerna och SignalR.

Du behöver inte göra något annat i den här konsolen, men låt det vara igång medan du slutför nästa steg.

Visa resultaten

Om du vill se resultatet startar du webbappexemplet för SignalR-integrering. Du kan göra det från valfritt konsolfönster på platsen digitaltwins-signalr-webapp-sample-main\src genom att köra det här kommandot:

npm start

Om du kör det här kommandot öppnas ett webbläsarfönster som kör exempelappen, som visar en visuell temperaturmätare. När appen körs bör du börja se temperaturtelemetrivärdena från enhetssimulatorn som sprids via Azure Digital Twins som återspeglas av webbappen i realtid.

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

Rensa resurser

Om du inte längre behöver de resurser som skapats i den här artikeln följer du de här stegen för att ta bort dem.

Med Azure Cloud Shell eller lokala Azure CLI kan du ta bort alla Azure-resurser i en resursgrupp med kommandot az group delete . Om du tar bort resursgruppen tas även följande bort:

  • Azure Digital Twins-instansen (från självstudien från slutpunkt till slutpunkt)
  • IoT-hubben och hubbens enhetsregistrering (från självstudien från slutpunkt till slutpunkt)
  • Event Grid-ämnet och tillhörande prenumerationer
  • Azure Functions-appen, inklusive alla tre funktionerna och associerade resurser som lagring
  • Azure SignalR-instansen

Viktigt!

Att ta bort en resursgrupp kan inte ångras. Resursgruppen och alla resurser som ingår i den tas bort permanent. Kontrollera att du inte av misstag tar bort fel resursgrupp eller resurser.

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

Ta slutligen bort projektexempelmapparna som du laddade ned till din lokala dator (digital-twins-samples-main.zip, digitaltwins-signalr-webapp-sample-main.zip och deras uppackade motsvarigheter).

Nästa steg

I den här artikeln konfigurerar du Azure-funktioner med SignalR för att sända Azure Digital Twins-telemetrihändelser till ett exempelklientprogram.

Läs mer om Azure SignalR Service:

Eller läs mer om Azure SignalR Service Authentication med Azure Functions: