Azure Digital Twins integreren met Azure SignalR Service

Artikel
08/21/2024

In dit artikel leert u hoe u Azure Digital Twins integreert met Azure SignalR Service.

Met de oplossing die in dit artikel wordt beschreven, kunt u telemetriegegevens van digitale dubbels pushen naar verbonden clients, zoals één webpagina of een mobiele toepassing. Als gevolg hiervan worden clients bijgewerkt met realtime metrische gegevens en status van IoT-apparaten, zonder de server te hoeven peilen of nieuwe HTTP-aanvragen voor updates te verzenden.

Vereisten

Dit zijn de vereisten die u moet voltooien voordat u doorgaat:

Voordat u uw oplossing in dit artikel integreert met Azure SignalR Service, moet u de Azure Digital Twins Connect een end-to-end-oplossing voltooien, omdat dit procedureartikel hierop voortbouwt. In de zelfstudie wordt uitgelegd hoe u een Azure Digital Twins-exemplaar instelt dat werkt met een virtueel IoT-apparaat om updates voor digitale dubbels te activeren. In dit artikel worden deze updates verbonden met een voorbeeldweb-app met behulp van Azure SignalR Service.
U hebt de volgende waarden uit de zelfstudie nodig:
- Event Grid-onderwerp
- Resourcegroep
- Naam van app-service-/functie-app
U hebt Node.js op uw computer geïnstalleerd.

Meld u aan bij Azure Portal met uw Azure-account, omdat u dit in deze handleiding moet gebruiken.

De voorbeeldtoepassingen downloaden

Download eerst de vereiste voorbeeld-apps. U hebt beide van de volgende voorbeelden nodig:

End-to-end-voorbeelden van Azure Digital Twins: dit voorbeeld bevat een AdtSampleApp met twee Azure-functies voor het verplaatsen van gegevens rond een Azure Digital Twins-exemplaar (meer informatie over dit scenario vindt u in Een end-to-end-oplossing verbinden). Het bevat ook een DeviceSimulator-voorbeeldtoepassing die een IoT-apparaat simuleert en elke seconde een nieuwe temperatuurwaarde genereert.
- Als u het voorbeeld nog niet hebt gedownload als onderdeel van de zelfstudie in Vereisten, gaat u naar het voorbeeld en selecteert u de knop Code bladeren onder de titel. Als u dit doet, gaat u naar de GitHub-opslagplaats voor de voorbeelden, die u kunt downloaden als een .zip door de knop Code en ZIP downloaden te selecteren.
Met deze knop wordt een kopie van de voorbeeldopslagplaats op uw computer gedownload, zoals digital-twins-samples-main.zip. Pak de map uit.
Voorbeeld van een web-app voor SignalR-integratie: deze react-voorbeeldweb-app verbruikt telemetriegegevens van Azure Digital Twins van een Azure SignalR-service.
- Navigeer naar de voorbeeldkoppeling en gebruik hetzelfde downloadproces om een kopie van het voorbeeld naar uw computer te downloaden, zoals digitaltwins-signalr-webapp-sample-main.zip. Pak de map uit.

Architectuur voor de oplossing

U koppelt Azure SignalR Service aan Azure Digital Twins via het onderstaande pad. Secties A, B en C in het diagram worden genomen uit het architectuurdiagram van de end-to-end zelfstudievereisten. In dit artikel gaat u sectie D bouwen over de bestaande architectuur, die twee nieuwe Azure-functies bevat die communiceren met SignalR en client-apps.

Azure SignalR-exemplaar maken

Maak vervolgens een Azure SignalR-exemplaar dat u in dit artikel wilt gebruiken door de instructies te volgen in Een Azure SignalR Service-exemplaar maken (voorlopig voltooit u alleen de stappen in deze sectie).

Laat het browservenster geopend in Azure Portal, omdat u het opnieuw in de volgende sectie gaat gebruiken.

De Azure Functions-app publiceren en configureren

In deze sectie gaat u twee Azure-functies instellen:

negotiate - Een HTTP-triggerfunctie. Deze maakt gebruik van de SignalRConnectionInfo-invoerbinding om geldige verbindingsgegevens te genereren en te retourneren.
broadcast : een Event Grid-triggerfunctie . Het ontvangt telemetriegegevens van Azure Digital Twins via het gebeurtenisraster en gebruikt de uitvoerbinding van het SignalR-exemplaar dat u in de vorige stap hebt gemaakt om het bericht uit te zenden naar alle verbonden clienttoepassingen.

Start Visual Studio of een andere code-editor naar keuze en open de codeoplossing in de map digital-twins-samples-main\ADTSampleApp . Voer vervolgens de volgende stappen uit om de functies te maken:

Maak in het Project SampleFunctionsApp een nieuwe C#-klasse met de naam SignalRFunctions.cs.

Vervang de inhoud van het klassebestand door de volgende code:

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 }
                });
        }
    }
}

Navigeer in het Pakketbeheer consolevenster van Visual Studio of een opdrachtvenster op uw computer naar de map digital-twins-samples-main\AdtSampleApp\SampleFunctionsApp en voer de volgende opdracht uit om het SignalRService NuGet-pakket te installeren in het project:
```
dotnet add package Microsoft.Azure.WebJobs.Extensions.SignalRService --version 1.14.0
```
Als u deze opdracht uitvoert, moet u eventuele afhankelijkheidsproblemen in de klasse oplossen.
Publiceer de functie naar Azure met behulp van uw voorkeursmethode.

Zie Azure Functions ontwikkelen met Behulp van Visual Studio voor instructies over het publiceren van de functie met behulp van Visual Studio. Zie Een C#-functie maken in Azure met behulp van Visual Studio Code voor instructies over het publiceren van de functie met behulp van Visual Studio Code. Zie Een C#-functie maken in Azure vanaf de opdrachtregel voor instructies over het publiceren van de functie met behulp van de Azure CLI.

De functie configureren

Configureer vervolgens de functie om te communiceren met uw Azure SignalR-exemplaar. U begint met het verzamelen van de verbindingsreeks van het SignalR-exemplaar en voegt deze vervolgens toe aan de instellingen van de functions-app.

Ga naar Azure Portal en zoek naar de naam van uw SignalR-exemplaar in de zoekbalk boven aan de portal. Selecteer het exemplaar om het te openen.
Selecteer Sleutels in het exemplaarmenu om de verbindingsreeks s voor het SignalR-service-exemplaar weer te geven.
Selecteer het pictogram Kopiëren om de primaire VERBINDINGSREEKS te kopiëren.
Voeg ten slotte uw Azure SignalR-verbindingsreeks toe aan de app-instellingen van de functie met behulp van de volgende Azure CLI-opdracht. Vervang ook de tijdelijke aanduidingen door de naam van uw resourcegroep en app service/functie-app aan de vereisten voor de zelfstudie. De opdracht kan worden uitgevoerd in Azure Cloud Shell of lokaal als u de Azure CLI op uw computer hebt geïnstalleerd:
```
az functionapp config appsettings set --resource-group <your-resource-group> --name <your-function-app-name> --settings "AzureSignalRConnectionString=<your-Azure-SignalR-ConnectionString>"
```
In de uitvoer van deze opdracht worden alle app-instellingen afgedrukt die zijn ingesteld voor uw Azure-functie. AzureSignalRConnectionString Zoek naar de onderkant van de lijst om te controleren of deze is toegevoegd.

De functie verbinden met Event Grid

Abonneer vervolgens de Broadcast Azure-functie op het Event Grid-onderwerp dat u tijdens de zelfstudie hebt gemaakt. Met deze actie kunnen telemetriegegevens van de thermostat67-dubbel via het Event Grid-onderwerp en naar de functie stromen. Vanaf hier kan de functie de gegevens uitzenden naar alle clients.

Als u de gegevens wilt uitzenden, maakt u een gebeurtenisabonnement op basis van uw Event Grid-onderwerp naar uw broadcast-Azure-functie als eindpunt.

Navigeer in Azure Portal naar uw Event Grid-onderwerp door te zoeken naar de naam ervan in de bovenste zoekbalk. Selecteer + Gebeurtenisabonnement.

Schermopname van het maken van een gebeurtenisabonnement in Azure Portal.

Vul op de pagina Gebeurtenisabonnement maken de velden als volgt in (velden die standaard worden ingevuld, worden niet vermeld):

NAAM VAN GEBEURTENISABONNEMENT>: Geef een naam op voor uw gebeurtenisabonnement.
Endpoint DETAILS>Endpoint Type: Select Azure Function in the menu options.
EindpuntDETAILS>eindpunt: selecteer de koppeling Een eindpunt selecteren, waarmee een venster Azure-functie selecteren wordt geopend:
- Vul uw abonnement, resourcegroep, functie-app en functie in (broadcast). Sommige van deze velden kunnen automatisch worden ingevuld nadat u het abonnement hebt geselecteerd.
- Selecteer Confirm Selection (Selectie bevestigen).

Schermopname van het formulier voor het maken van een gebeurtenisabonnement in Azure Portal.

Selecteer Maken als u terug bent op de pagina Gebeurtenisabonnement maken.

Op dit moment ziet u twee gebeurtenisabonnementen op de pagina Event Grid-onderwerp .

De web-app configureren en uitvoeren

In deze sectie ziet u het resultaat in actie. Configureer eerst de voorbeeldclientweb-app om verbinding te maken met de Azure SignalR-stroom die u hebt ingesteld. Vervolgens start u de voorbeeld-app van het gesimuleerde apparaat waarmee telemetriegegevens van apparaten worden verzonden via uw Azure Digital Twins-exemplaar. Daarna bekijkt u de voorbeeldweb-app om de gesimuleerde apparaatgegevens weer te geven die de voorbeeldweb-app in realtime bijwerken.

De voorbeeldclientweb-app configureren

Vervolgens configureert u de voorbeeldclientweb-app. Begin met het verzamelen van de HTTP-eindpunt-URL van de onderhandelingsfunctie en gebruik deze vervolgens om de app-code op uw computer te configureren.

Ga naar de pagina Functie-apps van Azure Portal en selecteer uw functie-app in de lijst. Selecteer Functions in het app-menu en kies de onderhandelingsfunctie .
Selecteer Functie-URL ophalen en kopieer de waarde omhoog via /api (neem de laatste /negotiate niet op?). In de volgende stap gebruikt u deze waarde.
Open met Visual Studio of een code-editor naar keuze de uitgepakte map digitaltwins-signalr-webapp-sample-main die u hebt gedownload in de sectie De voorbeeldtoepassingen downloaden.
Open het bestand src/App.js en vervang de functie-URL door HubConnectionBuilder de HTTP-eindpunt-URL van de onderhandelingsfunctie die u in de vorige stap hebt opgeslagen:
```
    const hubConnection = new HubConnectionBuilder()
        .withUrl('<Function-URL>')
        .build();
```
Navigeer in de opdrachtprompt developer van Visual Studio of een opdrachtvenster op uw computer naar de map digitaltwins-signalr-webapp-sample-main\src. Voer de volgende opdracht uit om de afhankelijke knooppuntpakketten te installeren:
```
npm install
```

Stel vervolgens machtigingen in uw functie-app in azure Portal in:

Selecteer op de pagina Functie-apps van Azure Portal uw exemplaar van de functie-app.
Schuif omlaag in het exemplaarmenu en selecteer CORS. Voeg http://localhost:3000 op de CORS-pagina toe als toegestane oorsprong door deze in het lege vak in te voeren. Schakel het selectievakje in voor Access-Control-Allow-Credentials inschakelen en selecteer Opslaan.

De apparaatsimulator uitvoeren

Tijdens de end-to-end-zelfstudie hebt u de apparaatsimulator geconfigureerd om gegevens te verzenden via een IoT Hub en naar uw Azure Digital Twins-exemplaar.

Start nu het simulatorproject in digital-twins-samples-main\DeviceSimulator\DeviceSimulator.sln. Als u Visual Studio gebruikt, kunt u het project openen en het vervolgens uitvoeren met deze knop op de werkbalk:

In een consolevenster worden telemetrieberichten van gesimuleerde apparaattemperatuur geopend en weergegeven. Deze berichten worden verzonden via uw Azure Digital Twins-exemplaar, waar ze vervolgens worden opgehaald door de Azure-functies en SignalR.

U hoeft niets anders te doen in deze console, maar laat deze actief terwijl u de volgende stap voltooit.

Bekijk de resultaten

Als u de resultaten in actie wilt zien, start u het voorbeeld van de web-app signalR-integratie. U kunt dit doen vanuit elk consolevenster op de locatie digitaltwins-signalr-webapp-sample-main\src door deze opdracht uit te voeren:

npm start

Als u deze opdracht uitvoert, wordt een browservenster geopend met de voorbeeld-app, waarin een visuele temperatuurmeter wordt weergegeven. Zodra de app wordt uitgevoerd, moet u de temperatuurtelemetriewaarden van de apparaatsimulator zien die worden doorgegeven via Azure Digital Twins die in realtime worden doorgevoerd door de web-app.

Schermopname van de voorbeeldclientweb-app met een visuele temperatuurmeter. De temperatuur is 67,52.

Resources opschonen

Als u de resources die in dit artikel zijn gemaakt niet meer nodig hebt, volgt u deze stappen om ze te verwijderen.

Met de Azure Cloud Shell of lokale Azure CLI kunt u alle Azure-resources in een resourcegroep verwijderen met de opdracht az group delete . Als u de resourcegroep verwijdert, wordt ook het volgende verwijderd:

Het Azure Digital Twins-exemplaar (van de end-to-end-zelfstudie)
De IoT-hub en de hubapparaatregistratie (van de end-to-end-zelfstudie)
Het Event Grid-onderwerp en de bijbehorende abonnementen
De Azure Functions-app, inclusief alle drie functies en gekoppelde resources, zoals opslag
Het Azure SignalR-exemplaar

Belangrijk

Het verwijderen van een resourcegroep kan niet ongedaan worden gemaakt. De resourcegroep en alle resources daarin worden permanent verwijderd. Zorg ervoor dat u niet per ongeluk de verkeerde resourcegroep of resources verwijdert.

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

Verwijder ten slotte de projectvoorbeeldmappen die u hebt gedownload naar uw lokale computer (digital-twins-samples-main.zip, digitaltwins-signalr-webapp-sample-main.zip en de uitgepakte tegenhangers).

Volgende stappen

In dit artikel stelt u Azure-functies in met SignalR om Telemetriegebeurtenissen van Azure Digital Twins uit te zenden naar een voorbeeldclienttoepassing.

Hierna vindt u meer informatie over Azure SignalR Service:

Wat is Azure SignalR Service?

Of lees meer over Azure SignalR-serviceverificatie met Azure Functions:

Verificatie van Azure SignalR-service

Delen via