Samouczek: tworzenie bezserwerowej aplikacji do czatów za pomocą usługi Azure Web PubSub i Azure Static Web Apps

Usługa Azure Web PubSub ułatwia tworzenie aplikacji internetowych do obsługi komunikatów w czasie rzeczywistym przy użyciu protokołu WebSocket. Azure Static Web Apps ułatwia automatyczne tworzenie i wdrażanie aplikacji internetowych pełnego stosu na platformie Azure z repozytorium kodu. Z tego samouczka dowiesz się, jak używać usługi Web PubSub i Static Web Apps razem do tworzenia aplikacji pokoju rozmów w czasie rzeczywistym.

W szczególności dowiesz się, jak wykonywać następujące czynności:

• Tworzenie bezserwerowej aplikacji do czatów
• Praca z powiązaniami wejściowymi i wyjściowymi funkcji Web PubSub
• Praca z Static Web Apps

Omówienie

Usługa GitHub lub Azure Repos zapewniają kontrolę źródła dla Static Web Apps. Platforma Azure monitoruje wybraną gałąź repozytorium i za każdym razem, gdy następuje zmiana kodu w repozytorium źródłowym, nowa kompilacja aplikacji internetowej zostanie automatycznie uruchomiona i wdrożona na platformie Azure. Ciągłe dostarczanie jest dostarczane przez GitHub Actions i usługę Azure Pipelines. Static Web Apps wykrywa nową kompilację i prezentuje ją użytkownikowi punktu końcowego.

Przykładowa aplikacja pokoju rozmów udostępniona w tym samouczku ma następujący przepływ pracy.

1. Gdy użytkownik loguje się do aplikacji, interfejs API Azure Functions login jest wyzwalany w celu wygenerowania adresu URL połączenia klienta usługi Web PubSub.
2. Gdy klient inicjuje żądanie połączenia do usługi Web PubSub, usługa wysyła zdarzenie systemowe connect , które wyzwala interfejs API usługi Functions connect w celu uwierzytelnienia użytkownika.
3. Gdy klient wysyła komunikat do usługi Azure Web PubSub, usługa odpowiada za pomocą zdarzenia użytkownika message , a interfejs API usługi Functions message jest wyzwalany w celu emisji, komunikat do wszystkich połączonych klientów.
4. Interfejs API usługi Functions validate jest wyzwalany okresowo dla usługi CloudEvents Abuse Protection , gdy zdarzenia w usłudze Azure Web PubSub są konfigurowane przy użyciu wstępnie zdefiniowanego parametru {event}, czyli https://$STATIC_WEB_APP/api/{event}.

Uwaga

Interfejsy connect API usługi Functions i message są wyzwalane, gdy usługa Azure Web PubSub jest skonfigurowana przy użyciu tych dwóch zdarzeń.

Wymagania wstępne

• Konto usługi GitHub.
• Konto platformy Azure . Jeśli nie masz subskrypcji platformy Azure, przed rozpoczęciem utwórz bezpłatne konto platformy Azure .
• Interfejs wiersza polecenia platformy Azure (wersja 2.29.0 lub nowsza) lub usługa Azure Cloud Shell do zarządzania zasobami platformy Azure.

Tworzenie zasobu Web PubSub

1. Zaloguj się do interfejsu wiersza polecenia platformy Azure przy użyciu następującego polecenia.

   az login
   

2. Utwórz grupę zasobów.

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

3. Utwórz zasób Web PubSub.

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

4. Pobierz i przytrzymaj klucz dostępu do późniejszego użycia.

   az webpubsub key show \
     --name my-awps-swa \
     --resource-group my-awps-swa-group
   

   AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>
   

   Zastąp symbol zastępczy <YOUR_AWPS_ACCESS_KEY> wartością primaryConnectionString z poprzedniego kroku.

Tworzenie repozytorium

W tym artykule użyto repozytorium szablonów usługi GitHub, aby ułatwić rozpoczęcie pracy. Szablon zawiera początkową aplikację wdrażaną w Azure Static Web Apps.

1. Przejdź do witryny , https://github.com/Azure/awps-swa-sample/generate aby utworzyć nowe repozytorium na potrzeby tego samouczka.
2. Wybierz siebie jako właściciel i nadaj repozytorium nazwę my-awps-swa-app.
3. Repozytorium publiczne lub prywatne można utworzyć zgodnie z preferencjami. Oba te elementy działają w ramach tego samouczka.
4. Wybierz pozycję Utwórz repozytorium na podstawie szablonu.

Tworzenie statycznej aplikacji internetowej

Po utworzeniu repozytorium możesz utworzyć statyczną aplikację internetową za pomocą interfejsu wiersza polecenia platformy Azure.

1. Utwórz zmienną do przechowywania nazwy użytkownika usługi GitHub.

   GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>
   

   Zastąp symbol zastępczy <YOUR_GITHUB_USER_NAME> nazwą użytkownika usługi GitHub.

2. Utwórz nową statyczną aplikację internetową z repozytorium. Po uruchomieniu tego polecenia interfejs wiersza polecenia uruchamia interakcyjne logowanie w usłudze GitHub. Postępuj zgodnie z komunikatem, aby ukończyć autoryzację.

   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
   

   Ważne

   Adres URL przekazany do parametru --source nie może zawierać sufiksu .git .

3. Przejdź do witryny https://github.com/login/device.

4. Wprowadź kod użytkownika wyświetlany w komunikacie konsoli.

5. Wybierz opcję Kontynuuj.

6. Wybierz pozycję Autoryzuj usługę AzureAppServiceCLI.

7. Skonfiguruj ustawienia statycznej aplikacji internetowej.

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

Wyświetl witrynę internetową

Istnieją dwa aspekty wdrażania aplikacji statycznej: pierwszy tworzy bazowe zasoby platformy Azure tworzące aplikację. Drugi to przepływ pracy funkcji GitHub Actions, który kompiluje i publikuje aplikację.

Zanim będzie można przejść do nowej witryny statycznej, kompilacja wdrożenia musi najpierw zakończyć działanie.

1. Wróć do okna konsoli i uruchom następujące polecenie, aby wyświetlić listę adresów URL skojarzonych z aplikacją.

   az staticwebapp show \
     --name  my-awps-swa-app \
     --query "repositoryUrl"
   

   Dane wyjściowe tego polecenia zwracają adres URL do repozytorium GitHub.

2. Skopiuj adres URL repozytorium i wklej go w przeglądarce.

3. Kliknij kartę Actions (Akcje).

   W tym momencie platforma Azure tworzy zasoby do obsługi statycznej aplikacji internetowej. Poczekaj, aż ikona obok uruchomionego przepływu pracy zmieni się w znacznik wyboru z zielonym tłem ✅. Wykonanie tej operacji może potrwać kilka minut.

   Po pojawieniu się ikony powodzenia przepływ pracy zostanie ukończony i możesz wrócić do okna konsoli.

4. Uruchom następujące polecenie, aby wykonać zapytanie dotyczące adresu URL witryny internetowej.

   az staticwebapp show \
     --name my-awps-swa-app \
     --query "defaultHostname"
   

   Przytrzymaj adres URL do ustawienia w programie obsługi zdarzeń Web PubSub.

   STATIC_WEB_APP=<YOUR_STATIC_WEB_APP>
   

Konfigurowanie programu obsługi zdarzeń Web PubSub

Jesteś bardzo blisko, aby ukończyć. Ostatnim krokiem jest skonfigurowanie usługi Web PubSub w celu przesłania żądań klientów do interfejsów API funkcji.

1. Uruchom następujące polecenie, aby skonfigurować zdarzenia usługi Web PubSub. Mapuje funkcje w folderze api w repozytorium na program obsługi zdarzeń 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"
   

Teraz możesz zacząć korzystać z witryny internetowej <YOUR_STATIC_WEB_APP>. Skopiuj go do przeglądarki i wybierz pozycję Kontynuuj , aby rozpocząć rozmowę ze znajomymi.

Czyszczenie zasobów

Jeśli nie zamierzasz nadal korzystać z tej aplikacji, możesz usunąć grupę zasobów i statyczną aplikację internetową, uruchamiając następujące polecenie.

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

Następne kroki

W tym przewodniku Szybki start przedstawiono sposób tworzenia i wdrażania bezserwerowej aplikacji do czatów. Teraz możesz rozpocząć tworzenie własnej aplikacji.

Zabawa z playable pokazy

Powiązania usługi Azure Web PubSub dla Azure Functions