Zelfstudie: Een serverloze chat-app maken met de Azure Web PubSub-service en Azure Static Web Apps

Artikel
06/02/2023

Azure Web PubSub helpt u bij het bouwen van webtoepassingen voor realtimeberichten met behulp van WebSocket. Azure Static Web Apps helpt u bij het automatisch bouwen en implementeren van web-apps met een volledige stack in Azure vanuit een codeopslagplaats. In deze zelfstudie leert u hoe u Web PubSub en Static Web Apps samen kunt gebruiken om een realtime chatruimtetoepassing te bouwen.

Meer specifiek leert u het volgende:

Een serverloze chat-app bouwen
Werken met invoer- en uitvoerbindingen van de functie Web PubSub
Werken met Static Web Apps

Overzicht

Diagram waarin wordt getoond hoe Azure Web PubSub werkt met Azure Static Web Apps.

GitHub of Azure-opslagplaatsen bieden broncodebeheer voor Static Web Apps. Azure controleert de opslagplaatsvertakking die u selecteert en telkens wanneer er een codewijziging in de bronopslagplaats plaatsvindt, wordt automatisch een nieuwe build van uw web-app uitgevoerd en geïmplementeerd in Azure. Continue levering wordt verzorgd door GitHub Actions en Azure Pipelines. Static Web Apps detecteert de nieuwe build en presenteert deze aan de eindpuntgebruiker.

De voorbeeldtoepassing voor een chatruimte die bij deze zelfstudie wordt geleverd, heeft de volgende werkstroom.

Wanneer een gebruiker zich aanmeldt bij de app, wordt de Azure Functions-API login geactiveerd om een clientverbindings-URL voor de Web PubSub-service te genereren.
Wanneer de client de verbindingsaanvraag met Web PubSub initialiseert, verzendt de service een systeem connect gebeurtenis die de Functions-API connect activeert om de gebruiker te verifiëren.
Wanneer een client een bericht verzendt naar de Azure Web PubSub-service, reageert de service met een gebruikersgebeurtenis message en wordt de Functions-API message geactiveerd om het bericht naar alle verbonden clients uit te zenden.
De Functions-API validate wordt regelmatig geactiveerd voor CloudEvents Abuse Protection wanneer de gebeurtenissen in Azure Web PubSub zijn geconfigureerd met de vooraf gedefinieerde parameter {event}, dat wil gezegd: https://$STATIC_WEB_APP/api/{event}.

Notitie

De Functions-API's connect en message worden geactiveerd wanneer de Azure Web PubSub-service is geconfigureerd met deze twee gebeurtenissen.

Vereisten

Een GitHub-account.
Een Azure-account . Als u geen Azure-abonnement hebt, maakt u een gratis Azure-account voordat u begint.
Azure CLI (versie 2.29.0 of hoger) of Azure Cloud Shell voor het beheren van Azure-resources.

Een Web PubSub-resource maken

Meld u aan bij de Azure CLI met behulp van de volgende opdracht.
```
az login
```

Maak een resourcegroep.

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

Maak een Web PubSub-resource.

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

Haal de toegangssleutel op en houd deze vast voor later gebruik.
```
az webpubsub key show \
  --name my-awps-swa \
  --resource-group my-awps-swa-group
```
```
AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>
```
Vervang de tijdelijke aanduiding <YOUR_AWPS_ACCESS_KEY> door de waarde voor primaryConnectionString uit de vorige stap.

Een opslagplaats maken

In dit artikel wordt gebruikgemaakt van een GitHub-opslagplaatssjabloon, zodat u eenvoudig aan de slag kunt gaan. De sjabloon bevat een starter-app die u implementeert in Azure Static Web Apps.

Ga naar https://github.com/Azure/awps-swa-sample/generate om een nieuwe opslagplaats te maken voor deze zelfstudie.
Selecteer uzelf als Eigenaar en geef uw opslagplaats de naam my-awps-swa-app.
U kunt een openbare of persoonlijke opslagplaats maken op basis van uw voorkeur. Beide werken voor de zelfstudie.
Selecteer Opslagplaats maken van sjabloon.

Statische web-app maken

Nu de opslagplaats is gemaakt, kunt u een statische web-app maken vanuit de Azure CLI.

Maak een variabele voor uw GitHub-gebruikersnaam.
```
GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>
```
Vervang de tijdelijke aanduiding <YOUR_GITHUB_USER_NAME> door uw GitHub-gebruikersnaam.
Maak een nieuwe statische web-app vanuit uw opslagplaats. Wanneer u deze opdracht uitvoert, start de CLI een interactieve GitHub-aanmelding. Volg het bericht om de autorisatie te voltooien.
```
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
```
Belangrijk

De URL die aan de --source parameter wordt doorgegeven, mag het .git achtervoegsel niet bevatten.
Ga naar https://github.com/login/device.
Voer de gebruikerscode in zoals weergegeven in het bericht van uw console.
Selecteer Doorgaan.
Selecteer Azure AutoriserenAppServiceCLI.

Configureer de instellingen van de statische web-app.

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

De website weergeven

Er zijn twee aspecten voor het implementeren van een statische app: de eerste maakt de onderliggende Azure-resources waaruit uw app bestaat. Het tweede aspect is een werkstroom voor GitHub-acties waarmee de toepassing wordt gebouwd en gepubliceerd.

Voordat u naar de nieuwe statische site kunt navigeren, moet de uitvoering van de implementatiebuild eerst zijn voltooid.

Ga terug naar het consolevenster en voer de volgende opdracht uit om de URL's weer te geven die aan uw app zijn gekoppeld.
```
az staticwebapp show \
  --name  my-awps-swa-app \
  --query "repositoryUrl"
```
De uitvoer van deze opdracht retourneert de URL naar uw GitHub-opslagplaats.
Kopieer de URL van de opslagplaats en plak deze in de browser.
Selecteer het tabblad Acties.

Op dit moment maakt Azure de resources ter ondersteuning van uw statische web-app. Wacht totdat het pictogram naast de actieve werkstroom verandert in een vinkje met een groene achtergrond ✅. Deze bewerking kan enkele minuten duren.

Zodra het pictogram geslaagd wordt weergegeven, is de werkstroom voltooid en kunt u terugkeren naar het consolevenster.
Voer de volgende opdracht uit om de URL van uw website op te vragen.
```
az staticwebapp show \
  --name my-awps-swa-app \
  --query "defaultHostname"
```
Houd de URL vast die u wilt instellen in de Web PubSub-gebeurtenis-handler.
```
STATIC_WEB_APP=<YOUR_STATIC_WEB_APP>
```

De Web PubSub-gebeurtenis-handler configureren

Je bent bijna klaar. De laatste stap is het configureren van Web PubSub, zodat clientaanvragen worden overgedragen naar uw functie-API's.

Voer de volgende opdracht uit om Web PubSub-service-gebeurtenissen te configureren. Functies onder de api map in uw opslagplaats worden toegewezen aan de gebeurtenis-handler Web PubSub.

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"

U bent nu klaar om te spelen met uw website <YOUR_STATIC_WEB_APP>. Kopieer deze naar de browser en selecteer Doorgaan om met uw vrienden te chatten.

Resources opschonen

Als u deze toepassing niet meer gaat gebruiken, kunt u de resourcegroep en de statische web-app verwijderen door de volgende opdracht uit te voeren.

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

Volgende stappen

In deze quickstart hebt u geleerd hoe u een serverloze chattoepassing ontwikkelt en implementeert. Nu kunt u beginnen met het bouwen van uw eigen toepassing.

Veel plezier met speelbare demo's

Azure Web PubSub-bindingen voor Azure Functions

Delen via