Condividi tramite

Integrare Gemelli digitali di Azure con Servizio Azure SignalR

  • Articolo

Questo articolo descrive come integrare Gemelli digitali di Azure con Servizio Azure SignalR.

La soluzione descritta in questo articolo consente di eseguire il push dei dati di telemetria di Gemelli digitali ai client connessi, ad esempio una singola pagina Web o un'applicazione per dispositivi mobili. Di conseguenza, i client vengono aggiornati con metriche e stato in tempo reale dai dispositivi IoT, senza dover eseguire il polling del server o inviare nuove richieste HTTP per gli aggiornamenti.

Prerequisiti

Di seguito sono riportati i prerequisiti da completare prima di procedere:

  • Prima di integrare la soluzione con Servizio Azure SignalR in questo articolo, è necessario completare la soluzione Azure Digital Twins Connect per una soluzione end-to-end, perché questo articolo sulle procedure si basa su di esso. L'esercitazione illustra come configurare un'istanza di Gemelli digitali di Azure che funziona con un dispositivo IoT virtuale per attivare gli aggiornamenti dei gemelli digitali. Questo articolo di procedura connetterà tali aggiornamenti a un'app Web di esempio usando Servizio Azure SignalR.

  • Per l'esercitazione sono necessari i valori seguenti:

    • Argomento di Griglia di eventi
    • Gruppo di risorse
    • Nome dell'app del servizio app/dell'app per le funzioni

  • È necessario Node.js installato nel computer.

Assicurarsi di accedere al portale di Azure con l'account Azure, perché sarà necessario usarlo in questa guida.

Scaricare le applicazioni di esempio

Prima di tutto, scaricare le app di esempio necessarie. Sono necessari entrambi gli esempi seguenti:

  • Esempi end-to-end di Gemelli digitali di Azure: questo esempio contiene un'app AdtSample che contiene due funzioni di Azure per lo spostamento di dati in un'istanza di Gemelli digitali di Azure. Per altre informazioni su questo scenario, vedere Connettere una soluzione end-to-end. Contiene anche un'applicazione di esempio DeviceSimulator che simula un dispositivo IoT, generando un nuovo valore di temperatura ogni secondo.

    • Se l'esempio non è già stato scaricato come parte dell'esercitazione in Prerequisiti, passare all'esempio e selezionare il pulsante Sfoglia codice sotto il titolo. In questo modo si passerà al repository GitHub per gli esempi, che è possibile scaricare come .zip selezionando il pulsante Codice e Scarica ZIP.

      Screenshot del repository digital-twins-samples in GitHub e dei passaggi per scaricarlo come zip.

    Questo pulsante scaricherà una copia del repository di esempio nel computer, come digital-twins-samples-main.zip. Decomprimere la cartella.

  • Esempio di app Web di integrazione di SignalR: questa app Web React di esempio utilizzerà i dati di telemetria di Gemelli digitali di Azure da un Servizio Azure SignalR.

    • Passare al collegamento di esempio e usare lo stesso processo di download per scaricare una copia dell'esempio nel computer, come digitaltwins-signalr-webapp-sample-main.zip. Decomprimere la cartella.

Architettura della soluzione

Verrà collegato Servizio Azure SignalR a Gemelli digitali di Azure tramite il percorso seguente. Le sezioni A, B e C nel diagramma sono tratte dal diagramma dell'architettura dei prerequisiti dell'esercitazione end-to-end. In questo articolo si creerà la sezione D sull'architettura esistente, che include due nuove funzioni di Azure che comunicano con SignalR e le app client.

Diagramma dei servizi di Azure in uno scenario end-to-end, che mostra il flusso di dati in ingresso e in uscita da Gemelli digitali di Azure.

Creare un'istanza di Azure SignalR

Creare quindi un'istanza di Azure SignalR da usare in questo articolo seguendo le istruzioni riportate in Creare un'istanza di Servizio Azure SignalR (per il momento, completare solo i passaggi descritti in questa sezione).

Lasciare aperta la finestra del browser alla portale di Azure, perché verrà usata di nuovo nella sezione successiva.

Pubblicare e configurare l'app Funzioni di Azure

In questa sezione verranno configurate due funzioni di Azure:

  • negotiate : funzione trigger HTTP. Usa l'associazione di input SignalRConnectionInfo per generare e restituire informazioni di connessione valide.
  • broadcast : funzione trigger di Griglia di eventi. Riceve i dati di telemetria di Gemelli digitali di Azure tramite la griglia di eventi e usa l'associazione di output dell'istanza di SignalR creata nel passaggio precedente per trasmettere il messaggio a tutte le applicazioni client connesse.

Avviare Visual Studio o un altro editor di codice preferito e aprire la soluzione di codice nella cartella digital-twins-samples-main\ADTSampleApp . Eseguire quindi i passaggi seguenti per creare le funzioni:

  1. Nel progetto SampleFunctionsApp creare una nuova classe C# denominata SignalRFunctions.cs.

  2. Sostituire il contenuto del file di classe con il codice seguente:

    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. Nella finestra Gestione pacchetti console di Visual Studio o in qualsiasi finestra di comando del computer passare alla cartella digital-twins-samples-main\AdtSampleApp\SampleFunctionsApp ed eseguire il comando seguente per installare il SignalRService pacchetto NuGet nel progetto:

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

    L'esecuzione di questo comando deve risolvere eventuali problemi di dipendenza nella classe .

  4. Pubblicare la funzione in Azure usando il metodo preferito.

    Per istruzioni su come pubblicare la funzione con Visual Studio, vedere Sviluppare Funzioni di Azure con Visual Studio. Per istruzioni su come pubblicare la funzione con Visual Studio Code, vedere Creare una funzione C# in Azure con Visual Studio Code. Per istruzioni su come pubblicare la funzione usando l'interfaccia della riga di comando di Azure, vedere Creare una funzione C# in Azure dalla riga di comando.

Configurare la funzione

Configurare quindi la funzione per comunicare con l'istanza di Azure SignalR. Si inizierà raccogliendo il stringa di connessione dell'istanza di SignalR e quindi aggiungendolo alle impostazioni dell'app per le funzioni.

  1. Passare al portale di Azure e cercare il nome dell'istanza di SignalR nella barra di ricerca nella parte superiore del portale. Selezionare l'istanza per aprirla.

  2. Selezionare Chiavi dal menu dell'istanza per visualizzare i stringa di connessione per l'istanza del servizio SignalR.

  3. Selezionare l'icona Copia per copiare la STRINGA DI CONNESSIONE primaria.

    Screenshot del portale di Azure che mostra la pagina Chiavi per l'istanza di SignalR. Il stringa di connessione viene copiato.

  4. Aggiungere infine il stringa di connessione Azure SignalR alle impostazioni dell'app della funzione usando il comando dell'interfaccia della riga di comando di Azure seguente. Sostituire anche i segnaposto con il gruppo di risorse e il nome dell'app del servizio app/dell'app per le funzioni dal prerequisito dell'esercitazione. Il comando può essere eseguito in Azure Cloud Shell o in locale se nel computer è installata l'interfaccia della riga di comando di Azure:

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

    L'output di questo comando stampa tutte le impostazioni dell'app configurate per la funzione di Azure. AzureSignalRConnectionString Cercare nella parte inferiore dell'elenco per verificare che sia stato aggiunto.

    Screenshot dell'output in una finestra di comando che mostra una voce di elenco denominata 'AzureSignalRConnectionString'.

Connettere la funzione a Griglia di eventi

Successivamente, sottoscrivere la funzione broadcast di Azure all'argomento griglia di eventi creato durante il prerequisito dell'esercitazione. Questa azione consentirà al flusso dei dati di telemetria dal dispositivo gemello thermostat67 tramite l'argomento Griglia di eventi e alla funzione. Da qui, la funzione può trasmettere i dati a tutti i client.

Per trasmettere i dati, si creerà una sottoscrizione di eventi dall'argomento di Griglia di eventi alla funzione di Azure broadcast come endpoint.

Nella portale di Azure passare all'argomento griglia di eventi cercandone il nome nella barra di ricerca superiore. Selezionare + Sottoscrizione di eventi.

Screenshot di come creare una sottoscrizione di eventi nel portale di Azure.

Nella pagina Crea sottoscrizione di eventi compilare i campi come indicato di seguito (i campi compilati per impostazione predefinita non sono menzionati):

  • NOME SOTTOSCRIZIONE> EVENTO: assegnare un nome alla sottoscrizione di eventi.
  • ENDPOINT DETAILS Endpoint Type (Tipo di endpoint DETTAGLI>ENDPOINT): selezionare Funzione di Azure dalle opzioni di menu.
  • Endpoint DETTAGLI>ENDPOINT: selezionare il collegamento Selezionare un endpoint , che aprirà una finestra Seleziona funzione di Azure:
    • Compilare la sottoscrizione, il gruppo di risorse, l'app per le funzioni e la funzione (broadcast). Alcuni di questi campi possono essere popolati automaticamente dopo aver selezionato la sottoscrizione.
    • Selezionare Confermare la selezione.

Screenshot del modulo per la creazione di una sottoscrizione di eventi nel portale di Azure.

Nella pagina Crea sottoscrizione di eventi selezionare Crea.

A questo punto, nella pagina Argomento di Griglia di eventi verranno visualizzate due sottoscrizioni di eventi.

Screenshot del portale di Azure che mostra due sottoscrizioni di eventi nella pagina dell'argomento di Griglia di eventi.

Configurare ed eseguire l'app Web

In questa sezione verrà visualizzato il risultato in azione. Configurare prima di tutto l'app Web client di esempio per connettersi al flusso di Azure SignalR configurato. Si avvierà quindi l'app di esempio di dispositivo simulato che invia i dati di telemetria del dispositivo tramite l'istanza di Gemelli digitali di Azure. Successivamente, verrà visualizzata l'app Web di esempio per visualizzare i dati del dispositivo simulato che aggiornano l'app Web di esempio in tempo reale.

Configurare l'app Web client di esempio

Si configurerà quindi l'app Web client di esempio. Iniziare raccogliendo l'URL dell'endpoint HTTP della funzione negotiate e quindi usarlo per configurare il codice dell'app nel computer.

  1. Passare alla pagina App per le funzioni di portale di Azure e selezionare l'app per le funzioni dall'elenco. Nel menu dell'app selezionare Funzioni e scegliere la funzione negotiate .

    Screenshot delle app per le funzioni portale di Azure, con 'Funzioni' evidenziate nel menu e 'negotiate' evidenziate nell'elenco delle funzioni.

  2. Selezionare Recupera URL funzione e copiare il valore tramite /api (non includere l'ultimo /negotiate?). Questo valore verrà usato nel passaggio successivo.

    Screenshot del portale di Azure che mostra la funzione 'negotiate' con il pulsante 'Get function URL' e l'URL della funzione evidenziato.

  3. Usando Visual Studio o qualsiasi editor di codice preferito, aprire la cartella digitaltwins-signalr-webapp-sample-main scaricata nella sezione Scaricare le applicazioni di esempio.

  4. Aprire il file src/App.js e sostituire l'URL della funzione in HubConnectionBuilder con l'URL dell'endpoint HTTP della funzione negotiate salvata nel passaggio precedente:

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

  5. Nel prompt dei comandi per gli sviluppatori di Visual Studio o in qualsiasi finestra di comando del computer passare alla cartella digitaltwins-signalr-webapp-sample-main\src. Eseguire il comando seguente per installare i pacchetti di nodi dipendenti:

    npm install

Impostare quindi le autorizzazioni nell'app per le funzioni nel portale di Azure:

  1. Nella pagina App per le funzioni di portale di Azure selezionare l'istanza dell'app per le funzioni.

  2. Scorrere verso il basso nel menu dell'istanza e selezionare CORS. Nella pagina CORS aggiungere http://localhost:3000 come origine consentita immettendolo nella casella vuota. Selezionare la casella Abilita Access-Control-Allow-Credentials e selezionare Salva.

    Screenshot della portale di Azure che mostra l'impostazione CORS nella funzione di Azure.

Eseguire il simulatore di dispositivi

Durante il prerequisito dell'esercitazione end-to-end, il simulatore di dispositivi è stato configurato per inviare dati tramite un hub IoT e all'istanza di Gemelli digitali di Azure.

Avviare ora il progetto del simulatore che si trova in digital-twins-samples-main\DeviceSimulator\DeviceSimulator.sln. Se si usa Visual Studio, è possibile aprire il progetto e quindi eseguirlo con questo pulsante sulla barra degli strumenti:

Screenshot del pulsante start di Visual Studio con il progetto DeviceSimulator aperto.

Verrà aperta una finestra della console e verranno visualizzati messaggi di telemetria relativi alla temperatura del dispositivo simulato. Questi messaggi vengono inviati tramite l'istanza di Gemelli digitali di Azure, in cui vengono quindi prelevati dalle funzioni di Azure e SignalR.

Non è necessario eseguire altre operazioni in questa console, ma lasciarla in esecuzione mentre si completa il passaggio successivo.

Visualizzazione dei risultati

Per visualizzare i risultati in azione, avviare l'esempio di app Web di integrazione signalR. È possibile farlo da qualsiasi finestra della console nella posizione digitaltwins-signalr-webapp-sample-main\src eseguendo questo comando:

npm start

L'esecuzione di questo comando aprirà una finestra del browser che esegue l'app di esempio, che visualizza un misuratore di temperatura visivo. Dopo l'esecuzione dell'app, è consigliabile iniziare a visualizzare i valori di telemetria della temperatura dal simulatore di dispositivi propagati tramite Gemelli digitali di Azure riflesse dall'app Web in tempo reale.

Screenshot dell'app Web client di esempio, che mostra un misuratore della temperatura visiva. La temperatura riflessa è 67,52.

Pulire le risorse

Se le risorse create in questo articolo non sono più necessarie, seguire questa procedura per eliminarle.

Usando Azure Cloud Shell o l'interfaccia della riga di comando di Azure locale, è possibile eliminare tutte le risorse di Azure in un gruppo di risorse con il comando az group delete . La rimozione del gruppo di risorse rimuoverà anche:

  • Istanza di Gemelli digitali di Azure (dall'esercitazione end-to-end)
  • L'hub IoT e la registrazione del dispositivo hub (dall'esercitazione end-to-end)
  • Argomento di Griglia di eventi e sottoscrizioni associate
  • L'app Funzioni di Azure, incluse tutte e tre le funzioni e le risorse associate, ad esempio l'archiviazione
  • Istanza di Azure SignalR

Importante

L'eliminazione di un gruppo di risorse è irreversibile. Il gruppo di risorse e tutte le risorse in esso contenute vengono eliminati in modo permanente. Assicurarsi di non eliminare accidentalmente il gruppo di risorse sbagliato o le risorse errate.

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

Eliminare infine le cartelle di esempio di progetto scaricate nel computer locale (digital-twins-samples-main.zip, digitaltwins-signalr-webapp-sample-main.zip e le relative controparti decompresse).

Passaggi successivi

In questo articolo si configurano funzioni di Azure con SignalR per trasmettere gli eventi di telemetria di Gemelli digitali di Azure a un'applicazione client di esempio.

Altre informazioni su Servizio Azure SignalR:

Altre informazioni sull'autenticazione di Servizio Azure SignalR con Funzioni di Azure: