Partilhar via

Integrar o Azure Digital Twins com o Serviço Azure SignalR

  • Artigo

Neste artigo, você aprenderá como integrar os Gêmeos Digitais do Azure ao Serviço Azure SignalR.

A solução descrita neste artigo permite enviar dados de telemetria de gêmeos digitais para clientes conectados, como uma única página da Web ou um aplicativo móvel. Como resultado, os clientes são atualizados com métricas e status em tempo real de dispositivos IoT, sem a necessidade de sondar o servidor ou enviar novas solicitações HTTP para atualizações.

Pré-requisitos

Aqui estão os pré-requisitos que você deve preencher antes de prosseguir:

  • Antes de integrar sua solução com o Serviço Azure SignalR neste artigo, você deve concluir o Azure Digital Twins Connect uma solução de ponta a ponta, porque este artigo de instruções se baseia nela. O tutorial orienta você pela configuração de uma instância do Azure Digital Twins que funciona com um dispositivo IoT virtual para disparar atualizações de gêmeos digitais. Este artigo de instruções conectará essas atualizações a um aplicativo Web de exemplo usando o Serviço Azure SignalR.

  • Você precisará dos seguintes valores do tutorial:

    • Tópico Grade de Eventos
    • Grupo de recursos
    • Nome do aplicativo de serviço/função do aplicativo

  • Você precisará de Node.js instalado em sua máquina.

Certifique-se de entrar no portal do Azure com sua conta do Azure, pois você precisará usá-la neste guia.

Faça o download dos aplicativos de exemplo

Primeiro, baixe os aplicativos de exemplo necessários. Você precisará dos dois exemplos a seguir:

  • Exemplos completos de Gêmeos Digitais do Azure: este exemplo contém um AdtSampleApp que contém duas funções do Azure para mover dados em torno de uma instância do Azure Digital Twins (você pode aprender sobre esse cenário com mais detalhes em Conectar uma solução de ponta a ponta). Ele também contém um aplicativo de exemplo DeviceSimulator que simula um dispositivo IoT, gerando um novo valor de temperatura a cada segundo.

    • Se você ainda não baixou o exemplo como parte do tutorial em Pré-requisitos, navegue até o exemplo e selecione o botão Procurar código abaixo do título. Isso levará você ao repositório GitHub para os exemplos, que você pode baixar como um .zip selecionando o botão Código e Baixar ZIP.

      Captura de tela do repositório digital-twins-samples no GitHub e as etapas para baixá-lo como um zip.

    Este botão fará o download de uma cópia do repositório de amostra em sua máquina, conforme digital-twins-samples-main.zip. Deszipe a pasta.

  • Exemplo de aplicativo Web de integração SignalR: este aplicativo Web React de exemplo consumirá dados de telemetria do Azure Digital Twins de um Serviço SignalR do Azure.

    • Navegue até o link de exemplo e use o mesmo processo de download para baixar uma cópia do exemplo para sua máquina, conforme digitaltwins-signalr-webapp-sample-main.zip. Deszipe a pasta.

Arquitetura de soluções

Você anexará o Serviço SignalR do Azure aos Gêmeos Digitais do Azure pelo caminho abaixo. As seções A, B e C no diagrama são retiradas do diagrama de arquitetura do pré-requisito do tutorial de ponta a ponta. Neste artigo de instruções, você criará a seção D na arquitetura existente, que inclui duas novas funções do Azure que se comunicam com o SignalR e aplicativos cliente.

Diagrama dos serviços do Azure em um cenário de ponta a ponta, que mostra os dados que entram e saem dos Gêmeos Digitais do Azure.

Criar instância do Azure SignalR

Em seguida, crie uma instância do Azure SignalR para usar neste artigo seguindo as instruções em Criar uma instância do Serviço Azure SignalR (por enquanto, conclua apenas as etapas nesta seção).

Deixe a janela do navegador aberta para o portal do Azure, pois você a usará novamente na próxima seção.

Publicar e configurar o aplicativo Azure Functions

Nesta seção, você configurará duas funções do Azure:

  • negotiate - Uma função de gatilho HTTP. Ele usa a ligação de entrada SignalRConnectionInfo para gerar e retornar informações de conexão válidas.
  • broadcast - Uma função de gatilho de grade de eventos. Ele recebe dados de telemetria do Azure Digital Twins por meio da grade de eventos e usa a associação de saída da instância do SignalR criada na etapa anterior para transmitir a mensagem para todos os aplicativos cliente conectados.

Inicie o Visual Studio ou outro editor de código de sua escolha e abra a solução de código na pasta digital-twins-samples-main\ADTSampleApp . Em seguida, execute as seguintes etapas para criar as funções:

  1. No projeto SampleFunctionsApp, crie uma nova classe C# chamada SignalRFunctions.cs.

  2. Substitua o conteúdo do arquivo de classe com o seguinte código:

    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. Na janela Console do Gerenciador de Pacotes do Visual Studio, ou em qualquer janela de comando em sua máquina, navegue até a pasta digital-twins-samples-main\AdtSampleApp\SampleFunctionsApp e execute o seguinte comando para instalar o SignalRService pacote NuGet no projeto:

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

    A execução deste comando deve resolver quaisquer problemas de dependência na classe.

  4. Publique a função no Azure, usando seu método preferido.

    Para obter instruções sobre como publicar a função usando o Visual Studio, consulte Desenvolver funções do Azure usando o Visual Studio. Para obter instruções sobre como publicar a função usando o Visual Studio Code, consulte Criar uma função C# no Azure usando o Visual Studio Code. Para obter instruções sobre como publicar a função usando a CLI do Azure, consulte Criar uma função C# no Azure a partir da linha de comando.

Configurar a função

Em seguida, configure a função para se comunicar com sua instância do Azure SignalR. Você começará coletando a cadeia de conexão da instância do SignalR e a adicionará às configurações do aplicativo de funções.

  1. Vá para o portal do Azure e procure o nome da sua instância do SignalR na barra de pesquisa na parte superior do portal. Selecione a instância para abri-la.

  2. Selecione Chaves no menu de ocorrência para exibir as cadeias de conexão para a instância de serviço SignalR.

  3. Selecione o ícone Copiar para copiar a cadeia de conexão primária.

    Captura de tela do portal do Azure que mostra a página Chaves para a instância do SignalR. A cadeia de conexão está sendo copiada.

  4. Por fim, adicione sua cadeia de conexão do Azure SignalR às configurações do aplicativo da função, usando o seguinte comando da CLI do Azure. Além disso, substitua os espaços reservados pelo grupo de recursos e pelo nome do aplicativo de serviço/função do aplicativo no pré-requisito do tutorial. O comando pode ser executado no Azure Cloud Shell ou localmente se você tiver a CLI do Azure instalada em sua máquina:

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

    A saída deste comando imprime todas as configurações do aplicativo configuradas para sua função do Azure. Procure AzureSignalRConnectionString na parte inferior da lista para verificar se foi adicionado.

    Captura de tela da saída em uma janela de comando, mostrando um item de lista chamado 'AzureSignalRConnectionString'.

Conecte a função à Grade de Eventos

Em seguida, inscreva a função de transmissão do Azure no tópico Grade de Eventos que você criou durante o pré-requisito do tutorial. Essa ação permitirá que os dados de telemetria fluam do gêmeo termostato67 através do tópico Grade de Eventos e para a função. A partir daqui, a função pode transmitir os dados para todos os clientes.

Para transmitir os dados, você criará uma assinatura de evento do tópico Grade de Eventos para sua função de transmissão do Azure como um ponto de extremidade.

No portal do Azure, navegue até o tópico da Grade de Eventos pesquisando seu nome na barra de pesquisa superior. Selecione + Subscrição de Eventos.

Captura de ecrã de como criar uma subscrição de evento no portal do Azure.

Na página Criar Subscrição de Eventos, preencha os campos da seguinte forma (os campos preenchidos por predefinição não são mencionados):

  • DETALHES>DA SUBSCRIÇÃO DO EVENTO Nome: Dê um nome à sua subscrição do evento.
  • DETALHES>DO PONTO DE EXTREMIDADE Tipo de ponto de extremidade: Selecione Função do Azure nas opções do menu.
  • DETALHES>DO PONTO DE EXTREMIDADE Ponto de extremidade: Selecione o link Selecionar um ponto de extremidade , que abrirá uma janela Selecionar Função do Azure:
    • Preencha a sua Subscrição, Grupo de recursos, Aplicação Função e Função (transmissão). Alguns desses campos podem ser preenchidos automaticamente depois de selecionar a assinatura.
    • Selecione Confirmar a Seleção.

Captura de ecrã do formulário para criar uma subscrição de evento no portal do Azure.

De volta à página Criar Assinatura de Evento , selecione Criar.

Neste ponto, você verá duas assinaturas de evento na página Tópico da Grade de Eventos .

Captura de ecrã do portal do Azure a mostrar duas subscrições de eventos na página de tópicos da Grelha de Eventos.

Configurar e executar o aplicativo Web

Nesta seção, você verá o resultado em ação. Primeiro, configure o aplicativo Web cliente de exemplo para se conectar ao fluxo do Azure SignalR que você configurou. Em seguida, você iniciará o aplicativo de exemplo de dispositivo simulado que envia dados de telemetria do dispositivo por meio de sua instância do Azure Digital Twins. Depois disso, você visualizará o aplicativo Web de exemplo para ver os dados simulados do dispositivo atualizando o aplicativo Web de exemplo em tempo real.

Configurar o aplicativo Web cliente de exemplo

Em seguida, você configurará o aplicativo Web cliente de exemplo. Comece coletando a URL do ponto de extremidade HTTP da função de negociação e, em seguida, use-a para configurar o código do aplicativo em sua máquina.

  1. Vá para a página Aplicativos de função do portal do Azure e selecione seu aplicativo de função na lista. No menu do aplicativo, selecione Funções e escolha a função de negociação .

    Captura de ecrã das aplicações de função do portal do Azure, com 'Funções' realçado no menu e 'Negociar' realçado na lista de funções.

  2. Selecione Obter URL da função e copie o valor através de /api (não inclui o último /negotiate?). Você usará esse valor na próxima etapa.

    Captura de ecrã do portal do Azure a mostrar a função 'negociar' com o botão 'Obter URL da função' e o URL da função realçado.

  3. Usando o Visual Studio ou qualquer editor de código de sua escolha, abra a pasta digitaltwins-signalr-webapp-sample-main descompactada que você baixou na seção Baixar os aplicativos de exemplo.

  4. Abra o arquivo src/App.js e substitua a URL da função pela HubConnectionBuilder URL do ponto de extremidade HTTP da função de negociação que você salvou na etapa anterior:

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

  5. No prompt de comando do desenvolvedor do Visual Studio ou em qualquer janela de comando em sua máquina, navegue até a pasta digitaltwins-signalr-webapp-sample-main\src. Execute o seguinte comando para instalar os pacotes de nó dependente:

    npm install

Em seguida, defina permissões em seu aplicativo de função no portal do Azure:

  1. Na página Aplicativos de função do portal do Azure, selecione sua instância de aplicativo de função.

  2. Role para baixo no menu de ocorrência e selecione CORS. Na página CORS, adicione http://localhost:3000 como uma origem permitida inserindo-a na caixa vazia. Marque a caixa para Ativar Access-Control-Allow-Credentials e selecione Salvar.

    Captura de ecrã do portal do Azure a mostrar a Configuração CORS na Função Azure.

Execute o simulador de dispositivo

Durante o pré-requisito do tutorial de ponta a ponta, você configurou o simulador de dispositivo para enviar dados por meio de um Hub IoT e para sua instância do Azure Digital Twins.

Agora, inicie o projeto de simulador localizado em digital-twins-samples-main\DeviceSimulator\DeviceSimulator.sln. Se você estiver usando o Visual Studio, você pode abrir o projeto e, em seguida, executá-lo com este botão na barra de ferramentas:

Captura de tela do botão Iniciar do Visual Studio com o projeto DeviceSimulator aberto.

Uma janela do console será aberta e exibirá mensagens simuladas de telemetria de temperatura do dispositivo. Essas mensagens estão sendo enviadas por meio de sua instância do Azure Digital Twins, onde são coletadas pelas funções do Azure e pelo SignalR.

Você não precisa fazer mais nada neste console, mas deixe-o em execução enquanto conclui a próxima etapa.

Ver os resultados

Para ver os resultados em ação, inicie o exemplo de aplicativo Web de integração do SignalR. Você pode fazer isso a partir de qualquer janela do console no local digitaltwins-signalr-webapp-sample-main\src , executando este comando:

npm start

Executar esse comando abrirá uma janela do navegador executando o aplicativo de exemplo, que exibe um medidor de temperatura visual. Quando o aplicativo estiver em execução, você deve começar a ver os valores de telemetria de temperatura do simulador de dispositivo que se propagam pelos Gêmeos Digitais do Azure sendo refletidos pelo aplicativo Web em tempo real.

Captura de tela do aplicativo Web cliente de exemplo, mostrando um medidor de temperatura visual. A temperatura refletida é 67.52.

Clean up resources (Limpar recursos)

Se você não precisar mais dos recursos criados neste artigo, siga estas etapas para excluí-los.

Usando o Azure Cloud Shell ou a CLI local do Azure, você pode excluir todos os recursos do Azure em um grupo de recursos com o comando az group delete . A remoção do grupo de recursos também removerá:

  • A instância dos Gêmeos Digitais do Azure (do tutorial de ponta a ponta)
  • O hub IoT e o registro do dispositivo hub (do tutorial de ponta a ponta)
  • O tópico Grade de Eventos e assinaturas associadas
  • O aplicativo Azure Functions, incluindo todas as três funções e recursos associados, como armazenamento
  • A instância do Azure SignalR

Importante

A eliminação de um grupo de recursos é irreversível. O grupo de recursos e todos os recursos nele contidos são eliminados permanentemente. Confirme que não elimina acidentalmente o grupo de recursos ou recursos errados.

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

Finalmente, exclua as pastas de exemplo de projeto que você baixou para sua máquina local (digital-twins-samples-main.zip, digitaltwins-signalr-webapp-sample-main.zip e suas contrapartes descompactadas).

Próximos passos

Neste artigo, você configura as funções do Azure com o SignalR para transmitir eventos de telemetria do Azure Digital Twins para um aplicativo cliente de exemplo.

Em seguida, saiba mais sobre o Serviço Azure SignalR:

Ou leia mais sobre a Autenticação de Serviço do Azure SignalR com o Azure Functions: