Exercício – Habilitar atualizações automáticas em um aplicativo Web usando o Serviço do SignalR

  • 12 minutos

Para adicionar o SignalR a este protótipo, você precisa criar:

  • Um recurso do Azure SignalR
  • Algumas novas funções para dar suporte ao SignalR
  • Atualizar o cliente para dar suporte ao SignalR

Criar um recurso do SignalR

Você precisa criar um recurso do Azure SignalR.

  1. Volte ao terminal para criar o recurso do SignalR.

  2. Navegue até o subdiretório setup-resources para criar o recurso.

    cd stock-prototype/setup-resources && bash create-signalr-resources.sh & cd ..

  3. Copie a cadeia de conexão para o recurso do SignalR. Você precisará dela para atualizar o código do servidor.

    Tipo de recurso Variável de ambiente
    Azure SignalR Conhecido como SIGNALR_CONNECTION_STRING

Atualizar as variáveis de ambiente de configuração do servidor

Em ./start/server/local.settings.json, adicione uma variável ao objeto Values chamado SIGNALR_CONNECTION_STRING com o valor listado no terminal e salve o arquivo.

Criar a função signalr-open-connection

O cliente Web usa o SDK do cliente do SignalR para estabelecer uma conexão com o servidor. O SDK recupera a conexão por meio de uma função chamada signalr-open-connection para se conectar ao serviço.

  1. Abra a paleta de comandos do Visual Studio Code pressionando F1.

  2. Pesquise e selecione o comando Azure Functions: Criar Função.

  3. Escolha Definir padrão e selecione start/server para definir o local do aplicativo de funções.

  4. Selecione Sim quando solicitado a Inicializar o projeto para uso com o VS Code?.

  5. Quando solicitado, forneça as seguintes informações.

    Nome Valor
    Modelo Gatilho HTTP
    Nome signalr-open-connection

    Um arquivo chamado signalr-open-connection.ts já está disponível em ./start/server/src/functions.

  6. Abra signalr-open-connection.ts e substitua tudo pelo código a seguir.

    import { app, input } from '@azure/functions';

const inputSignalR = input.generic({
    type: 'signalRConnectionInfo',
    name: 'connectionInfo',
    hubName: 'default',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

app.http('open-signalr-connection', {
    authLevel: 'anonymous',
    handler: (request, context) => {
        return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) }
    },
    route: 'negotiate',
    extraInputs: [inputSignalR]
});

    As informações de conexão do SignalR são retornadas da função.

Criar a função signalr-send-message

  1. Abra a paleta de comandos do Visual Studio Code pressionando F1.

  2. Pesquise e selecione o comando Azure Functions: Criar Função.

  3. Selecione o local do aplicativo de funções como start/server.

  4. Quando solicitado, forneça as seguintes informações.

    Nome Valor
    Modelo Gatilho do Azure Cosmos DB
    Nome signalr-send-message
    Cadeia de conexão do Cosmos DB COSMOSDB_CONNECTION_STRING
    Nome do banco de dados a ser monitorado stocksdb
    Nome da coleção stocks
    Verifica a existência e cria automaticamente a coleção de concessões true

    Atualize a janela do Explorer no Visual Studio Code para ver as atualizações. Um arquivo chamado signalr-open-connection já está disponível em ./start/server/src/functions.

  5. Abra signalr-send-message.ts e substitua tudo pelo código a seguir.

    import { app, output, CosmosDBv4FunctionOptions, InvocationContext } from "@azure/functions";

const goingOutToSignalR = output.generic({
    type: 'signalR',
    name: 'signalR',
    hubName: 'default',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

export async function dataToMessage(documents: unknown[], context: InvocationContext): Promise<void> {

    try {

        context.log(`Documents: ${JSON.stringify(documents)}`);

        documents.map(stock => {
            // @ts-ignore
            context.log(`Get price ${stock.symbol} ${stock.price}`);
            context.extraOutputs.set(goingOutToSignalR,
                {
                    'target': 'updated',
                    'arguments': [stock]
                });
        });
    } catch (error) {
        context.log(`Error: ${error}`);
    }
}

const options: CosmosDBv4FunctionOptions = {
    connection: 'COSMOSDB_CONNECTION_STRING',
    databaseName: 'stocksdb',
    containerName: 'stocks',
    createLeaseContainerIfNotExists: true,
    feedPollDelay: 500,
    handler: dataToMessage,
    extraOutputs: [goingOutToSignalR],
};

app.cosmosDB('send-signalr-messages', options);
  • Definir os dados de entrada: O objeto comingFromCosmosDB define o gatilho do Cosmos DB para inspecionar as alterações.
  • Definir o transporte de saída: O objeto goingOutToSignalR define a mesma conexão do SignalR. O hubName é o mesmo hub default.
  • Conectar os dados ao transporte: O dataToMessage obtém os itens alterados na tabela stocks e envia cada item alterado individualmente por meio do SignalR usando as extraOutputs pelo mesmo hub default.
  • Conectar-se ao aplicativo: O app.CosmosDB vincula as associações ao nome da função send-signalr-messages.

Fazer commit das alterações e enviá-las por push para o GitHub

  1. No terminal, faça commit das alterações no repositório.

    git add .
git commit -m "Add SignalR functions"
git push

Criar a função signalr-send-message

Crie um aplicativo de funções e recursos relacionados no Azure para o qual você pode publicar o novo código de funções.

  1. Abra o portal do Azure para criar um aplicativo de função.

  2. Use as informações a seguir para preencher a guia Informações básicas da criação de recursos.

    Nome Valor
    Grupo de recursos Crie um grupo de recursos chamado stock-prototype.
    Nome do aplicativo de funções Coloque seu nome após api. Por exemplo, api-jamie.
    Código ou contêiner Selecione código.
    Pilha de runtime Selecione Node.js.
    Versão Escolha uma versão LTS do Node.js.
    Region Selecione uma região próxima a você.
    Sistema operacional Selecione Linux.
    Hosting Selecione Plano de Consumo.

  3. Não preencha nenhuma outra guia. Escolha Revisar + criar e depois Criar. Aguarde a implantação ser concluída antes de continuar.

  4. Selecione Ir para o recurso para abrir o novo aplicativo de funções.

Configurar a implantação do GitHub

Conecte seu novo aplicativo de funções ao repositório GitHub para habilitar a implantação contínua. Em um ambiente de produção, em vez disso, você implantará as alterações de código em um slot de preparo antes de trocá-las para produção.

  1. Na página do portal do Azure do novo aplicativo de funções, selecione Centro de Implantação no menu à esquerda.

  2. Escolha Origem do GitHub.

  3. Use as informações a seguir para concluir a configuração de implantação.

    Nome Valor
    Organização Selecione sua conta do GitHub.
    Repositório Pesquise e selecione mslearn-advocates.azure-functions-and-signalr.
    Branch Selecione a ramificação principal.
    Opção de fluxo de trabalho Selecione Adicionar um fluxo de trabalho….
    Tipo de autenticação Escolha Identidade atribuída pelo usuário.
    Assinatura Selecione a mesma assinatura vista na parte superior da página.
    Identidade Selecione Criar novo.

  4. Escolha Salvar na parte superior da seção para salvar as configurações. Isso criará um arquivo de fluxo de trabalho no repositório com fork.

  5. Essa configuração de implantação cria um arquivo de fluxo de trabalho do GitHub Actions no repositório. Você precisa atualizar o arquivo de fluxo de trabalho para usar o caminho de pacote correto para o aplicativo de funções.

Neste ponto, sua implantação no GitHub pode gerar um erro devido a uma configuração incorreta na identidade gerenciada atribuída pelo usuário criada no seu grupo de recursos no Azure.

Atualizar a identidade gerenciada

  1. Na página do novo aplicativo de funções no portal do Azure, selecione seu grupo de recursos em Visão Geral>Essenciais, depois selecione a identidade gerenciada em Recursos. Essa identidade gerenciada foi criada pelo Functions quando você habilitou a implantação do GitHub.
  2. Na página Identidade Gerenciada, selecione Configurações>Credenciais federadas e, em seguida, selecione a credencial existente.
  3. Em Conectar sua conta do Github, altere a configuração de Entidade para Ambiente e insira Production para Ambiente.
  4. Selecione Atualizar para atualizar a credencial.

Editar o fluxo de trabalho de implantação do GitHub

  1. No terminal do Visual Studio Code, extraia o novo arquivo de fluxo de trabalho do fork (origem).

    git pull origin main

    Isso deve colocar uma nova pasta em .github com um caminho para seu arquivo de fluxo de trabalho: .github/workflows/main_RESOURCE_NAME.yml em que RESOURCE_NAME é o nome do aplicativo de funções.

  2. Abra o arquivo de fluxo de trabalho e altere o valor name na parte superior do arquivo para Server.

  3. Como o repositório de origem possui o aplicativo de funções em um subdiretório, o arquivo de ação precisa ser alterado para refletir isso. Na seção env, adicione uma nova variável chamada PACKAGE_PATH para usar o caminho do pacote.

    env:
  PACKAGE_PATH: 'start/server'

  4. Encontre a etapa Resolver Dependências do Projeto usando o npm e substitua o conteúdo pelo YAML a seguir para também usar o caminho do subdiretório do pacote. A alteração crítica é o caminho no comando pushd para incluir a variável env.PACKAGE_PATH.

    - name: 'Resolve Project Dependencies Using Npm'
  shell: bash
  run: |
    pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}'
    npm install
    npm run build --if-present
    npm run test --if-present
    popd

  5. Encontre a etapa Compactar artefato para a implantação e substitua o conteúdo pelo YAML a seguir para também usar o caminho do subdiretório do pacote.

    - name: Zip artifact for deployment
  run: |
    pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}'
    zip -r release.zip .
    popd
    cp ./${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}/release.zip ./release.zip

    O arquivo zip é colocado na raiz do repositório, ou seja, o valor ../ é necessário para colocar o arquivo zip na raiz.

  6. Salve o arquivo e faça commit das alterações no repositório.

    git add .
git commit -m "Update deployment workflow to use package path"
git push

    Essa alteração vai disparar o fluxo de trabalho a ser executado. Você pode inspecionar o fluxo de trabalho na seção Ações do fork no GitHub.

Configurar as variáveis de ambiente para as funções de API

  1. No portal do Azure, localize seu aplicativo de funções e selecione Configurações>Configuração, em seguida, selecione Nova configuração do aplicativo.

  2. Insira as configurações para as cadeias de conexão do Cosmos DB e do SignalR. Encontre os valores no local.settings.json dentro da pasta start/server.

    Nome Valor
    COSMOSDB_CONNECTION_STRING A cadeia de conexão da conta do Cosmos DB.
    SIGNALR_CONNECTION_STRING A cadeia de conexão da conta do SignalR.

  3. Clique em Salvar para salvar as configurações.

Testar a implantação das funções de API

  1. No portal do Azure, selecione Visão geral e selecione URL para abrir o aplicativo em um navegador.
  2. Copie a URL, pois você precisará dela ao atualizar o arquivo .env do cliente para o valor BACKEND_URL quando estiver na Unidade 7.
  3. Abra a URL em um navegador para testar as funções de API.
  4. Acrescente /api/getStocks à URL no navegador e pressione ENTER. Você verá uma matriz JSON com os dados das ações.

Você atualizou o código do servidor para retornar ações com o SignalR e o implantou em um aplicativo de funções. Em seguida, você atualizará o cliente para usar o SignalR a fim de receber atualizações.