Exercício – ativar as atualizações automáticas numa aplicação Web com o SignalR Service

  • 12 minutos

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

  • Um recurso do Azure SignalR
  • Algumas novas funções para suportar SignalR
  • Atualize o cliente para suportar o SignalR

Criar um recurso SignalR

Você precisa criar um recurso do Azure SignalR.

  1. Retorne ao terminal para criar o recurso SignalR.

  2. Navegue até o setup-resources subdiretório 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 SignalR. Você precisará disso para atualizar o código do servidor.

    Tipo de Recurso Variável de ambiente
    Azure SignalR Referido como SIGNALR_CONNECTION_STRING

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

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

Criar a signalr-open-connection função

O cliente Web utiliza o SDK do cliente SignalR para estabelecer uma ligação ao 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 ao premir F1.

  2. Procure e selecione o comando Azure Functions: Create Function (Funções do Azure: Criar Função).

  3. Escolha Definir padrão e, em seguida, selecione iniciar/servidor para definir o local do aplicativo Função.

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

  5. Quando lhe for pedido, forneça as seguintes informações.

    Nome Valor
    Template Acionador HTTP
    Nome signalr-open-connection

    Um arquivo chamado signalr-open-connection.ts agora 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 SignalR são retornadas da função.

Criar a signalr-send-message função

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

  2. Procure e selecione o comando Azure Functions: Create Function (Funções do Azure: Criar Função).

  3. Selecione o local do aplicativo Função como início/servidor.

  4. Quando lhe for pedido, forneça as seguintes informações.

    Nome Valor
    Template Acionador 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 verdadeiro

    Atualize a janela do Explorer no Visual Studio Code, para ver as atualizações. Um arquivo chamado signalr-open-connection agora 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 dados de entrada: o comingFromCosmosDB objeto define o gatilho do Cosmos DB para observar as alterações.
  • Definir transporte de saída: O goingOutToSignalR objeto define a mesma conexão SignalR. O hubName é o mesmo hub default.
  • Conectar dados ao transporte: O dataToMessage obtém os itens alterados na tabela e envia cada item alterado individualmente através do stocks SignalR usando o extraOutputs usando o mesmo hub default.
  • Conectar-se ao aplicativo: vincula app.CosmosDB as ligações ao nome send-signalr-messagesda função .

Confirme alterações e envie por push para o GitHub

  1. No terminal, confirme as alterações no repositório.

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

Criar a signalr-send-message função

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

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

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

    Nome Valor
    Grupo de recursos Crie um novo nome stock-prototypede grupo de recursos .
    Nome da Aplicação de Funções Poste o seu nome para api. Por exemplo, api-jamie.
    Código ou contentor Selecione o código.
    Pilha de runtime selecione Node.js.
    Versão Selecione uma versão LTS do Node.js.
    País/Região Selecione uma região perto de si.
    Sistema operativo Selecione Linux.
    Alojamento Selecione Plano de Consumo.

  3. Não preencha nenhum outro separador e selecione Rever + criar e, em seguida, selecione Criar. Aguarde pela conclusão da implementação antes de continuar.

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

Configurar a implantação do GitHub

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

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

  2. Selecione Origem do GitHub.

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

    Nome Valor
    Organization Selecione sua conta no GitHub.
    Repositório Procure e selecione mslearn-advocates.azure-functions-and-signalr.
    Filial Selecione a ramificação principal .
    Opção de fluxo de trabalho Selecione Adicionar um fluxo de trabalho ....
    Authentication type Selecione User-assigned-identity.
    Subscrição Selecione a mesma assinatura que aparece na parte superior da página.
    Identidade Selecione Criar novo.

  4. Selecione Salvar na parte superior da seção para salvar as configurações. Isso cria um novo arquivo de fluxo de trabalho em seu repositório bifurcado.

  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ção.

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

Atualizar a identidade gerenciada

  1. Na página do seu novo aplicativo de função no portal do Azure, selecione seu grupo de recursos em Visão geral>do Essentials e, em seguida, 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 a Ambiente e insira Production Ambiente.
  4. Selecione Atualizar para atualizar a credencial.

Editar fluxo de trabalho de implantação do GitHub

  1. No terminal do Visual Studio Code, puxe para baixo o novo arquivo de fluxo de trabalho da bifurcação (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 onde RESOURCE_NAME é o nome do aplicativo de função.

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

  3. Como o repositório de origem tem o aplicativo de função 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. Localize a etapa Resolver dependências do projeto usando Npm e substitua o conteúdo pelo seguinte YAML para também usar o caminho do subdiretório do pacote. A alteração crítica é o pushd caminho no comando para incluir a env.PACKAGE_PATH variável.

    - 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 o artefato Zip para a etapa de implantação e substitua o conteúdo pelo seguinte YAML 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 para que o ../ valor seja necessário para colocar o arquivo zip na raiz.

  6. Salve o arquivo e confirme as alterações no repositório.

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

    Essa alteração acionará a execução do fluxo de trabalho. Você pode assistir ao fluxo de trabalho na seção Ações da bifurcação no GitHub.

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

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

  2. Insira as configurações para as cadeias de conexão Cosmos DB e SignalR. Você pode encontrar os valores na local.settings.json start/server pasta.

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

  3. Selecione Guardar para guardar as definições.

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

  1. No portal do Azure, selecione Visão geral e selecione URL para abrir o aplicativo em um navegador.
  2. Copie o URL, você precisará disso quando atualizar o arquivo do cliente .env para o BACKEND_URL valor quando trabalhar na Unidade 7.
  3. Abra o URL em um navegador para testar as funções da API.
  4. Anexe /api/getStocks ao URL no navegador e pressione Enter. Você deve ver uma matriz JSON com dados de estoque.

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