Compartir a través de

Integración de Azure Digital Twins con Azure SignalR Service

  • Artículo

En este artículo, aprenderá a integrar Azure Digital Twins con Azure SignalR Service.

La solución que se describe en este artículo le permite insertar datos de telemetría de gemelos digitales en clientes conectados, como una única página web o una aplicación móvil. Como resultado, los clientes se actualizan con métricas y estados en tiempo real de dispositivos IoT sin necesidad de sondear el servidor ni de enviar nuevas solicitudes HTTP para las actualizaciones.

Requisitos previos

Estos son los requisitos previos que debe completar antes de continuar:

  • Antes de integrar la solución con Azure SignalR Service en este artículo, debe completar el módulo Conexión de una solución de un extremo a otro de Azure Digital Twins, ya que este artículo sobre procedimientos se basa en él. El tutorial le guiará a través de la configuración de una instancia de Azure Digital Twins que funciona con un dispositivo IoT virtual para desencadenar las actualizaciones de gemelos digitales. En este artículo de procedimientos se conectarán esas actualizaciones a una aplicación web de ejemplo mediante Azure SignalR Service.

  • Necesitará los siguientes valores del tutorial:

    • Tema de Event Grid
    • Resource group
    • Nombre de la instancia de App Service y de la aplicación de funciones

  • Asegúrese de tener Node.js instalado en la máquina.

Asegúrese de iniciar sesión en Azure Portal con su cuenta de Azure, ya que deberá usarla en esta guía.

Descarga de aplicaciones de ejemplo

En primer lugar, descargue las aplicaciones de ejemplo necesarias. Necesitará los dos ejemplos siguientes:

  • Ejemplos de Azure Digital Twins de un extremo a otro: este ejemplo incluye la aplicación AdtSampleApp, que contiene dos funciones de Azure para mover datos por una instancia de Azure Digital Twins (puede obtener información detallada sobre este escenario en Conexión de una solución de un extremo a otro). También contiene una aplicación de ejemplo DeviceSimulator que simula un dispositivo IoT y genera un nuevo valor de temperatura cada segundo.

    • Si aún no ha descargado el ejemplo como parte del tutorial en Requisitos previos, vaya al ejemplo y seleccione el botón Browse code (Examinar código) situado debajo del título. Esto lleva al repositorio de GitHub de los ejemplos, que se pueden descargar como archivo .zip si se selecciona el botón Código y Descargar archivo ZIP.

      Captura de pantalla del repositorio digital-twins-samples en GitHub y los pasos para descargarlo como un archivo ZIP.

    Con este botón se descargará una copia del repositorio de ejemplo en la máquina, como digital-twins-samples-main.zip. Descomprima la carpeta.

  • Ejemplo de aplicación web de integración de SignalR: esta aplicación web de React de ejemplo consumirá datos de telemetría de Azure Digital Twins desde una instancia de Azure SignalR Service.

    • Vaya al vínculo de ejemplos y use el mismo proceso para descargar una copia del ejemplo en la máquina como, por ejemplo, digitaltwins-signalr-webapp-sample-main.zip. Descomprima la carpeta.

Arquitectura de la solución

Va a asociar Azure SignalR Service a Azure Digital Twins a través de la ruta de acceso siguiente. Las secciones A, B y C del diagrama se toman del diagrama de arquitectura del requisito previo del tutorial de un extremo a otro. En este artículo de procedimientos creará la sección D en la arquitectura existente, que incluye dos nuevas funciones de Azure que se comunican tanto con SignalR como con las aplicaciones cliente.

Diagrama de los servicios de Azure en un escenario de un extremo a otro que muestra los datos que entran y salen de Azure Digital Twins.

Crear una instancia Azure SignalR

Luego, cree una instancia de Azure SignalR para usar en este artículo siguiendo las instrucciones en Crear una instancia de servicio Azure SignalR (por ahora, solo completa los pasos de esta sección).

Deje abierto Azure Portal en la ventana del explorador, ya que lo volverá a usar en la sección siguiente.

Publicación y configuración de la aplicación de Azure Functions

En esta sección configurará dos funciones de Azure:

  • negotiate: una función de desencadenador de HTTP. Esta función usa el enlace de entrada SignalRConnectionInfo para generar y devolver información de conexión válida.
  • broadcast: una función de desencadenador de Event Grid. Recibe datos de telemetría de Azure Digital Twins a través de Event Grid y usa el enlace de salida de la instancia de SignalR que creó en el paso anterior para transmitir el mensaje a todas las aplicaciones cliente conectadas.

Inicie Visual Studio u otro editor de código de su elección y abra la solución de código que encontrará en la carpeta digital-twins-samples-main\ADTSampleApp. A continuación, siga estos pasos para crear las funciones:

  1. En el proyecto SampleFunctionsApp, cree una clase de C# llamada SignalRFunctions.cs.

  2. Reemplace el contenido del archivo de clase por el código siguiente:

    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. En la ventana Consola del Administrador de paquetes de Visual Studio o en cualquier ventana de comandos de la máquina, vaya a la carpeta digital-twins-samples-main\AdtSampleApp\SampleFunctionsApp y ejecute el siguiente comando para instalar el paquete NuGet SignalRService en el proyecto:

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

    La ejecución de este comando debería resolver cualquier problema de dependencia de la clase.

  4. Publique la función en Azure mediante el método que prefiera.

    Para más instrucciones sobre cómo publicar la función mediante Visual Studio, consulte Desarrollo de Azure Functions con Visual Studio. Para más instrucciones sobre cómo publicar la función mediante Visual Studio Code, consulte Creación de una función de C# en Azure mediante Visual Studio Code. Para obtener instrucciones sobre cómo publicar la función mediante la CLI de Azure, consulte Creación de una función de C# en Azure desde la línea de comandos.

Configuración de la función

Posteriormente, configure la función para que se comuniquen con la instancia de Azure SignalR. Comenzará recopilando la cadena de conexión de la instancia de SignalR y, a continuación, la agregará a la configuración de la aplicación de funciones.

  1. Vaya a Azure Portal y busque el nombre de la instancia de SignalR en la barra de búsqueda de la parte superior del portal. Seleccione la instancia para abrirla.

  2. Seleccione Claves en el menú de la instancia para ver las cadenas de conexión de la instancia de servicio de SignalR.

  3. Seleccione el icono Copiar para copiar la CADENA DE CONEXIÓN Principal.

    Captura de pantalla de Azure Portal que muestra la página Claves de la instancia de SignalR. Se está copiando la cadena de conexión.

  4. Por último, agregue la cadena de conexión de Azure SignalR a la configuración de la aplicación de funciones con el siguiente comando de la CLI de Azure. Además, reemplace los marcadores de posición por el grupo de recursos y el nombre de App Service o de la aplicación de funciones del requisito previo del tutorial. El comando se puede ejecutar en Azure Cloud Shell, o bien localmente si la CLI de Azure está instalada en la máquina:

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

    La salida de este comando imprime todas las configuraciones de aplicación configuradas para la función de Azure. Busque AzureSignalRConnectionString en la parte inferior de la lista para comprobar que se ha agregado.

    Captura de pantalla de la salida en una ventana de comandos que muestra un elemento de lista denominado

Conexión de la función a Event Grid

A continuación, suscriba la función Azure de difusión al tema de la cuadrícula de eventos que creó durante el prerrequisito del tutorial. Esta acción permitirá que los datos de telemetría fluyan desde el gemelo thermostat67 por el tema de Event Grid hasta la función. Desde aquí, la función puede transmitir los datos a todos los clientes.

Para difundir los datos, creará una suscripción a Event Grid desde su tema de Event Grid a su función Azure de difusión como punto de conexión.

En Azure Portal, busque el nombre de su tema de Event Grid en la barra de búsqueda superior para ir a él. Seleccione + Suscripción de eventos.

Captura de pantalla de cómo crear una suscripción de eventos en Azure Portal.

En la página Crear suscripción de eventos, rellene los campos como se indica a continuación (no se mencionan los campos rellenados de forma predeterminada):

  • DETALLES DE SUSCRIPCIONES DE EVENTOS>Nombre: asigne un nombre de la suscripción de eventos.
  • DETALLES DE PUNTO DE CONEXIÓN>Tipo de punto de conexión: seleccione Función de Azure en las opciones del menú.
  • DETALLES DE PUNTO DE CONEXIÓN>Punto de conexión: seleccione el vínculo Seleccionar un extremo que abrirá una ventana Seleccionar la función de Azure:
    • Rellene los campos Suscripción, Grupo de recursos, Aplicación de función y Función (broadcast). Es posible que algunos de estos campos se rellenen automáticamente después de seleccionar la suscripción.
    • Seleccione Confirm Selection (Confirmar selección).

Captura de pantalla del formulario para crear una suscripción de eventos en Azure Portal.

De nuevo en la página Crear suscripción de eventos, seleccione Crear.

En este punto, debería ver dos suscripciones de eventos en la página Tema de Event Grid.

Captura de pantalla de Azure Portal que muestra dos suscripciones de eventos en la página del tema de Event Grid.

Configuración y ejecución de la aplicación web

En esta sección verá el resultado en acción. Primero, configurará la aplicación web cliente de ejemplo para conectarse al flujo de Azure SignalR que ha configurado. A continuación, iniciará la aplicación de ejemplo de dispositivo simulado que envía datos de telemetría del dispositivo a través de su instancia de Azure Digital Twins. Después de eso, observará cómo los datos del dispositivo simulado actualizan la aplicación web de ejemplo en tiempo real en la aplicación web de ejemplo.

Configuración de la aplicación web cliente de ejemplo

A continuación, configurará la aplicación web cliente de ejemplo. Comience por recopilar la URL del punto de conexión HTTP de la función de negotiate, y luego utilícela para configurar el código de la aplicación en su máquina.

  1. Vaya a la página Instancias de Function App de Azure Portal y seleccione su aplicación de funciones de la lista. En el menú de la aplicación, seleccione Funciones y elija la función negotiate.

    Captura de pantalla de las aplicaciones de funciones de Azure Portal con

  2. Seleccione Obtener URL de la función y copie el valor hasta /api (no incluya el último /negotiate?). Usará este valor en el paso siguiente.

    Captura de pantalla de Azure Portal que muestra la función

  3. Con Visual Studio o cualquier editor de código de su elección, abra la carpeta digitaltwins-signalr-webapp-sample-main descomprimida que descargó en la sección Descarga de aplicaciones de ejemplo.

  4. Abra el archivo src/App.js y reemplace la dirección URL de función de HubConnectionBuilder por la dirección URL del punto de conexión HTTP de la función negotiate que guardó anteriormente:

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

  5. En el símbolo del sistema para desarrolladores de Visual Studio o en cualquier ventana de comandos de la máquina, vaya a la carpeta digitaltwins-signalr-webapp-sample-main\src. Ejecute el siguiente comando para instalar los paquetes de nodos dependientes:

    npm install

A continuación, defina permisos en la aplicación de función en Azure Portal:

  1. En la página Aplicación de funciones de Azure Portal, seleccione la instancia de su aplicación de función.

  2. Desplácese hacia abajo en el menú de la instancia y seleccione CORS. En la página CORS, escriba http://localhost:3000 en el cuadro vacío para agregarlo como origen permitido. Active la casilla Habilitar Access-Control-Allow-Credentials y seleccione Guardar.

    Captura de pantalla de Azure Portal que muestra la configuración de CORS en Azure Functions.

Ejecución del simulador de dispositivos

Durante el requisito previo del tutorial de un extremo a otro, ha configurado el simulador de dispositivos para enviar datos mediante una instancia de IoT Hub a la instancia de Azure Digital Twins.

Ahora, inicie el proyecto del simulador, que se encuentra en digital-twins-samples-main\DeviceSimulator\DeviceSimulator.sln. Si utiliza Visual Studio, puede abrir el proyecto y ejecutarlo con este botón en la barra de herramientas:

Captura de pantalla del botón de inicio de Visual Studio con el proyecto DeviceSimulator abierto.

Se abrirá una ventana de consola que mostrará mensajes simulados de telemetría de temperatura del dispositivo. Estos mensajes se envían mediante la instancia de Azure Digital Twins, donde las funciones de Azure y SignalR los recopilan.

En esta consola no es preciso hacer nada más, solo dejar que se ejecute mientras se completa el paso siguiente.

Ver los resultados

Para ver los resultados en acción, inicie la aplicación web de integración de SignalR de ejemplo. Puede hacerlo desde cualquier ventana de la consola en la ubicación digitaltwins-signalr-webapp-sample-main\src, mediante la ejecución de este comando:

npm start

Al ejecutar este comando se abrirá una ventana del explorador en la que se ejecutará la aplicación de ejemplo, que muestra un medidor de temperatura visual. Una vez que se ejecute la aplicación, debe empezar a ver los valores de telemetría de temperatura del simulador de dispositivos que se propagan mediante Azure Digital Twins y que refleja la aplicación web en tiempo real.

Captura de pantalla de la aplicación web cliente de ejemplo que muestra un medidor de temperatura visual. La temperatura reflejada es 67,52.

Limpieza de recursos

Cuando ya no necesite los recursos creados en este artículo, siga estos pasos para eliminarlos.

Con Azure Cloud Shell o la CLI de Azure local, puede eliminar todos los recursos de Azure de un grupo de recursos mediante el comando az group delete. Al eliminar el grupo de recursos, también se eliminará lo siguiente:

  • La instancia de Azure Digital Twins (del tutorial integral)
  • La instancia de IoT Hub y el registro del dispositivo central (del tutorial integral)
  • El tema de Event Grid y las suscripciones asociadas
  • La aplicación Azure Functions, incluidas las tres funciones y los recursos asociados, como el almacenamiento
  • La instancia de Azure SignalR

Importante

La eliminación de un grupo de recursos es irreversible. El grupo de recursos y todos los recursos contenidos en él se eliminan permanentemente. Asegúrese de no eliminar por accidente el grupo de recursos o los recursos equivocados.

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

Finalmente, elimine las carpetas de ejemplo del proyecto que descargó en la máquina local (digital-twins-samples-main.zip, digitaltwins-signalr-webapp-sample-main.zip, y las correspondientes carpetas descomprimidas).

Pasos siguientes

En este artículo, ha configurado funciones de Azure con SignalR para transmitir eventos de telemetría de Azure Digital Twins a una aplicación cliente de ejemplo.

A continuación, puede obtener más información acerca de Azure SignalR Service:

También puede obtener información acerca de la autenticación de Azure SignalR Service con Azure Functions: