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.

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.

Diagram of Azure services in an end-to-end scenario, which shows data flowing in and out of Azure Digital Twins.

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.

      Screenshot of the digital-twins-samples repo on GitHub and the steps for downloading it as a 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.

En esta sección, creará una instancia básica de Azure SignalR para su aplicación. En los pasos siguientes se usa Azure Portal para crear una instancia, pero también puede usar la CLI de Azure. Para obtener más información, vea el comando az signalr create en la referencia de la CLI de Azure SignalR Service.

  1. Inicie sesión en Azure Portal.
  2. En la parte superior izquierda de la página, seleccione + Crear un recurso.
  3. En la página Crear un recurso, en el cuadro de texto Search services and marketplace (Servicios de búsqueda y Marketplace), escriba signalr y, después, seleccione SignalR Service en la lista.
  4. En la página SignalR Service, seleccione Crear.
  5. En la pestaña Aspectos básicos, escriba la información esencial para la nueva instancia de SignalR Service. Escriba los siguientes valores:
Campo Valor sugerido Descripción
Suscripción Elija una suscripción Seleccione la suscripción que quiere usar para crear una instancia de SignalR Service.
Grupos de recursos Cree un grupo de recursos denominado SignalRTestResources Seleccione o cree un grupo de recursos para el recurso SignalR. Es útil crear un grupo de recursos para este tutorial en lugar de usar un grupo de recursos existente. Para liberar recursos después de completar el tutorial, elimine el grupo de recursos.

Al eliminar un grupo de recursos también se eliminarán todos los recursos que pertenezcan a él. Esta acción no se puede deshacer. Antes de eliminar un grupo de recursos, asegúrese de que no incluye los recursos que quiere conservar.

Para obtener más información, consulte Uso de grupos de recursos para administrar los recursos de Azure.
Nombre del recurso testsignalr Escriba un nombre de recurso único para usarlo en el recurso SignalR. Si testsignalr ya se ha usado en la región, agregue un dígito o carácter hasta que el nombre sea único.

El nombre debe ser una cadena de entre 1 y 63 caracteres y solo puede contener números, letras y el carácter de guion (-). El nombre no puede empezar ni terminar con el carácter de guion y no se pueden usar varios guiones consecutivos.
Región Elija la región. Seleccione la región adecuada para la nueva instancia de SignalR Service.

Azure SignalR Service no está disponible actualmente en todas las regiones. Para obtener más información, vea Disponibilidad en regiones para Azure SignalR Service.
Plan de tarifa Seleccione Cambiar y luego elija Free (Dev/Test Only) (Gratis (solo desarrollo/pruebas)). Elija Seleccionar para confirmar el plan de tarifa que elija. Azure SignalR Service tiene tres planes de tarifa: Gratis, Estándar y Premium. Los tutoriales usan el nivel Gratis, a menos que se indique lo contrario en los requisitos previos.

Para obtener más información sobre las diferencias de función entre los niveles y los precios, vea Precios de Azure SignalR Service.
Modo de servicio Elección del modo de servicio adecuado Utilice Predeterminado cuando aloje la lógica del concentrador SignalR en sus aplicaciones web y utilice el servicio SignalR como proxy. Use Sin servidor cuando use tecnologías sin servidor, como Azure Functions, para hospedar la lógica del centro de SignalR.

El modo Clásico solo es para la compatibilidad con versiones anteriores y no se recomienda su uso.

Para obtener más información, vea Modo de servicio en Azure SignalR Service.

No es necesario cambiar la configuración en las pestañas Redes y Etiquetas de los tutoriales de SignalR.

  1. Seleccione el botón Revisar y crear de la parte inferior de la pestaña Aspectos básicos.
  2. En la pestaña Revisar y crear, revise los valores y luego seleccione Crear. La implementación tarda unos minutos en completarse.
  3. Cuando se complete la implementación, seleccione el botón Ir al grupo de recursos.
  4. En la página de recursos de SignalR, seleccione Claves en el menú de la izquierda, en Configuración.
  5. Copie la cadena de conexión de la clave principal. Necesitará esta cadena de conexión para configurar su aplicación más adelante en este tutorial.

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

    Screenshot of the Azure portal that shows the Keys page for the SignalR instance. The connection string is being copied.

  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.

    Screenshot of the output in a command window, showing a list item called 'AzureSignalRConnectionString'.

Conexión de la función a Event Grid

A continuación, suscriba la función de Azure de difusión al tema de Event Grid que creó durante el requisito previo 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 de eventos desde el tema de Event Grid a la función de 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.

Screenshot of how to create an event subscription in the 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ú.
  • ENDPOINT DETAILS Endpoint (Punto de conexión de detalles>del punto de conexión): seleccione el vínculo Seleccionar un punto de conexión, que abrirá una ventana Seleccionar 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).

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

Screenshot of the Azure portal showing two event subscriptions in the Event Grid topic page.

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 la 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 recopilando la dirección URL del punto de conexión HTTP de la función negotiate y después úsela para configurar el código de la aplicación en la 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.

    Screenshot of the Azure portal function apps, with 'Functions' highlighted in the menu and 'negotiate' highlighted in the list of functions.

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

    Screenshot of the Azure portal showing the 'negotiate' function with the 'Get function URL' button and the function URL highlighted.

  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.

    Screenshot of the Azure portal showing the CORS Setting in Azure Function.

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:

Screenshot of the Visual Studio start button with the DeviceSimulator project open.

Se abrirá una ventana de consola y se mostrarán los mensajes de telemetría de temperatura del dispositivo simulado. 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.

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