Intégrer Azure Digital Twins avec le service Azure SignalR

Article
08/21/2024

Dans cet article, vous allez apprendre à intégrer Azure Digital Twins avec Azure SignalR Service.

La solution décrite dans cet article vous permet de transmettre des données de télémétrie de jumeau numérique à des clients connectés, par exemple une page web unique ou une application mobile. Par conséquent, les clients sont mis à jour avec les métriques et l’état en temps réel des appareils IoT, sans qu’il soit nécessaire d’interroger le serveur ou d’envoyer de nouvelles requêtes HTTP pour les mises à jour.

Prérequis

Voici les conditions préalables que vous devez remplir avant de continuer :

Avant d’intégrer votre solution au Service Azure SignalR dans cet article, vous devez suivre le Tutoriel : Connecter une solution de bout en bout d’Azure Digital Twins, car cet article de guide pratique s’appuie dessus. Ce tutoriel vous guide dans la configuration d’une instance Azure Digital Twins qui fonctionne avec un appareil IoT virtuel pour déclencher des mises à jour de jumeaux numériques. Cet article de guide pratique permet de connecter ces mises à jour à un exemple d’application web à l’aide d’Azure SignalR Service.
Vous aurez besoin des valeurs suivantes du tutoriel :
- Rubrique Event Grid
- Resource group
- Nom App Service/de l’application de fonction
Node.js doit être installé sur votre machine.

Assurez-vous de vous connecter au Portail Azure avec compte Azure, car vous en aurez besoin dans ce guide.

Téléchargement des exemples d'applications

Tout d’abord, téléchargez les exemples d’applications requis. Vous aurez besoin des deux exemples suivants :

Exemples de solutions de bout en bout Azure Digital Twins : cet exemple comprend une application AdtSampleApp contenant deux fonctions Azure pour déplacer des données dans une instance Azure Digital Twins (vous pouvez découvrir ce scénario plus en détail dans le Tutoriel : Connecter une solution de bout en bout). Il contient également un exemple d’application DeviceSimulator qui simule un appareil IoT générant une nouvelle valeur de température chaque seconde.
- Si vous n’avez pas encore téléchargé l’exemple dans le cadre des prérequis du tutoriel, accédez à l’exemple et sélectionnez le bouton Browse code (Parcourir le code) situé sous le titre. De cette manière, vous accédez au référentiel GitHub d’exemples, que vous pouvez télécharger sous forme de fichier .zip en sélectionnant le bouton Code, puis Télécharger le fichier ZIP.
Ce bouton télécharge une copie du référentiel d’exemples sur votre machine : digital-twins-samples-main.zip. Décompressez le dossier.
Exemple d’application web d’intégration SignalR : cet exemple d’application web React consomme des données de télémétrie Azure Digital Twins à partir d’un service Azure SignalR Service.
- Accédez à l’exemple de lien, puis utilisez le même processus de téléchargement pour télécharger une copie de l’exemple sur votre machine, comme digitaltwins-signalr-webapp-sample-main.zip. Décompressez le dossier.

Architecture de solution

Vous allez attacher Azure SignalR Service à Azure Digital Twins par le biais du chemin ci-dessous. Dans le diagramme, les sections A, B et C sont tirées du diagramme d’architecture des prérequis du tutoriel de bout en bout. Dans cet article de procédure, vous allez générer la section D sur l’architecture existante, qui comprend deux nouvelles fonctions Azure qui communiquent avec SignalR et les applications clientes.

Créer une instance Azure SignalR

Ensuite, créez une instance Azure SignalR à utiliser dans cet article en suivant les instructions de Créer une instance Azure SignalR Service (pour l’instant, effectuez uniquement les étapes décrites dans cette section).

Laissez la fenêtre du navigateur ouverte sur le Portail Azure, car vous l’utiliserez à nouveau dans la section suivante.

Publier et configurer l’application Azure Functions

Dans cette section, vous allez configurer deux fonctions Azure :

negotiate : une fonction de déclencheur HTTP. Elle utilise la liaison d’entrée SignalRConnectionInfo pour générer et retourner des informations de connexion valides.
broadcast - Une fonction de déclencheur Event Grid. Elle reçoit les données de télémétrie Azure Digital Twins via Event Grid et utilise la liaison de sortie de l’instance SignalR que vous avez créée à l’étape précédente pour diffuser le message à toutes les applications clientes connectées.

Démarrez Visual Studio (ou un autre éditeur de code de votre choix), puis ouvrez la solution de code dans le dossier digital-twins-samples-main\ADTSampleApp. Puis procédez comme suit pour créer les fonctions :

Dans le projet SampleFunctionsApp, créez une nouvelle classe C# appelée SignalRFunctions.cs.

Remplacez le contenu du fichier de classe par le code suivant :

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

Dans la fenêtre Console du gestionnaire de package de Visual Studio ou toute fenêtre de commande sur votre machine, accédez au dossier digital-twins-samples-main\AdtSampleApp\SampleFunctionsApp, puis exécutez la commande suivante pour installer le package NuGet SignalRService dans le projet :
```
dotnet add package Microsoft.Azure.WebJobs.Extensions.SignalRService --version 1.14.0
```
L’exécution de cette commande devrait résoudre tous les problèmes de dépendance dans la classe.
Publiez la fonction sur Azure à l’aide de votre méthode préférée.

Pour obtenir des instructions sur la façon de publier une fonction à l’aide de Visual Studio, consultez Développer des Azure Functions à l’aide de Visual Studio. Pour obtenir des instructions sur la publication de la fonction à l’aide de Visual Studio Code, consultez Créer une fonction C# dans Azure à l’aide de Visual Studio Code. Pour obtenir des instructions sur la publication de la fonction à l’aide d’Azure CLI, consultez Créer une fonction C# dans Azure à partir de la ligne de commande.

Configurer la fonction

Configurez ensuite la fonction pour communiquer avec votre instance Azure SignalR. Vous allez commencer par collecter la chaîne de connexion de l’instance SignalR, puis l’ajouter aux paramètres de l’application de fonctions.

Accédez au portail Azure, puis recherchez le nom de votre instance SignalR dans la barre de recherche située en haut du portail. Sélectionnez l’instance pour l’ouvrir.
Sélectionnez Clés dans le menu d’instance pour afficher les chaînes de connexion de l’instance du service SignalR.
Sélectionnez l’icône Copier pour copier la CHAÎNE DE CONNEXION principale.
Enfin, ajoutez votre chaîne de connexion Azure SignalR aux paramètres d’application de la fonction, en utilisant la commande Azure CLI suivante. Remplacez également les espaces réservés par le nom de votre groupe de ressources et le nom App Service/de l’application de fonction dans les prérequis du tutoriel. La commande peut être exécutée dans Azure Cloud Shell ou localement si Azure CLI est installé sur votre ordinateur :
```
az functionapp config appsettings set --resource-group <your-resource-group> --name <your-function-app-name> --settings "AzureSignalRConnectionString=<your-Azure-SignalR-ConnectionString>"
```
La sortie de cette commande imprime tous les paramètres d’application configurés pour votre fonction Azure. Recherchez l’élément AzureSignalRConnectionString en bas de la liste pour vérifier qu’il a été ajouté.

Connecter la fonction à Event Grid

Inscrivez ensuite la fonction Azure broadcast dans la rubrique Event Grid que vous avez créée lors des prérequis du tutoriel. Cette action permet aux données de télémétrie de circuler du jumeau thermostat67 jusqu’à la fonction en transitant par la rubrique Event Grid. À partir de là, la fonction peut diffuser les données à tous les clients.

Pour diffuser les données, vous allez créer un abonnement à un événement à partir de votre rubrique Event Grid vers votre fonction Azure de diffusion comme point de terminaison.

Dans le portail Azure, accédez à votre rubrique Event Grid en recherchant son nom dans la barre de recherche supérieure. Sélectionnez + Abonnement aux événements.

Capture d’écran montrant comment créer un abonnement aux événements dans le portail Azure

Dans la page Créer un abonnement aux événements, renseignez les champs comme suit (les champs remplis par défaut ne sont pas mentionnés) :

EVENT SUBSCRIPTION DETAILS>Nom : donnez un nom à votre abonnement aux événements.
ENDPOINT DETAILS>Type de point de terminaison : sélectionnez Azure Function dans les options du menu.
DÉTAILS DU POINT DE TERMINAISON>Point de terminaison : sélectionnez le lien Sélectionner un point de terminaison pour ouvrir une fenêtre Sélectionner une fonction Azure :
- Renseignez les champs Abonnement, Groupe de ressources, Application de fonction et Fonction (diffusion). Il est possible que certains de ces champs soient automatiquement renseignés une fois l’abonnement sélectionné.
- Sélectionnez Confirmer la sélection.

Capture d’écran du formulaire de création d’un abonnement aux événements dans le portail Azure

Dans la page Créer un abonnement aux événements, sélectionnez Créer.

À ce stade, vous devez normalement voir deux abonnements à des événements dans la page Rubrique Event Grid.

Configurer et exécuter l’application web

Dans cette section, vous verrez le résultat en action. Tout d’abord, configurez l’exemple d’application web cliente pour vous connecter au flux Azure SignalR que vous avez configuré. Ensuite, vous allez démarrer l’exemple d’application d’appareil simulé qui envoie des données de télémétrie d’appareil via votre instance d’Azure Digital Twins. Après cela, vous pourrez consulter l’exemple d’application web pour voir les données de l’appareil simulé mettant à jour l’exemple d’application web en temps réel.

Configurer l’exemple d’application web cliente

Vous allez ensuite configurer l’exemple d’application web cliente. Commencez par recueillir l’URL de point de terminaison HTTP de la fonction de negotiate, puis utilisez-la pour configurer le code d’application sur votre machine.

Accédez à la page Applications de fonctions du portail Azure, puis sélectionnez votre application de fonction dans la liste. Dans le menu de l’application, sélectionnez Fonctions et choisissez la fonction negotiate.
Sélectionnez Obtenir l’URL de la fonction et copiez la valeur jusqu’à /api (n’incluez pas la partie /negotiate? à la fin). Vous utiliserez cette valeur à l'étape suivante.
À l’aide de Visual Studio ou de l’éditeur de code de votre choix, ouvrez le dossier décompressé digitaltwins-signalr-webapp-sample-main que vous avez téléchargé dans la section Télécharger les exemples d’application.
Ouvrez le fichier src/App.js et remplacez l’URL de fonction dans HubConnectionBuilder par l’URL de point de terminaison HTTP de la fonction negotiate que vous avez enregistrée à l’étape précédente :
```
    const hubConnection = new HubConnectionBuilder()
        .withUrl('<Function-URL>')
        .build();
```
Dans l’invite de commandes développeur de Visual Studio ou dans toute fenêtre de commande sur votre machine, accédez au dossier digitaltwins-signalr-webapp-sample-main\src. Exécutez la commande suivante pour installer les packages des nœuds dépendants :
```
npm install
```

Ensuite, définissez les autorisations dans votre application de fonction dans le Portail Azure :

Dans la page Applications de fonction du Portail Azure, sélectionnez l’instance de votre application de fonction.
Faites défiler le menu de l’instance et sélectionnez CORS. Sur la page CORS, ajoutez http://localhost:3000 comme origine autorisée en l’entrant dans la zone vide. Cochez la case Activer Access-Control-Allow-Credentials et sélectionnez Enregistrer.

Exécuter le simulateur d’appareil

Au cours du tutoriel de bout en bout prérequis, vous avez configuré le simulateur d’appareil pour envoyer des données via IoT Hub et à votre instance Azure Digital Twins.

Maintenant, démarrez le projet de simulateur, situé dans digital-twins-samples-main\DeviceSimulator\DeviceSimulator.sln. Si vous utilisez Visual Studio, vous pouvez ouvrir le projet, puis l’exécuter avec ce bouton dans la barre d’outils :

Une fenêtre de console s’ouvre, affichant les messages de télémétrie de température d’appareil simulée. Ces messages sont envoyés par le biais de votre instance Azure Digital Twins, où ils sont ensuite récupérés par les fonctions Azure et SignalR.

Vous n’avez rien d’autre à faire dans cette console, mais laissez-la s’exécuter pendant que vous effectuez l’étape suivante.

Afficher les résultats

Pour voir les résultats en action, démarrez l’exemple d’application web d’intégration SignalR. Vous pouvez effectuer cette opération à partir de n’importe quelle fenêtre de console située à l’emplacement digitaltwins-signalr-webapp-sample-main\src en exécutant la commande suivante :

npm start

L’exécution de cette commande ouvre une fenêtre de navigateur exécutant l’exemple d’application, qui affiche une jauge de température visuelle. Une fois que l’application est en cours d’exécution, vous devriez commencer à voir les valeurs de télémétrie de température du simulateur d’appareil qui se propagent via Azure Digital Twins reflétées par l’application web en temps réel.

Capture d’écran de l’exemple d’application web cliente, montrant une jauge de température visuelle. La température reflétée est 67,52.

Nettoyer les ressources

Si vous n’avez plus besoin des ressources créées dans cet article, effectuez les étapes suivantes pour les supprimer.

Dans Azure Cloud Shell ou Azure CLI en local, vous pouvez supprimer toutes les ressources Azure d’un groupe de ressources avec la commande az group delete. La suppression du groupe de ressources entraîne également la suppression des éléments suivants :

L’instance Azure Digital Twins (dans le tutoriel de bout en bout)
Le hub IoT et l’inscription de l’appareil Hub (dans le tutoriel de bout en bout)
La rubrique Event Grid et les abonnements associés
L’application Azure Functions, y compris les trois fonctions et les ressources associées, comme le stockage
L’instance Azure SignalR

Important

La suppression d’un groupe de ressources est irréversible. Le groupe de ressources et toutes les ressources qu’il contient sont supprimés définitivement. Veillez à ne pas supprimer accidentellement des ressources ou un groupe de ressources incorrects.

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

Enfin, supprimez les dossiers d’exemples de projets que vous avez téléchargés sur votre machine locale (digital-twins-samples-main.zip, digitaltwins-signalr-webapp-sample-main.zip et leurs équivalents décompressés).

Étapes suivantes

Dans cet article, vous configurez des fonctions Azure avec SignalR pour diffuser des événements de télémétrie Azure Digital Twins vers un exemple d’application cliente.

Ensuite, vous en apprendrez plus sur Azure SignalR Service :

Qu’est-ce que le service Azure SignalR ?

Ou apprenez-en davantage sur l’authentification de service SignalR Azure avec Azure Functions :

Authentification par Azure SignalR Service

Partager via