Dela via

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 Connect som 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 Portal med ditt Azure-konto eftersom du måste använda det i den här guiden.

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

      Skärmbild av lagringsplatsen digital-twins-samples på GitHub och stegen för att ladda ned den som en zip-fil.

    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.

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 över Azure-tjänster i ett scenario från slutpunkt till slutpunkt som visar data som flödar in och ut ur Azure Digital Twins.

Skapa Azure SignalR-instans

Skapa sedan en Azure SignalR-instans som ska användas i den här artikeln genom att följa anvisningarna i Skapa en Azure SignalR Service-instans (för tillfället slutför du bara stegen i det här avsnittet).

Låt webbläsarfönstret vara öppet för Azure Portal, 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 SignalRConnectionInfo-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.14.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 Portal 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.

    Skärmbild av Azure Portal som visar sidan Nycklar för SignalR-instansen. Anslutningssträng kopieras.

  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.

    Skärmbild av utdata i ett kommandofönster som visar ett listobjekt med namnet

Ansluta 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 Portal navigerar du till event grid-ämnet genom att söka efter dess namn i det övre sökfältet. Välj + Händelseprenumeration.

Skärmbild av hur du skapar en händelseprenumeration i 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.

Skärmbild av formuläret för att skapa en händelseprenumeration i Azure Portal.

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

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

Skärmbild av Azure Portal som visar två händelseprenumerationer på sidan Event Grid-ämne.

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 för Azure Portal och välj funktionsappen i listan. I appmenyn väljer du Funktioner och väljer funktionen negotiate.

    Skärmbild av Azure Portal funktionsappar, med

  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.

    Skärmbild av Azure Portal som visar funktionen

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

  1. På sidan Azure Portal funktionsappar 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.

    Skärmbild av Azure Portal som visar CORS-inställningen i Azure-funktionen.

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:

Skärmbild av startknappen i Visual Studio med Projektet DeviceSimulator öppet.

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.

Skärmbild av exempelklientwebbappen som visar en visuell temperaturmätare. Den reflekterade temperaturen är 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 de projektexempelmappar 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: