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 o WebSocket. Os Aplicativos Web Estáticos do Azure ajudam você a criar e implantar aplicativos Web completos automaticamente no Azure a partir de um repositório de códigos. Neste tutorial, você aprenderá a usar o Web PubSub e o Aplicativos Web Estáticos juntos para criar um aplicativo de sala de chat em tempo real.

Mais especificamente, você aprenderá a:

  • Criar um aplicativo de chat sem servidor
  • Trabalhar com associações de entrada e saída de função do Web PubSub
  • Trabalhe com Aplicativos Web Estáticos

Importante

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

Uma cadeia de conexão inclui as informações de autorização que sua aplicação precisa para acessar o serviço Azure Web PubSub. A chave de acesso na cadeia de conexão funciona como uma senha root para o seu serviço. Em ambientes de produção, sempre proteja suas chaves de acesso. Use o Azure Key Vault para gerenciar e girar suas chaves com segurança e proteger sua conexão com WebPubSubServiceClient.

Evite distribuir chaves de acesso para outros usuários, fazer hard-coding com elas ou salvá-las em qualquer lugar em texto sem formatação que seja acessível a outras pessoas. Gire suas chaves se você acredita que elas podem ter sido comprometidas.

Visão geral

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

O GitHub ou o Azure Repos fornecem controle do código-fonte para Aplicativos Web Estáticos. O Azure monitora o branch de repositório selecionado e sempre que há uma alteração de código no repositório de origem, um novo build do aplicativo Web é executado e implantado automaticamente no Azure. A entrega contínua é fornecida pelo GitHub Actions e pelo Azure Pipelines. O Aplicativos Web Estáticos detecta a nova compilação e a disponibiliza ao usuário final.

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

  1. Quando um usuário entrar no aplicativo, a API do Azure Functions login será disparada 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 com o Web PubSub, o serviço envia um evento do sistema connect que dispara a API connect do Functions 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 do Functions message é disparada 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 predefinido {event}, isto é, https://$STATIC_WEB_APP/api/{event}.

Observação

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

Pré-requisitos

Criar um recurso do Web PubSub

  1. Entre na CLI do Azure usando o comando a seguir.

    az login

  2. Crie um grupo de recursos.

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

  3. Crie um recurso do 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 somente para fins de demonstração. Em ambientes de produção, sempre proteja suas chaves de acesso. Use o Azure Key Vault para gerenciar e girar suas chaves com segurança e proteger sua conexão com WebPubSubServiceClient.

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

    AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>

    Substitua o marcador <YOUR_AWPS_ACCESS_KEY> pelo valor de primaryConnectionString da etapa anterior.

Criar um repositório

Este artigo usa um repositório de modelos do GitHub para facilitar a introdução. O modelo apresenta um aplicativo inicial que você implanta nos Aplicativos Web Estáticos do Azure.

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

Criar um aplicativo Web estático

Agora que o repositório foi criado, você pode criar um aplicativo Web estático usando a 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 seu 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 parâmetro --source não deve incluir o sufixo .git.

  3. Ir para https://github.com/login/device.

  4. Digite o código do usuário conforme exibido na mensagem do seu console.

  5. Selecione Continuar.

  6. Selecione Authorize AzureAppServiceCLI.

  7. Defina 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 aspectos 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 cria e publica seu aplicativo.

Antes de acessar seu novo site estático, o build de implantação precisa primeiro ser concluído.

  1. Retorne à janela do console e execute o comando a seguir 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 seu repositório GitHub.

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

  3. Selecione a guia 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 demorar 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"

    Segure a URL a ser definida no manipulador de eventos do Web PubSub.

    STATIC_WEB_APP=<YOUR_STATIC_WEB_APP>

Configurar o manipulador de eventos do 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 comando a seguir para configurar eventos de serviço do Web PubSub. Ele mapeia funções na pasta api em seu repositório para o manipulador de eventos do 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 aproveitar seu site <YOUR_STATIC_WEB_APP>. Copie-o para o navegador e selecione Continuar para começar a conversar com seus amigos.

Limpar os recursos

Se você não for continuar usando este aplicativo, poderá excluir o grupo de recursos e o aplicativo Web estático executando o comando a seguir.

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

Próximas etapas

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

Divirta-se com demonstrações jogáveis

Vínculos do Azure Web PubSub para Azure Functions

  • Última atualização em