Partilhar via

Guia de início rápido: criar aplicativo de chat com o Azure Function no modo sem servidor Socket.IO (visualização)

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 irá guiá-lo através da proteção do seu aplicativo com autenticação baseada em identidade, enquanto trabalha online.

A fonte do projeto usa o Bicep para implantar a infraestrutura no Azure e as Ferramentas Principais do Azure Functions para implantar o código no Aplicativo de Função.

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

Implementar infraestrutura

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

Usamos o Bicep para implantar a infraestrutura. O arquivo localiza na ./infra pasta. 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 são implantados.
  • <env-name>: O nome é uma parte do nome do grupo de recursos e do nome do recurso.
  • <location>: A localização dos recursos.

Revisão da infraestrutura

Na versão de infraestrutura, implantamos um Aplicativo de Função do Azure no plano de consumo e a Conta de Monitor e Armazenamento exigida pelo Aplicativo de Função. Também implantamos um Web PubSub para Socket.IO recurso no modo sem servidor.

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

  • Função de proprietário de dados de Blob de armazenamento: Acessar o armazenamento para o aplicativo de função
  • Função de Editor de Métricas de Monitoramento: Monitor de acesso para o Aplicativo de Função
  • Função de proprietário do serviço Web PubSub: Access Web PubSub for Socket.IO for Function App

De acordo com Configurar seu aplicativo 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 federada.

Implantar exemplo no aplicativo de função

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

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

Revise os detalhes da implantação

Precisamos executar duas etapas para implantar o aplicativo de exemplo.

  • Publicar código no Aplicativo de Função (Usar as Ferramentas Principais do Azure Functions)

    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 para o aplicativo de função. De acordo com a limitação do provedor Webhook do Function App, você precisa obter uma chave de extensão preenchida pelo Function. Obtenha mais detalhes em Trigger Binding. E como usamos a autenticação baseada em identidade, nas configurações do hub, você precisa atribuir o recurso de destino, que é o clientId da entidade de serviço criada anteriormente.

    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 aplicativo de exemplo

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

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

Captura de ecrã da aplicação de chat sem servidor.

Próximos passos

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

Tutorial: Criar aplicativo de chat com a Função do Azure no Modo Sem Servidor

  • Last updated on