Freigeben über

Schnellstart: Erstellen einer Chat-App mit Azure Function im serverlosen Modus für SOCKET.IO (Vorschau)

In diesem Artikel erfahren Sie, wie Sie eine Chat-App mithilfe von Web PubSub für Socket.IO im serverlosen Modus mit Azure Functions erstellen. Das Tutorial führt Sie durch die Sicherung Ihrer App mit identitätsbasierter Authentifizierung, während Sie online arbeiten.

Die Projektquelle verwendet Bicep, um die Infrastruktur in Azure bereitzustellen, und Azure Functions Core Tools, um den Code in der Funktions-App bereitzustellen.

Voraussetzungen

Beispielcode herunterladen

Beispielcode: Serverloses Beispiel für Socket.IO (TS)

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

Bereitstellen der Infrastruktur

Die Chatbeispiele müssen mehrere Dienste in Azure bereitstellen:

Wir verwenden Bicep, um die Infrastruktur bereitzustellen. Die Datei befindet sich im ./infra-Ordner. Stellen Sie sie mit dem az-Befehl bereit:

az deployment sub create -n "<deployment-name>" -l "<deployment-location>" --template-file ./infra/main.bicep --parameters environmentName="<env-name>" location="<location>"
  • <deployment-name>: Der Name der Bereitstellung.
  • <deployment-location>: Der Speicherort der Bereitstellungsmetadaten. Beachten Sie, dass es sich nicht um den Speicherort handelt, an dem Ressourcen bereitgestellt werden.
  • <env-name>: Der Name ist Teil des Ressourcengruppennamens und des Ressourcennamens.
  • <location>: Der Speicherort der Ressourcen.

Überprüfung der Infrastruktur

In der Infrastrukturversion wird eine Azure Function-App im Verbrauchsplan und das Monitor- und Speicherkonto bereitgestellt, das von der Funktions-App benötigt wird. Außerdem wird eine Web PubSub für Socket.IO-Ressource im serverlosen Modus bereitgestellt.

Für den Zweck der identitätsbasierten Authentifizierung wird eine benutzerseitig zugewiesene verwaltete Identität bereitgestellt; weisen Sie sie sowohl der Funktions-App als auch der Socket.IO-Ressource zu, und erteilen Sie ihr einige Berechtigungen:

  • Rolle „Besitzer von Speicherblobdaten“: Zugriff auf Speicher für Funktions-App
  • Rolle „Herausgeber von Überwachungsmetriken“: Zugriff auf Überwachung für Funktions-App
  • Rolle „Web PubSub-Dienstbesitzer“: Zugriff auf Web PubSub für Socket.IO für Funktions-App

Gemäß dem Artikel Konfigurieren Ihrer App Service- oder Azure Functions-App zur Verwendung der Microsoft Entra-Anmeldung erstellen wir einen Dienstprinzipal. Um die Verwendung des Geheimnisses für den Dienstprinzipal zu vermeiden, nutzen wir Anmeldeinformationen für die Verbundidentität.

Bereitstellen eines Beispiels für die Funktions-App

Es wurde ein Bash-Skript vorbereitet, um den Beispielcode in der Funktions-App bereitzustellen:

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

Überprüfen der Bereitstellungsdetails

Es müssen zwei Schritte ausgeführt werden, um die Beispiel-App bereitzustellen.

  • Veröffentlichen von Code in der Funktions-App (Verwenden von Azure Functions Core Tools)

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

  • Konfigurieren Sie Web PubSub für Socket.IO, um eine Hubeinstellung hinzuzufügen, die eine Anforderung an die Funktions-App senden kann. Gemäß der Einschränkung des Webhookanbieters der Funktions-App müssen Sie einen Erweiterungsschlüssel abrufen, der von Function ausgefüllt wird. Weitere Details finden Sie unter Triggerbindung. Und während die identitätsbasierte Authentifizierung verwendet wird, müssen Sie in den Hubeinstellungen die Zielressource zuweisen, bei der es sich um die clientId des zuvor erstellten Dienstprinzipals handelt.

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

Ausführen einer Beispiel-App

Nachdem der Code bereitgestellt wurde, besuchen Sie die Website, um das Beispiel zu testen:

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

Screenshot der serverlosen Chat-App.

Nächste Schritte

Als Nächstes können Sie dem Tutorial folgen, um die App Schritt für Schritt zu schreiben:

Tutorial: Erstellen einer Chat-App mit Azure Functions im serverlosen Modus

  • Last updated on