Anterior

Seguinte

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

Concluído

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ções.

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.

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 Azure Functions.

2. Abra o arquivo de fluxo de trabalho.

3. Altere o name valor na parte superior do arquivo para Server.

4. Como o repositório de origem tem o aplicativo Azure Functions 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'
   

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

6. 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: Upload artifact for deployment job
     uses: actions/upload-artifact@v3
     with:
       name: node-app
       path: 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.

7. 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, selecione Configurações -> Configuração e, em seguida, selecione Nova configuração do aplicativo.

2. Insira as configurações para as cadeias de conexão Cosmos DB e SignalR. Você pode encontrar os valores na local.settings.jsonstart/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.

Continuar