Share via

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.

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.

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

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 of the digital-twins-samples repo on GitHub and the steps for downloading it as a zip.

    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.

In diesem Abschnitt erstellen Sie eine einfache Azure SignalR-Instanz für Ihre App. In den folgenden Schritten wird das Azure-Portal für die Erstellung einer neuen Instanz verwendet. Sie können jedoch auch die Azure CLI verwenden. Weitere Informationen finden Sie unter dem Befehl az signalr create in der Azure SignalR Service-CLI-Referenz.

  1. Melden Sie sich beim Azure-Portal an.
  2. Wählen Sie links oben auf der Seite die Option + Ressource erstellen aus.
  3. Geben Sie auf der Seite Ressource erstellen im Textfeld Dienste und Marketplace durchsuchen den Text signalr ein und wählen Sie dann SignalR Service aus der Liste aus.
  4. Klicken Sie auf der Seite SignalR Service auf Erstellen.
  5. Geben Sie auf der Registerkarte Grundlagen die grundlegenden Informationen für Ihre neue SignalR Service-Instanz ein. Geben Sie die folgenden Werte ein:
Feld Empfohlener Wert BESCHREIBUNG
Abonnement Auswählen Ihres Abonnements Wählen Sie das Abonnement aus, das Sie verwenden möchten, um eine neue SignalR Service-Instanz zu erstellen.
Ressourcengruppe Erstellen einer Ressourcengruppe namens SignalRTestResources Wählen Sie eine Ressourcengruppe für Ihre SignalR-Ressource aus, oder erstellen Sie eine. Es ist hilfreich, für dieses Tutorial eine neue Ressourcengruppe zu erstellen, anstatt eine vorhandene Ressourcengruppe zu verwenden. Löschen Sie die Ressourcengruppe, um nach Abschluss des Tutorials Ressourcen freizugeben.

Durch das Löschen einer Ressourcengruppe werden auch alle Ressourcen dieser Gruppe gelöscht. Diese Aktion kann nicht rückgängig gemacht werden. Bevor Sie eine Ressourcengruppe löschen, stellen Sie sicher, dass sie keine Ressourcen enthält, die Sie behalten möchten.

Weitere Informationen finden Sie unter Verwenden von Ressourcengruppen zum Verwalten von Azure-Ressourcen.
Ressourcenname testsignalr Geben Sie für die SignalR-Ressource einen eindeutigen Ressourcennamen ein. Wenn testsignalr bereits in Ihrer Region belegt ist, fügen Sie Ziffern oder Zeichen hinzu, bis der Name eindeutig ist.

Der Name muss zwischen 1 und 63 Zeichen lang sein und darf nur Zahlen, Buchstaben und den Bindestrich (-) enthalten. Der Name darf weder mit dem Bindestrich beginnen oder enden noch mehrere aufeinanderfolgende Bindestriche enthalten.
Region Wählen Sie Ihre Region aus. Wählen Sie die entsprechende Region für Ihre neue SignalR Service-Instanz aus.

Azure SignalR Service ist derzeit nicht in allen Regionen verfügbar. Weitere Informationen finden Sie unter Verfügbare Produkte nach Region.
Preisstufe Klicken Sie auf Ändern und dann auf Free (nur Dev/Test). Klicken Sie auf Auswählen, um Ihre Tarifauswahl zu bestätigen. Azure SignalR Service bietet drei Tarife: Free, Standard und Premium. Für Tutorials wird der Tarif Free verwendet, sofern in den Voraussetzungen nichts anderes angegeben ist.

Weitere Informationen zu den Funktionsunterschieden zwischen Tarifen und Preisen finden Sie unter Azure SignalR Service – Preise.
Dienstmodus Wählen Sie den entsprechenden Dienstmodus Verwenden Sie Standard, wenn Sie die SignalR-Hublogik in Ihren Web-Apps hosten und den SignalR Service als Proxy verwenden. Verwenden Sie Serverlos, wenn Sie serverlose Technologien wie Azure Functions verwenden, um die SignalR-Hublogik zu hosten.

Der Modus Klassisch ist nur für die Abwärtskompatibilität vorgesehen und wird nicht empfohlen.

Weitere Informationen finden Sie unter Dienstmodi in Azure SignalR Service.

Sie müssen die Einstellungen auf den Registerkarten Netzwerk und Tags für die SignalR-Tutorials nicht ändern.

  1. Klicken Sie unten auf der Registerkarte Grundlagen auf die Schaltfläche Überprüfen und erstellen.
  2. Überprüfen Sie auf der Registerkarte Überprüfen und erstellen die Werte und klicken Sie dann auf Erstellen. Die Bereitstellung dauert ein paar Augenblicke.
  3. Klicken Sie nach Abschluss der Bereitstellung auf die Schaltfläche Zu Ressource wechseln.
  4. Klicken Sie auf der SignalR-Ressourcenseite im Menü auf der linken Seite unter Einstellungen auf Schlüssel.
  5. Kopieren Sie die Verbindungszeichenfolge für den Primärschlüssel. Sie benötigen diese Verbindungszeichenfolge später in diesem Tutorial, um Ihre App zu konfigurieren.

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.2.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 of the Azure portal that shows the Keys page for the SignalR instance. The connection string is being copied.

  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 of the output in a command window, showing a list item called 'AzureSignalRConnectionString'.

Verbinden der Funktion mit Event Grid

Abonnieren Sie als Nächstes die Übertragene Azure-Funktion zum Thema "Event Grid", das Sie während der Lernprogrammvoraussetzungen 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 übertragen, erstellen Sie ein Ereignisabonnement aus Ihrem Event Grid-Thema zu Ihrer Übertragen-Azure-Funktion 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 of how to create an event subscription in the 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, der ein Fenster "Azure-Funktion auswählen" ö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 of the form for creating an event subscription in the 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 of the Azure portal showing two event subscriptions in the Event Grid topic page.

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 simulierte Gerätebeispiel-App, die Geräte-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. Sammeln Sie zunächst die HTTP-Endpunkt-URL der Aushandlungsfunktion , und verwenden Sie sie dann, um den App-Code auf Ihrem Computer 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 of the Azure portal function apps, with 'Functions' highlighted in the menu and 'negotiate' highlighted in the list of functions.

  2. Wählen Sie die URL der Funktion abrufen aus, und kopieren Sie den Wert über /api nach oben (schließen Sie nicht die letzte /negotiate?) ein. Dieser Wert wird im nächsten Schritt verwendet.

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

  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 of the Azure portal showing the CORS Setting in Azure Function.

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 of the Visual Studio start button with the DeviceSimulator project open.

In einem Konsolenfenster werden simulierte Gerätetemperatur-Telemetriemeldungen geöffnet und 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 of the sample client web app, showing a visual temperature gauge. The temperature reflected is 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: