Freigeben über

Integrieren von Azure Digital Twins in Azure SignalR Service

  • Artikel

In diesem Artikel erfahren Sie, wie Sie Azure Digital Twins in Azure SignalR Service integrieren.

Mithilfe der in diesem Artikel beschriebenen Lösung können Sie Telemetriedaten des digitalen Zwillings an verbundene Clients pushen, z. B. an eine einzelne Webseite oder eine mobile Anwendung. Das Ergebnis ist, dass Clients mit Echtzeitmetriken und Statusinformationen von IoT-Geräten aktualisiert werden, ohne dass der Server abgefragt werden muss oder neue HTTP-Anforderungen für Updates gesendet werden müssen.

Voraussetzungen

Folgende Voraussetzungen müssen erfüllt sein, bevor Sie fortfahren können:

  • Bevor Sie Ihre Lösung in Azure SignalR Service integrieren, sollten Sie das Azure Digital Twins-Tutorial Verbinden einer End-to-End-Lösung durcharbeiten, da die Vorgehensweise in diesem Artikel darauf aufbaut. Das Tutorial führt Sie durch das Einrichten einer Azure Digital Twins-Instanz, die mit einem virtuellen IoT-Gerät funktioniert, um Updates für digitale Zwillinge auszulösen. In diesem Artikel zur Vorgehensweise werden diese Updates per Azure SignalR Service mit einer Beispiel-Web-App verbunden.

  • Sie benötigen die folgenden Werte aus dem Tutorial:

    • Event Grid-Thema
    • Resource group
    • App-Dienst-/Funktions-App-Name

  • Auf Ihrem Computer muss Node.js installiert sein.

Stellen Sie sicher, dass Sie sich mit Ihrem Azure-Konto beim Azure-Portal anmelden, da Sie es in diesem Leitfaden verwenden müssen.

Herunterladen der Beispielanwendungen

Laden Sie zunächst die erforderlichen Beispiel-Apps herunter. Sie benötigen die beiden folgenden Beispiele:

  • End-to-End-Beispiele für Azure Digital Twins: Dieses Beispiel enthält eine AdtSampleApp mit zwei Azure-Funktionen zum Verschieben von Daten in eine Azure Digital Twins-Instanz (weitere Informationen zu diesem Szenario finden Sie unter Verbinden einer End-to-End-Lösung). Es enthält auch eine DeviceSimulator-Beispielanwendung, die ein IOT-Gerät simuliert und jede Sekunde einen neuen Temperaturwert generiert.

    • Wenn Sie das Beispiel nicht bereits als Teil des Tutorials unter Voraussetzungen heruntergeladen haben, navigieren Sie zum Beispiel, und wählen die Schaltfläche Code durchsuchen unter dem Titel aus. Dadurch gelangen Sie zum GitHub-Repository für die Beispiele, die Sie als ZIP-Datei herunterladen können. Wählen Sie hierzu die Schaltfläche Code und anschließend ZIP herunterladen aus.

      Screenshot des Repositorys „digital-twins-samples“ auf GitHub und der Schritte zum Herunterladen des Repositorys als ZIP-Datei.

    Diese Schaltfläche lädt eine Kopie des Beispielrepositorys als digital-twins-samples-main.zip auf Ihren Computer herunter. Entzippen Sie den Ordner.

  • Web-App-Beispiel für SignalR-Integration: Diese Beispiel-Web-App (React) nutzt Azure Digital Twins-Telemetriedaten über eine Azure SignalR Service-Instanz.

    • Navigieren Sie zum Link des Beispiels, und führen Sie den gleichen Downloadprozess durch, um eine Kopie des Beispiels auf Ihren Computer herunterzuladen (digitaltwins-signalr-webapp-sample-main.zip). Entzippen Sie den Ordner.

Lösungsarchitektur

Sie fügen Azure SignalR Service über den unten angegebenen Pfad an Azure Digital Twins an. Die Abschnitte A, B und C in der Abbildung stammen aus dem Architekturdiagramm, das unter Tutorial: Erstellen einer End-to-End-Lösung im Abschnitt „Voraussetzungen“ enthalten ist. In diesem Anleitungsartikel erstellen Sie Abschnitt D für die vorhandene Architektur, der zwei neue Azure-Funktionen enthält, die mit SignalR und Client-Apps kommunizieren.

Diagramm: Azure-Dienste in einem End-to-End-Szenario, das den Ein- und Ausgang von Daten bei Azure Digital Twins darstellt

Erstellen einer Azure SignalR-Instanz

Als Nächstes erstellen Sie eine Azure SignalR-Instanz, die Sie in diesem Artikel verwenden möchten, indem Sie die Anweisungen unter Erstellen einer Azure SignalR Service-Instanz befolgen (führen Sie vorerst nur die Schritte in diesem Abschnitt aus).

Lassen Sie das Browserfenster mit dem Azure-Portal geöffnet, da Sie es im nächsten Abschnitt erneut verwenden.

Veröffentlichen und Konfigurieren der Azure-Funktions-App

In diesem Abschnitt richten Sie zwei Azure-Funktionen ein:

  • negotiate: eine HTTP-Triggerfunktion. Sie verwendet die SignalRConnectionInfo-Eingabebindung, um gültige Verbindungsinformationen zu generieren und zurückzugeben.
  • broadcast: eine Event Grid-Triggerfunktion. Sie empfängt Azure Digital Twins-Telemetriedaten über das Event Grid und verwendet die Ausgabebindung der im vorherigen Schritt erstellten SignalR-Instanz, um die Nachricht an alle verbundenen Clientanwendungen zu übertragen.

Starten Sie Visual Studio oder einen anderen Code-Editor Ihrer Wahl und öffnen Sie die Codelösung im Ordner digital-twins-samples-main\ADTSampleApp. Führen Sie dann die folgenden Schritte aus, um die Funktionen zu erstellen:

  1. Erstellen Sie im Projekt SampleFunctionsApp eine neue C#-Klasse namens SignalRFunctions.cs.

  2. Ersetzen Sie den Inhalt der Klassendatei durch den folgenden 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 }
                });
        }
    }
}

  3. Navigieren Sie im Fenster Paket-Manager-Konsole von Visual Studio oder in einem beliebigen Befehlsfenster auf Ihrem Computer zum Ordner digital-twins-samples-main\AdtSampleApp\SampleFunctionsApp, und führen Sie den folgenden Befehl aus, um das SignalRService NuGet-Paket für das Projekt zu installieren:

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

    Die Ausführung dieses Befehls sollte alle Abhängigkeitsprobleme in der Klasse beheben.

  4. Veröffentlichen Sie die Funktion mit der von Ihnen bevorzugten Methode in Azure.

    Anweisungen zum Veröffentlichen der Funktion mithilfe von Visual Studio finden Sie unter Entwickeln von Azure Functions mithilfe von Visual Studio. Anweisungen zum Veröffentlichen der Funktion mithilfe von Visual Studio Code finden Sie unter Erstellen einer C#-Funktion in Azure mit Visual Studio Code. Anweisungen zum Veröffentlichen der Funktion mithilfe der Azure CLI finden Sie unter Erstellen einer C#-Funktion über die Befehlszeile in Azure.

Konfigurieren der Funktion

Konfigurieren Sie als Nächstes die Funktion für die Kommunikation mit Ihrer Azure SignalR-Instanz. Zunächst ermitteln Sie die Verbindungszeichenfolge der SignalR-Instanz und fügen diese dann den Einstellungen der Funktions-App hinzu.

  1. Navigieren Sie zum Azure-Portal, und suchen Sie oben im Portal in der Suchleiste nach dem Namen Ihrer SignalR-Instanz. Wählen Sie die Instanz aus, um sie zu öffnen.

  2. Wählen Sie im Menü der Instanz die Option Schlüssel aus, um die Verbindungszeichenfolgen für die SignalR Service-Instanz anzuzeigen.

  3. Wählen Sie das Symbol Kopieren aus, um die primäre Verbindungszeichenfolge zu kopieren.

    Screenshot des Azure-Portals mit der Seite „Schlüssel“ für die SignalR-Instanz. Die Verbindungszeichenfolge wird kopiert.

  4. Fügen Sie abschließend Ihre Azure SignalR-Verbindungszeichenfolge den App-Einstellungen der Funktion hinzu, indem Sie den folgenden Azure CLI-Befehl verwenden. Ersetzen Sie darüber hinaus die Platzhalter durch die Namen Ihrer Ressourcengruppe und des App-Diensts bzw. der Funktions-App aus den Voraussetzungen für das Tutorial. Der Befehl kann in Azure Cloud Shell oder lokal ausgeführt werden, wenn die Azure CLI auf Ihrem Computer installiert ist:

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

    Die Ausgabe dieses Befehls gibt alle App-Einstellungen aus, die für Ihre Azure-Funktion eingerichtet sind. Suchen Sie unten in der Liste nach AzureSignalRConnectionString, um sicherzustellen, dass der Wert hinzugefügt wurde.

    Screenshot der Ausgabe in einem Befehlsfenster mit einem Listenelement mit dem Namen „AzureSignalRConnectionString“.

Verbinden der Funktion mit Event Grid

Als Nächstes abonnieren Sie die Azure-Funktion broadcast für das Ereignisraster-Thema, das Sie während des Tutorials erstellt haben. Diese Aktion ermöglicht es, dass Telemetriedaten vom Zwilling „thermostat67“ über das Event Grid-Thema an die Funktion gesendet werden. Von hier aus kann die Funktion die Daten an alle Clients übertragen.

Um die Daten zu verbreiten, erstellen Sie ein Ereignisabonnement von Ihrem Event Grid-Thema zu Ihrer Azure-Funktion broadcast als Endpunkt.

Navigieren Sie im Azure-Portal zu Ihrem Event Grid-Thema, indem Sie in der oberen Suchleiste nach dessen Namen suchen. Klicken Sie auf + Ereignisabonnement.

Screenshot des Erstellens eines Ereignisabonnements im Azure-Portal.

Füllen Sie auf der Seite Ereignisabonnement erstellen die Felder wie folgt aus (standardmäßig ausgefüllte Felder werden nicht angegeben):

  • DETAILS ZUM EREIGNISABONNEMENT>Name: Geben Sie einen Namen für Ihr Ereignisabonnement an.
  • ENDPUNKTDETAILS>Endpunkttyp: Wählen Sie in den Menüoptionen Azure-Funktion aus.
  • ENDPUNKTDETAILS>Endpunkt: Wählen Sie den Link Endpunkt auswählen aus. Dadurch wird das Fenster Azure-Funktion auswählen geöffnet:
    • Füllen Sie die Felder Abonnement, Ressourcengruppe, Funktions-App und Funktion (broadcast) aus. Einige dieser Felder werden unter Umständen automatisch ausgefüllt, nachdem Sie das Abonnement ausgewählt haben.
    • Klicken Sie auf Auswahl bestätigen.

Screenshot des Formulars zum Erstellen eines Ereignisabonnements im Azure-Portal.

Wählen Sie auf der Seite Ereignisabonnement erstellen die Option Erstellen aus.

An diesem Punkt sollten auf der Seite Event Grid-Thema zwei Ereignisabonnements angezeigt werden.

Screenshot: Azure-Portal mit zwei Ereignisabonnements auf der Seite „Event Grid-Thema“

Konfigurieren und Ausführen der Web-App

In diesem Abschnitt wird das Ergebnis in Aktion gezeigt. Zunächst konfigurieren Sie die Beispielclient-Web-App, um eine Verbindung mit dem Azure SignalR-Flow herzustellen, den Sie eingerichtet haben. Als Nächstes starten Sie die Beispielanwendung für das simulierte Gerät, die Telemetriedaten über Ihre Azure Digital Twins-Instanz sendet. Danach zeigen Sie die Beispiel-Web-App an, um zu sehen, wie die simulierten Gerätedaten die Beispiel-Web-App in Echtzeit aktualisieren.

Konfigurieren der Beispielclient-Web-App

Konfigurieren Sie als Nächstes die Beispielclient-Web-App. Beginnen Sie damit, die HTTP-Endpunkt-URL der Funktion negotiate zu ermitteln, und verwenden Sie sie dann, um den App-Code auf Ihrem Rechner zu konfigurieren.

  1. Navigieren Sie im Azure-Portal zur Seite Funktions-Apps, und wählen Sie in der Liste Ihre Funktions-App aus. Wählen Sie im App-Menü Funktionen aus, und wählen Sie dann die negotiate-Funktion aus.

    Screenshot der Functions-Apps im Azure-Portal, wobei „Functions“ im Menü und „negotiate“ in der Liste der Funktionen hervorgehoben ist.

  2. Wählen Sie Funktions-URL abrufen aus, und kopieren Sie den Wert bis zu /api (schließen Sie die letzte Angabe /negotiate? nicht ein). Dieser Wert wird im nächsten Schritt verwendet.

    Screenshot des Azure-Portals mit der Funktion „negotiate“ und hervorgehobener Schaltfläche „Funktions-URL abrufen“ sowie hervorgehobener Funktions-URL.

  3. Öffnen Sie mithilfe von Visual Studio oder einem beliebigen Code-Editor Ihrer Wahl den entpackten Ordner digitaltwins-signalr-webapp-sample-main, den Sie im Abschnitt Herunterladen der Beispielanwendungen heruntergeladen haben.

  4. Öffnen Sie die Datei src/App.js, und ersetzen Sie die Funktions-URL in HubConnectionBuilder durch die HTTP-Endpunkt-URL der negotiate-Funktion, die Sie im vorherigen Schritt gespeichert haben:

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

  5. Navigieren Sie in der Developer-Eingabeaufforderung von Visual Studio oder in einem beliebigen Befehlsfenster auf Ihrem Computer zum Ordner digitaltwins-signalr-webapp-sample-main\src. Führen Sie den folgenden Befehl aus, um die abhängigen Knotenpakete zu installieren:

    npm install

Legen Sie nun Berechtigungen in Ihrer Funktions-App im Azure-Portal fest:

  1. Wählen Sie auf der Seite Funktions-Apps des Azure-Portals ihre Funktions-App-Instanz aus.

  2. Scrollen Sie im Instanzmenü nach unten, und wählen Sie CORS aus. Fügen Sie auf der CORS-Seite http://localhost:3000 als zulässigen Ursprung hinzu, indem Sie diese Angabe in das leere Feld eingeben. Aktivieren Sie das Kontrollkästchen Access-Control-Allow-Credentials aktivieren, und wählen Sie Speichern aus.

    Screenshot des Azure-Portals mit der CORS-Einstellung in Azure Functions.

Ausführen des Gerätesimulators

Währen des End-to-End-Voraussetzungstutorials haben Sie den Gerätesimulator konfiguriert, um Daten über einen IoT-Hub und an Ihre Azure Digital Twins-Instanz zu senden.

Starten Sie jetzt das Simulatorprojekt, das sich in digital-twins-samples-main\DeviceSimulator\DeviceSimulator.sln befindet. Wenn Sie Visual Studio verwenden, können Sie das Projekt öffnen und dann mit dieser Schaltfläche auf der Symbolleiste ausführen:

Screenshot: Visual Studio-Startschaltfläche mit geöffnetem Projekt „DeviceSimulator“

Im geöffneten Konsolenfenster werden Meldungen mit simulierten Telemetriedaten zur Gerätetemperatur angezeigt. Diese Nachrichten werden über Ihre Azure Digital Twins-Instanz gesendet. Dort werden sie dann von Azure Functions und SignalR übernommen.

Sie müssen in dieser Konsole keine weiteren Schritte ausführen, aber Sie sollten sie während des nächsten Schritts geöffnet lassen.

Die Ergebnisse anzeigen

Um die Ergebnisse in Aktion zu sehen, starten Sie das SignalR-Integrations-Web-App-Beispiel. Sie können das Beispiel in jedem Konsolenfenster im Ordner digitaltwins-signalr-webapp-sample-main\src starten, indem Sie diesen Befehl ausführen:

npm start

Durch die Ausführung dieses Befehls wird ein Browserfenster geöffnet, in dem die Beispiel-App ausgeführt wird, die ein visuelles Temperaturmessgerät angezeigt. Sobald die App ausgeführt wird, sollten Sie die Temperaturtelemetriewerte vom Gerätesimulator sehen, die über Azure Digital Twins weitergegeben und in Echtzeit von der Web-App angezeigt werden.

Screenshot der Beispielclient-Web-App, der ein visuelles Temperaturmessgerät anzeigt. Die gezeigt Temperatur ist 67,52.

Bereinigen von Ressourcen

Wenn Sie die in diesem Artikel erstellten Ressourcen nicht mehr benötigen, folgen Sie den Schritten unten, um sie zu löschen.

Bei Verwendung von Azure Cloud Shell oder der lokalen Azure CLI können Sie alle Azure-Ressourcen in einer Ressourcengruppe mit dem Befehl az group delete löschen. Wenn Sie die Ressourcengruppe entfernen, wird auch Folgendes entfernt:

  • Die Azure Digital Twins-Instanz (aus dem End-to-End-Tutorial)
  • Der IoT-Hub-und die Hub-Geräteregistrierung (aus dem End-to-End-Tutorial)
  • Das Event Grid-Thema und zugehörige Abonnements
  • Die Azure Functions-App, einschließlich aller drei Funktionen und zugeordneten Ressourcen wie Speicher
  • Die Azure SignalR-Instanz

Wichtig

Das Löschen einer Ressourcengruppe kann nicht rückgängig gemacht werden. Die Ressourcengruppe und alle darin enthaltenen Ressourcen werden unwiderruflich gelöscht. Achten Sie daher darauf, dass Sie nicht versehentlich die falsche Ressourcengruppe oder die falschen Ressourcen löschen.

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

Löschen Sie abschließend die Projektbeispielordner, die Sie auf Ihren lokalen Computer heruntergeladen haben (digital-twins-samples-main.zip, digitaltwins-signalr-webapp-sample-main.zip und die entsprechenden entpackten Daten).

Nächste Schritte

In diesem Artikel richten Sie Azure-Funktionen mit SignalR ein, um Azure Digital Twins-Telemetrieereignisse an eine Clientbeispielanwendung zu senden.

Erfahren Sie dann über Azure SignalR Service:

Erfahren Sie mehr über Azure SignalR Service-Authentifizierung mit Azure Functions: