Partilhar via

Tutorial: Criar um aplicativo de chat sem servidor com o serviço Azure Web PubSub e os Aplicativos Web Estáticos do Azure

O Azure Web PubSub ajuda você a criar aplicativos Web de mensagens em tempo real usando WebSocket. Os Aplicativos Web Estáticos do Azure ajudam você a criar e implantar aplicativos Web de pilha completa automaticamente no Azure a partir de um repositório de código. Neste tutorial, você aprenderá a usar o Web PubSub e o Static Web Apps juntos para criar um aplicativo de sala de chat em tempo real.

Mais especificamente, você aprende a:

  • Crie um aplicativo de bate-papo sem servidor
  • Trabalhar com ligações de entrada e saída da função Web PubSub
  • Trabalhar com aplicativos Web estáticos

Importante

As cadeias de conexão brutas aparecem neste artigo apenas para fins de demonstração.

Uma cadeia de conexão inclui as informações de autorização necessárias para seu aplicativo acessar o serviço Azure Web PubSub. A chave de acesso dentro da cadeia de conexão é semelhante a uma senha de root para o seu serviço. Em ambientes de produção, proteja sempre as suas chaves de acesso. Use o Azure Key Vault para gerenciar e girar suas chaves com segurança e proteger sua conexão com WebPubSubServiceCliento .

Evite distribuir chaves de acesso para outros usuários, codificá-las ou salvá-las em qualquer lugar em texto simples acessível a outras pessoas. Rode as chaves se acreditar que podem ter sido comprometidas.

Descrição geral

Diagrama mostrando como o Azure Web PubSub funciona com os Aplicativos Web Estáticos do Azure.

O GitHub ou o Azure Repos fornecem controle de origem para Aplicativos Web estáticos. O Azure monitora a ramificação de repositório selecionada e, sempre que há uma alteração de código no repositório de origem, uma nova compilação do seu aplicativo Web é executada e implantada automaticamente no Azure. A entrega contínua é fornecida pelo GitHub Actions e Azure Pipelines. O Static Web Apps deteta a nova compilação e a apresenta ao usuário do ponto de extremidade.

O aplicativo de sala de chat de exemplo fornecido com este tutorial tem o seguinte fluxo de trabalho.

  1. Quando um usuário entra no aplicativo, a API do Azure Functions login é acionada para gerar uma URL de conexão de cliente do serviço Web PubSub.
  2. Quando o cliente inicializa a solicitação de conexão para Web PubSub, o serviço envia um evento do sistema connect que aciona a API de funções connect para autenticar o usuário.
  3. Quando um cliente envia uma mensagem para o serviço Azure Web PubSub, o serviço responde com um evento de usuário message e a API de Funções message é acionada para transmitir, a mensagem para todos os clientes conectados.
  4. A API do Functions validate é acionada periodicamente para a Proteção contra Abuso do CloudEvents quando os eventos no Azure Web PubSub são configurados com o parâmetro {event}predefinido, ou seja, https://$STATIC_WEB_APP/api/{event}.

Nota

As APIs connect do Functions e message são acionadas quando o serviço Azure Web PubSub é configurado com esses dois eventos.

Pré-requisitos

  • Uma conta GitHub.
  • Uma conta do Azure. Se você não tiver uma assinatura do Azure, crie uma conta gratuita do Azure antes de começar.
  • CLI do Azure (versão 2.29.0 ou superior) ou Azure Cloud Shell para gerenciar recursos do Azure.

Criar um recurso Web PubSub

  1. Entre na CLI do Azure usando o seguinte comando.

    az login

  2. Crie um grupo de recursos.

    az group create \
  --name my-awps-swa-group \
  --location "eastus2"

  3. Crie um recurso Web PubSub.

    az webpubsub create \
  --name my-awps-swa \
  --resource-group my-awps-swa-group \
  --location "eastus2" \
  --sku Free_F1

  4. Obtenha e segure a chave de acesso para uso posterior.

    As cadeias de conexão brutas aparecem neste artigo apenas para fins de demonstração. Em ambientes de produção, proteja sempre as suas chaves de acesso. Use o Azure Key Vault para gerenciar e girar suas chaves com segurança e proteger sua conexão com WebPubSubServiceCliento .

    az webpubsub key show \
  --name my-awps-swa \
  --resource-group my-awps-swa-group

    AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>

    Substitua o espaço reservado <YOUR_AWPS_ACCESS_KEY> pelo valor da primaryConnectionString etapa anterior.

Criar um repositório

Este artigo usa um repositório de modelos do GitHub para facilitar os primeiros passos. O modelo apresenta um aplicativo inicial que você implanta nos Aplicativos Web Estáticos do Azure.

  1. Vá para https://github.com/Azure/awps-swa-sample/generate criar um novo repositório para este tutorial.
  2. Selecione-se como Proprietário e nomeie seu repositório como my-awps-swa-app.
  3. Você pode criar um repositório Público ou Privado de acordo com sua preferência. Ambos funcionam para o tutorial.
  4. Selecione Criar repositório a partir de modelo.

Criar uma aplicação Web estática

Agora que o repositório foi criado, você pode criar um aplicativo Web estático a partir da CLI do Azure.

  1. Crie uma variável para manter seu nome de usuário do GitHub.

    GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>

    Substitua o espaço reservado <YOUR_GITHUB_USER_NAME> pelo nome de usuário do GitHub.

  2. Crie um novo aplicativo Web estático a partir do repositório. Quando você executa esse comando, a CLI inicia uma entrada interativa do GitHub. Siga a mensagem para concluir a autorização.

    az staticwebapp create \
    --name my-awps-swa-app \
    --resource-group my-awps-swa-group \
    --source https://github.com/$GITHUB_USER_NAME/my-awps-swa-app \
    --location "eastus2" \
    --branch main \
    --app-location "src" \
    --api-location "api" \
    --login-with-github

    Importante

    A URL passada para o --source parâmetro não deve incluir o sufixo .git .

  3. Aceda a https://github.com/login/device.

  4. Insira o código de usuário conforme exibido na mensagem do console.

  5. Selecione Continuar.

  6. Selecione Autorizar AzureAppServiceCLI.

  7. Configure as configurações do aplicativo Web estático.

    az staticwebapp appsettings set \
  -n my-awps-swa-app \
  --setting-names WebPubSubConnectionString=$AWPS_ACCESS_KEY WebPubSubHub=sample_swa

Ver o site

Há dois aspetos na implantação de um aplicativo estático: o primeiro cria os recursos subjacentes do Azure que compõem seu aplicativo. O segundo é um fluxo de trabalho do GitHub Actions que compila e publica a sua aplicação.

Antes de navegar até o novo site estático, a compilação de implantação deve primeiro concluir a execução.

  1. Retorne à janela do console e execute o seguinte comando para listar as URLs associadas ao seu aplicativo.

    az staticwebapp show \
  --name  my-awps-swa-app \
  --query "repositoryUrl"

    A saída desse comando retorna a URL para o repositório do GitHub.

  2. Copie o URL do repositório e cole-o no navegador.

  3. Selecione o separador Ações.

    Neste ponto, o Azure está criando os recursos para dar suporte ao seu aplicativo Web estático. Aguarde até que o ícone ao lado do fluxo de trabalho em execução se transforme em uma marca de seleção com fundo ✅verde. Esta operação pode levar alguns minutos para ser concluída.

    Quando o ícone de sucesso aparecer, o fluxo de trabalho estará concluído e você poderá retornar à janela do console.

  4. Execute o seguinte comando para consultar o URL do seu site.

    az staticwebapp show \
  --name my-awps-swa-app \
  --query "defaultHostname"

    Mantenha pressionada a url a ser definida no manipulador de eventos Web PubSub.

    STATIC_WEB_APP=<YOUR_STATIC_WEB_APP>

Configurar o manipulador de eventos Web PubSub

Você está muito perto de concluir. A última etapa é configurar o Web PubSub para que as solicitações do cliente sejam transferidas para suas APIs de função.

  1. Execute o seguinte comando para configurar eventos do serviço Web PubSub. Ele mapeia funções sob a api pasta em seu repositório para o manipulador de eventos Web PubSub.

    az webpubsub hub create \
  -n "my-awps-swa" \
  -g "my-awps-swa-group" \
  --hub-name "sample_swa" \
  --event-handler url-template=https://$STATIC_WEB_APP/api/{event} user-event-pattern="*" system-event="connect"

Agora você está pronto para jogar com seu site <YOUR_STATIC_WEB_APP>. Copie-o para o navegador e selecione Continuar para começar a conversar com seus amigos.

Clean up resources (Limpar recursos)

Se não pretender continuar a utilizar esta aplicação, pode eliminar o grupo de recursos e a aplicação Web estática executando o seguinte comando.

az group delete --name my-awps-swa-group

Próximos passos

Neste guia de início rápido, você aprendeu como desenvolver e implantar um aplicativo de bate-papo sem servidor. Agora, você pode começar a criar seu próprio aplicativo.

Divirta-se com demonstrações jogáveis

Associações do Azure Web PubSub para o Azure Functions

  • Last updated on