Intégrer Azure Digital Twins avec le service Azure SignalR

Article
03/31/2023

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.

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.

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.

Dans cette section, vous créez une instance Azure SignalR de base pour votre application. Les étapes suivantes utilisent le portail Azure pour créer une nouvelle instance, mais vous pouvez également utiliser Azure CLI. Pour plus d’informations sur la commande az signalr create, consultez la documentation de référence sur l’interface CLI Azure SignalR Service.

Connectez-vous au portail Azure.
En haut à gauche de la page, sélectionnez + Créer une ressource.
Dans la page Créer une ressource, dans la zone de texte Rechercher dans les services et la Place de marché, entrez signalr, puis sélectionnez SignalR Service dans la liste.
Dans la page SignalR Service, sélectionnez Créer.
Sous l’onglet Informations de base, vous devez entrer les informations de base concernant votre nouvelle instance SignalR Service. Saisissez les valeurs suivantes :

Champ	Valeur suggérée	Description
Abonnement	Choisir votre abonnement	Sélectionnez l’abonnement que vous souhaitez utiliser pour créer une instance SignalR Service.
Groupe de ressources	Créer un groupe de ressources nommé SignalRTestResources	Sélectionnez ou créez un groupe de ressources pour votre ressource SignalR. Nous vous conseillons de créer un nouveau groupe de ressources pour ce tutoriel plutôt que d’utiliser un groupe existant. Pour libérer les ressources une fois le tutoriel terminé, supprimez le groupe de ressources. La suppression du groupe de ressources supprimera également toutes les ressources qu’il contient. Cette action ne peut pas être annulée. Avant de supprimer un groupe de ressources, vérifiez qu’il ne contient pas des ressources que vous souhaitez conserver. Pour plus d’informations, consultez Utilisation des groupes de ressources pour gérer vos ressources Azure.
Nom de la ressource	testsignalr	Entrez un nom de ressource unique à utiliser pour la ressource SignalR. Si le nom testsignalr n’est pas disponible dans votre région, ajoutez un chiffre ou un caractère au nom pour le rendre unique. Le nom doit être une chaîne de 1 à 63 caractères, et il ne peut contenir que des chiffres, des lettres et le caractère `-` (trait d'union). Le nom ne peut ni commencer ni se terminer par un trait d’union, et il n’accepte pas de traits d’union consécutifs.
Région	Choisir votre région	Sélectionnez la région appropriée pour votre nouvelle instance SignalR Service. Azure SignalR Service n’est pas disponible dans toutes les régions. Pour plus d’informations, consultez Disponibilité d’Azure SignalR Service par région.
Niveau tarifaire	Sélectionnez Modifier, puis choisissez Gratuit (Dev/Test uniquement). Choisissez Sélectionner pour confirmer votre choix de niveau tarifaire.	Azure SignalR Service propose trois niveaux tarifaires : Gratuit, Standard et Premium. Les tutoriels utilisent le niveau Gratuit, sauf indication contraire dans les prérequis. Pour plus d’informations sur les différences de fonctionnalités entre les niveaux et les tarifs, consultez Tarifs Azure SignalR Service.
Mode de service	Choisir le mode de service approprié	Utilisez Par défaut lorsque vous hébergez la logique du hub SignalR dans vos applications web et utilisez le service SignalR en tant que proxy. Utilisez Serverless lorsque vous utilisez des technologies serverless telles qu’Azure Functions pour héberger la logique du hub SignalR. Le mode classique est uniquement pour la compatibilité descendante et il n’est pas recommandé de l’utiliser. Pour plus d’informations, consultez Mode de service dans Azure SignalR Service.

Vous n’avez pas besoin de modifier les paramètres des onglets Réseau et Étiquettes pour les tutoriels SignalR.

Sélectionnez le bouton Vérifier + créer au bas de l’onglet Informations de base.
Sous l’onglet Vérifier + créer, passez en revue les valeurs, puis sélectionnez Créer. Le déploiement prend quelques instants.
Une fois le déploiement terminé, sélectionnez le bouton Accéder à la ressource.
Dans la page de ressource SignalR, sélectionnez Clés dans le menu de gauche sous Paramètres.
Copiez la chaîne de connexion pour la clé primaire. Vous aurez besoin de cette chaîne de connexion pour configurer votre application plus loin dans ce tutoriel.

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.2.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

Ensuite, abonnez-vous à la fonction Azure de diffusion à la rubrique Event Grid que vous avez créée lors de la configuration requise du didacticiel. 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 Événement à partir de votre rubrique Event Grid à votre fonction Azure de diffusion en tant que 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.

Screenshot of how to create an event subscription in the Azure portal.

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.
Point de terminaison DÉTAILS>DU POINT DE TERMINAISON : sélectionnez le lien Sélectionner un point de terminaison , qui ouvre 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.

Screenshot of the form for creating an event subscription in the Azure portal.

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 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 collecter l’URL du point de terminaison HTTP de la fonction de négociation , puis utilisez-la pour configurer le code de l’application sur votre ordinateur.

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 le dernier /negotiate ?). 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 ouvre et affiche les messages de télémétrie de température de l’appareil simulés. 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.

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