Självstudie: Skapa en serverlös chattapp med Tjänsten Azure Web PubSub och Azure Static Web Apps

Artikel
06/02/2023

Azure Web PubSub hjälper dig att skapa webbprogram för meddelanden i realtid med hjälp av WebSocket. Azure Static Web Apps hjälper dig att skapa och distribuera webbappar med full stack automatiskt till Azure från en kodlagringsplats. I den här självstudien lär du dig hur du använder Web PubSub och Static Web Apps tillsammans för att skapa ett chattrumsprogram i realtid.

Mer specifikt lär du dig att:

Skapa en serverlös chattapp
Arbeta med indata- och utdatabindningar för Web PubSub-funktionen
Arbeta med Static Web Apps

Översikt

Diagram som visar hur Azure Web PubSub fungerar med Azure Static Web Apps.

GitHub eller Azure Repos ger källkontroll för Static Web Apps. Azure övervakar den lagringsplatsgren som du väljer, och varje gång det sker en kodändring av källlagringsplatsen körs och distribueras en ny version av webbappen automatiskt till Azure. Kontinuerlig leverans tillhandahålls av GitHub Actions och Azure Pipelines. Static Web Apps identifierar den nya versionen och visar den för slutpunktsanvändaren.

Exempelprogrammet för chattrum som medföljer den här självstudien har följande arbetsflöde.

När en användare loggar in på appen utlöses Azure Functions-APIlogin:et för att generera en url för klientanslutning för Web PubSub-tjänsten.
När klienten initierar anslutningsbegäran till Web PubSub skickar tjänsten en systemhändelse connect som utlöser Functions-API connect :et för att autentisera användaren.
När en klient skickar ett meddelande till Azure Web PubSub-tjänsten svarar tjänsten med en användarhändelse message och Functions-API message :et utlöses för sändning, meddelandet till alla anslutna klienter.
Functions-API validate :et utlöses regelbundet för CloudEvents Abuse Protection när händelserna i Azure Web PubSub konfigureras med den fördefinierade parametern {event}, dvs. https://$STATIC_WEB_APP/api/{event}.

Anteckning

Functions-API:erna connect och message utlöses när Azure Web PubSub-tjänsten konfigureras med dessa två händelser.

Förutsättningar

Ett GitHub-konto.
Ett Azure-konto . Om du inte har en Azure-prenumeration skapar du ett kostnadsfritt Azure-konto innan du börjar.
Azure CLI (version 2.29.0 eller senare) eller Azure Cloud Shell för att hantera Azure-resurser.

Skapa en Web PubSub-resurs

Logga in på Azure CLI med hjälp av följande kommando.
```
az login
```

Skapa en resursgrupp.

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

Skapa en Web PubSub-resurs.

az webpubsub create \
  --name my-awps-swa \
  --resource-group my-awps-swa-group \
  --location "eastus2" \
  --sku Free_F1

Hämta och håll åtkomstnyckeln för senare användning.
```
az webpubsub key show \
  --name my-awps-swa \
  --resource-group my-awps-swa-group
```
```
AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>
```
Ersätt platshållaren <YOUR_AWPS_ACCESS_KEY> med värdet för primaryConnectionString från föregående steg.

Klona en lagringsplats

Den här artikeln använder en GitHub-malllagringsplats för att göra det enkelt för dig att komma igång. Mallen innehåller en startapp som du distribuerar till Azure Static Web Apps.

Gå till för att https://github.com/Azure/awps-swa-sample/generate skapa en ny lagringsplats för den här självstudien.
Välj dig själv som ägare och ge lagringsplatsen namnet my-awps-swa-app.
Du kan skapa en offentlig eller privat lagringsplats enligt dina önskemål. Båda fungerar för självstudien.
Välj Create repository from template (Skapa lagringsplats från mall).

Skapa en statisk webbapp

Nu när lagringsplatsen har skapats kan du skapa en statisk webbapp från Azure CLI.

Skapa en variabel som ska innehålla ditt GitHub-användarnamn.
```
GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>
```
Ersätt platshållaren <YOUR_GITHUB_USER_NAME> med ditt GitHub-användarnamn.

Skapa en ny statisk webbapp från lagringsplatsen. När du kör det här kommandot startar CLI en interaktiv GitHub-inloggning. Följ meddelandet för att slutföra auktoriseringen.

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

Viktigt

Url:en som skickas till parametern --source får inte innehålla suffixet .git .

Gå till https://github.com/login/device.
Ange användarkoden som visas i konsolens meddelande.
Välj Fortsätt.
Välj Auktorisera AzureAppServiceCLI.

Konfigurera inställningarna för den statiska webbappen.

az staticwebapp appsettings set \
  -n my-awps-swa-app \
  --setting-names WebPubSubConnectionString=$AWPS_ACCESS_KEY WebPubSubHub=sample_swa

Visa webbplatsen

Det finns två aspekter när du distribuerar en statisk app: Den första skapar de underliggande Azure-resurser som utgör din app. Den andra är ett GitHub Actions-arbetsflöde som bygger och publicerar din app.

Innan du kan navigera till den nya statiska platsen måste distributionsversionen först slutföras.

Gå tillbaka till konsolfönstret och kör följande kommando för att visa url:er som är associerade med din app.
```
az staticwebapp show \
  --name  my-awps-swa-app \
  --query "repositoryUrl"
```
Utdata från det här kommandot returnerar URL:en till din GitHub-lagringsplats.
Kopiera lagringsplatsens URL och klistra in den i webbläsaren.
Välj fliken Åtgärder.

Nu skapar Azure resurser för att stödja din statiska webbapp. Vänta tills ikonen bredvid arbetsflödet som körs blir en bockmarkering med grön bakgrund ✅. Den här åtgärden kan ta några minuter att slutföra.

När framgångsikonen visas är arbetsflödet klart och du kan återgå till konsolfönstret.
Kör följande kommando för att fråga efter webbplatsens URL.
```
az staticwebapp show \
  --name my-awps-swa-app \
  --query "defaultHostname"
```
Håll url:en som ska anges i Web PubSub-händelsehanteraren.
```
STATIC_WEB_APP=<YOUR_STATIC_WEB_APP>
```

Konfigurera Web PubSub-händelsehanteraren

Du är nära att slutföras. Det sista steget är att konfigurera Web PubSub så att klientbegäranden överförs till dina funktions-API:er.

Kör följande kommando för att konfigurera Web PubSub-tjänsthändelser. Den mappar funktioner under api mappen på lagringsplatsen till Web PubSub-händelsehanteraren.

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"

Nu är du redo att spela med din webbplats <YOUR_STATIC_WEB_APP>. Kopiera den till webbläsaren och välj Fortsätt för att börja chatta med dina vänner.

Rensa resurser

Om du inte kommer att fortsätta att använda det här programmet kan du ta bort resursgruppen och den statiska webbappen genom att köra följande kommando.

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

Nästa steg

I den här snabbstarten har du lärt dig hur du utvecklar och distribuerar ett serverlöst chattprogram. Nu kan du börja skapa ett eget program.

Ha kul med spelbara demonstrationer

Azure Web PubSub-bindningar för Azure Functions

Dela via