Integrare Gemelli digitali di Azure con Servizio Azure SignalR

Articolo
03/31/2023

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 Gemelli digitali di Azure Connessione 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
Nel computer sarà necessario installare Node.js .

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

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.

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 (è possibile ottenere informazioni su questo scenario in modo più dettagliato in Connessione 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 file ZIP selezionando il pulsante Codice e Scarica 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.

In questa sezione viene creata un'istanza di Azure SignalR di base da usare per l'app. I passaggi seguenti usano il portale di Azure per creare una nuova istanza, ma è anche possibile usare l'interfaccia della riga di comando di Azure. Per altre informazioni, vedere il comando az signalr create nella guida di riferimento all'interfaccia della riga di comando di Servizio Azure SignalR.

Accedere al portale di Azure.
Nell'angolo in alto a sinistra della pagina selezionare + Crea una risorsa.
Nella pagina Crea una risorsa, nella casella di testo servizio di ricerca e marketplace immettere signalr e quindi selezionare Servizio SignalR dall'elenco.
Nella pagina Servizio SignalR selezionare Crea.
Nella scheda Informazioni di base immettere le informazioni essenziali per la nuova istanza di Servizio SignalR. Immettere i valori seguenti:

Campo	Valore consigliato	Descrizione
Abbonamento	Scegliere la sottoscrizione in uso	Selezionare la sottoscrizione da usare per creare una nuova istanza di Servizio SignalR.
Gruppo di risorse	Creare un gruppo di risorse denominato SignalRTestResources	Selezionare o creare un gruppo di risorse per la risorsa SignalR. È utile creare un nuovo gruppo di risorse per questa esercitazione anziché usare un gruppo di risorse esistente. Per liberare risorse dopo aver completato l'esercitazione, eliminare il gruppo di risorse. L'eliminazione di un gruppo di risorse elimina anche tutte le risorse che appartengono al gruppo. Non è possibile annullare questa azione. Prima di eliminare un gruppo di risorse, assicurarsi che non contenga risorse da conservare. Per altre informazioni, vedere Using resource groups to manage your Azure resources (Uso di Gruppi di risorse per gestire le risorse di Azure).
Nome risorsa	testsignalr	Immettere un nome risorsa univoco da usare per la risorsa SignalR. Se testsignalr è già stato eseguito nell'area, aggiungere una cifra o un carattere fino a quando il nome non è univoco. Il nome deve essere una stringa contenente da 1 a 63 caratteri che possono includere solo numeri, lettere e il segno meno (`-`). Il nome non può iniziare o terminare con il trattino e i caratteri trattini consecutivi non sono validi.
Area	Scegli la tua area geografica	Selezionare l'area appropriata per la nuova istanza di Servizio SignalR. Servizio Azure SignalR non è attualmente disponibile in tutte le aree. Per altre informazioni, vedere disponibilità dell'area Servizio Azure SignalR
Piano tariffario	Selezionare Cambia e quindi scegliere Gratuito (solo sviluppo/test). Scegliere Seleziona per confermare la scelta del piano tariffario.	Servizio Azure SignalR ha tre piani tariffari: Gratuito, Standard e Premium. Le esercitazioni usano il livello Gratuito , a meno che non sia specificato diversamente nei prerequisiti. Per altre informazioni sulle differenze di funzionalità tra i livelli e i prezzi, vedere Servizio Azure SignalR prezzi
Modalità di servizio	Scegliere la modalità di servizio appropriata	Usare Default quando si ospita la logica dell'hub SignalR nelle app Web e si usa il servizio SignalR come proxy. Usare Serverless quando si usano tecnologie serverless, ad esempio Funzioni di Azure per ospitare la logica dell'hub SignalR. La modalità classica è solo per la compatibilità con le versioni precedenti e non è consigliabile usarla. Per altre informazioni, vedere Modalità di servizio in Servizio Azure SignalR.

Non è necessario modificare le impostazioni nelle schede Rete e Tag per le esercitazioni su SignalR.

Selezionare il pulsante Rivedi e crea nella parte inferiore della scheda Informazioni di base .
Nella scheda Rivedi e crea esaminare i valori e quindi selezionare Crea. Il completamento della distribuzione richiede alcuni istanti.
Al termine della distribuzione, selezionare il pulsante Vai alla risorsa .
Nella pagina della risorsa SignalR selezionare Chiavi dal menu a sinistra, sotto Impostazioni.
Copiare la stringa di Connessione ion per la chiave primaria. Questa stringa di connessione è necessaria per configurare l'app più avanti in questa esercitazione.

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 SignalR Connessione ionInfo 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:

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

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

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.2.0
```
L'esecuzione di questo comando deve risolvere eventuali problemi di dipendenza nella classe .
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.

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.
Selezionare Chiavi dal menu dell'istanza per visualizzare i stringa di connessione per l'istanza del servizio SignalR.
Selezionare l'icona Copia per copiare la STRINGA DI CONNESSIONE primaria.
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.

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 of how to create an event subscription in the Azure portal.

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 of the form for creating an event subscription in the Azure portal.

Nella pagina Crea sottoscrizione di eventi selezionare Crea.

A questo punto, nella pagina Argomento di Griglia di eventi verranno visualizzate due sottoscrizioni 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.

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 .
Selezionare Recupera URL funzione e copiare il valore tramite /api (non includere l'ultimo /negotiate?). Questo valore verrà usato nel passaggio successivo.
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.
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();
```
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:

Nella pagina App per le funzioni di portale di Azure selezionare l'istanza dell'app per le funzioni.
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.

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

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 of the sample client web app, showing a visual temperature gauge. The temperature reflected is 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:

Che cos'è Servizio Azure SignalR?

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

Autenticazione del servizio Azure SignalR