Delen via

Quickstart: Een chat-app bouwen met Azure Function in Socket.IO serverloze modus (preview)

In dit artikel leert u hoe u een chat-app bouwt met behulp van Web PubSub voor Socket.IO in de serverloze modus met Azure Functions. In de zelfstudie wordt u begeleid bij het beveiligen van uw app met verificatie op basis van identiteiten, terwijl u online werkt.

De projectbron maakt gebruik van Bicep om de infrastructuur in Azure te implementeren en Azure Functions Core Tools om de code te implementeren in de functie-app.

Vereisten

De voorbeeldcode halen

De voorbeeldcode zoeken: Socket.IO Serverless Sample (TS)

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

Infrastructuur implementeren

De chatvoorbeelden moeten verschillende services implementeren in Azure:

We gebruiken Bicep om de infrastructuur te implementeren. Het bestand zoekt in de ./infra map. Implementeer deze met de az-opdracht:

az deployment sub create -n "<deployment-name>" -l "<deployment-location>" --template-file ./infra/main.bicep --parameters environmentName="<env-name>" location="<location>"
  • <deployment-name>: De naam van de implementatie.
  • <deployment-location>: De locatie van de metagegevens van de implementatie. Let op: dit is niet de locatie waar resources naartoe worden geïmplementeerd.
  • <env-name>: De naam maakt deel uit van de naam van de resourcegroep en de resourcenaam.
  • <location>: De locatie van de resources.

Beoordeling van de infrastructuur

In de release van de infrastructuur implementeren we een Azure-functie-app in het verbruiksabonnement en het monitor- en opslagaccount dat vereist is voor de functie-app. We implementeren ook een Web PubSub voor Socket.IO-resource in de serverloze modus.

Voor het verificatiedoel op basis van identiteit implementeren we een door de gebruiker toegewezen beheerde identiteit, wijzen we deze toe aan zowel functie-app als Socket.IO resource en verlenen we deze met enkele machtigingen:

  • Eigenaar van opslagblobgegevens: Toegang tot opslag voor functie-app
  • Uitgeverrol van metrische gegevens bewaken: Toegangsmonitor voor functie-app
  • Rol van eigenaar van de Web PubSub-service: Access Web PubSub voor Socket.IO voor functie-app

Op basis van het configureren van uw Azure Functions-app voor het gebruik van Microsoft Entra-aanmelding maken we een service-principal. Om het gebruik van geheim voor de service-principal te voorkomen, gebruiken we federatieve identiteitsreferenties.

Voorbeeld implementeren in de functie-app

We hebben een bash-script voorbereid om de voorbeeldcode te implementeren in de functie-app:

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

De implementatiedetails bekijken

We moeten twee stappen uitvoeren om de voorbeeld-app te implementeren.

  • Code publiceren naar de functie-app (Azure Functions Core Tools gebruiken)

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

  • Configureer de Web PubSub voor Socket.IO om een hubinstelling toe te voegen waarmee aanvragen naar de functie-app kunnen worden verzonden. Op basis van de beperking van de webhookprovider van de functie-app moet u een extensiesleutel invullen door Functie. Meer informatie vindt u in Triggerbinding. En als we verificatie op basis van identiteiten gebruiken, moet u in de hub-instellingen de doelresource toewijzen. Dit is de clientId van de service-principal die eerder is gemaakt.

    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>"

Voorbeeld-app uitvoeren

Nadat de code is geïmplementeerd, gaat u naar de website om het voorbeeld uit te proberen:

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

Schermopname van de serverloze chat-app.

Volgende stappen

Vervolgens kunt u de zelfstudie volgen om de app stap voor stap te schrijven:

Zelfstudie: Een chat-app bouwen met Azure Function in de serverloze modus

  • Last updated on