Compartilhar via

Início rápido: Criar aplicativo de chat com o Azure Functions no Modo Sem Servidor Socket.IO (Versão prévia)

Neste artigo, você aprenderá a criar um aplicativo de chat usando o Web PubSub para Socket.IO no Modo Sem Servidor com o Azure Functions. O tutorial orientará você a proteger seu aplicativo com autenticação baseada em identidade, enquanto trabalha online.

A origem do projeto usa o Bicep para implantar a infraestrutura no Azure e o Azure Functions Core Tools para implantar o código no aplicativo de funções.

Pré-requisitos

Obter o código de exemplo

Encontre o código de exemplo: Socket.IO Exemplo Sem Servidor (TS)

git clone https://github.com/Azure/azure-webpubsub.git
cd ./sdk/webpubsub-socketio-extension/examples/chat-serverless-typescript

Implantar a infraestrutura

Os exemplos de chat precisam implantar vários serviços no Azure:

Usamos o Bicep para implantar a infraestrutura. O arquivo está localizado na pasta ./infra. Implante-o com o comando az:

az deployment sub create -n "<deployment-name>" -l "<deployment-location>" --template-file ./infra/main.bicep --parameters environmentName="<env-name>" location="<location>"
  • <deployment-name>: o nome da implantação.
  • <deployment-location>: o local dos metadados de implantação. Observe que não é o local onde os recursos estão implantados.
  • <env-name>: o nome faz parte do nome do grupo de recursos e do nome do recurso.
  • <location>: o local dos recursos.

Revisão da infraestrutura

Na versão de infraestrutura, implantamos um aplicativo de funções do Azure no plano de consumo e a conta de monitoramento e armazenamento exigida pelo aplicativo de funções. Também implantamos o recurso Web PubSub para Socket.IO no Modo Sem Servidor.

Para fins de autenticação baseada em identidade, implantamos uma identidade gerenciada atribuída pelo usuário, atribuímos a ela tanto o aplicativo de funções quanto o recurso Socket.IO e concedemos a ela algumas permissões:

  • Função de Proprietário de Dados do Blob de Armazenamento: Armazenamento de acesso para aplicativo de funções
  • Função do Editor de Métricas de Monitoramento: Monitor de acesso para aplicativo de funções
  • Função de Proprietário do Serviço Web PubSub: Acessar o Web PubSub para Socket.IO para o aplicativo de funções

De acordo com Configurar seu aplicativo do Azure Functions para usar a entrada do Microsoft Entra, criamos uma entidade de serviço. Para evitar o uso de segredo para a entidade de serviço, usamos Credenciais de identidade federadas.

Implantar exemplo no aplicativo de funções

Preparamos um script bash para implantar o código de exemplo no aplicativo de funções:

# Deploy the project
./deploy/deploy.sh "<deployment-name>"

Examinar os detalhes da implantação

Precisamos executar duas etapas para implantar o aplicativo de exemplo.

  • Publicar código no aplicativo de funções (usar o Azure Functions Core Tools)

    func extensions sync
npm install
npm run build
func azure functionapp publish <function-app-name>

  • Configure o Web PubSub para Socket.IO para adicionar uma configuração de hub que pode enviar solicitação ao aplicativo de funções. De acordo com a limitação do provedor de Webhook do aplicativo de funções, você precisa obter uma chave de extensão preenchida pela função. Obtenha mais detalhes em Associação de gatilhos. E à medida que usamos a autenticação baseada em identidade, nas configurações do hub, você precisará atribuir o recurso de destino, que é a clientId da entidade de serviço criada antes.

    code=$(az functionapp keys list -g <resource-group> -n <function-name> --query systemKeys.socketio_extension -o tsv)
az webpubsub hub create -n <socketio-name> -g <resource-group> --hub-name "hub" --event-handler url-template="https://${<function-name>}.azurewebsites.net/runtime/webhooks/socketio?code=${code}" user-event-pattern="*" auth-type="ManagedIdentity" auth-resource="<service-principal-client-id>"

Executar o aplicativo de exemplo

Depois que o código for implantado, visite o site para testar o exemplo:

https://<function-endpoint>/api/index

Captura de tela do aplicativo de chat sem servidor.

Próximas etapas

Em seguida, você poderá seguir o tutorial para escrever o aplicativo passo a passo:

Tutorial: Criar aplicativo de chat com o Azure Functions no modo sem servidor

  • Last updated on