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:

Crie um recurso do Azure SignalR.
Dê suporte ao SignalR criando algumas novas funções.
Atualize o cliente para que ele dê suporte ao SignalR.

Criar um recurso do SignalR

Você precisa criar um recurso do Azure SignalR.

Volte ao terminal para criar o recurso do SignalR.

Navegue até o setup-resources subdiretório e crie o recurso.

cd setup-resources && bash create-signalr-resources.sh & cd ..

Copie e salve a cadeia de conexão para o recurso do SignalR. Você precisa desse valor para atualizar o código do servidor.

Tipo de recurso Variável de ambiente

Azure SignalR Conhecido como SIGNALR_CONNECTION_STRING

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

Abra a paleta de comandos do Visual Studio Code pressionando F1.
Pesquise e selecione o comando Azure Functions: Criar Função .
Escolha Definir padrão e selecione iniciar/servidor para definir o local do aplicativo de funções.
Selecione Sim quando solicitado a inicializar o projeto para uso com o VS Code?.
Quando solicitado, forneça as seguintes informações.

Nome Valor

Modelo Gatilho HTTP

Nome signalr-open-connection

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

Nome	Valor
Modelo	Gatilho HTTP
Nome	signalr-open-connection

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`

Abra a paleta de comandos do Visual Studio Code pressionando F1.
Pesquise e selecione o comando Azure Functions: Criar Função .
Selecione o local do aplicativo de funções como start/server.

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	verdadeiro

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

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 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 ao aplicativo: As app.CosmosDB vinculam as ligações ao nome da função send-signalr-messages.

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

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

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

Criar o aplicativo do Azure Functions

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

Abra o portal do Azure para criar um novo aplicativo de funções.

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

Nome	Valor
Hospedagem	Selecione Plano de Consumo.
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 o código.
Pilha de runtime	Selecione Node.js.
Versão	Escolha uma versão LTS do Node.js.
Região	Selecione uma região próxima a você.
Sistema operacional	Selecione Linux.

Não preencha nenhuma outra guia e selecione Examinar + criar e, em seguida, selecione Criar. Aguarde a implantação ser concluída antes de continuar.
Selecione Ir para o recurso para abrir o novo aplicativo de funções.

Configurar a implantação do GitHub

Para habilitar a implantação contínua, conecte seu novo aplicativo de funções ao repositório GitHub. 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.

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

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`.
Ramo	Selecione a ramificação principal.
Tipo de autenticação	Selecione Identidade atribuída pelo usuário.
Assinatura	Selecione a mesma assinatura vista na parte superior da página.
Identidade	Selecione Criar novo.

Selecione Salvar na parte superior da seção para salvar as configurações. Um novo arquivo de fluxo de trabalho é criado em seu repositório derivado.
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.

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

No terminal do Visual Studio Code, extraia o novo arquivo de fluxo de trabalho do fork (origem).
```
git pull origin main
```
Esse comando deve colocar uma nova pasta em .github com um caminho para o seu arquivo de fluxo de trabalho: .github/workflows/main_RESOURCE_NAME.yml, onde RESOURCE_NAME é o nome do aplicativo de funções.
Abra o arquivo de fluxo de trabalho e altere o valor name na parte superior do arquivo para Server.
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 nomeada PACKAGE_PATH para usar o caminho do pacote.
```
env:
  PACKAGE_PATH: 'start/server'
```
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
```
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.
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 origin main
```
Essa alteração dispara o fluxo de trabalho a ser executado. Você pode observar o fluxo de trabalho na seção Ações da bifurcação no GitHub.

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

No portal do Azure, localize seu aplicativo de funções e selecioneVariáveis de Ambiente de > e selecione + Adicionar.
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.
Selecione Salvar para salvar as configurações.

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.

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

No portal do Azure, selecione Visão geral e selecione Domínio padrão para abrir o aplicativo em um navegador para testar as funções de API.
Acrescente /api/getStocks à URL no navegador e pressione Enter. Você verá uma matriz JSON com os dados das ações.
Copie a URL. Você precisará dela mais tarde ao atualizar o arquivo do cliente .env para o valor BACKEND_URL quando trabalhar na Unidade 7.

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