Oktatóanyag: Kiszolgáló nélküli csevegőalkalmazás létrehozása az Azure Web PubSub szolgáltatással és Azure Static Web Apps

Az Azure Web PubSub segítségével valós idejű üzenetkezelési webalkalmazásokat hozhat létre a WebSocket használatával. Azure Static Web Apps segítségével automatikusan hozhat létre és helyezhet üzembe teljes veremű webalkalmazásokat az Azure-ban egy kódtárból. Ebből az oktatóanyagból megtudhatja, hogyan hozhat létre egy valós idejű csevegőszoba-alkalmazást a Web PubSub és a Static Web Apps együttes használatával.

Pontosabban a következőket sajátíthatja el:

• Kiszolgáló nélküli csevegőalkalmazás létrehozása
• A Web PubSub függvény bemeneti és kimeneti kötéseinek használata
• A Static Web Apps

Áttekintés

A GitHub vagy az Azure-adattárak biztosítják a Static Web Apps forráskezelését. Az Azure figyeli a kiválasztott adattárágat, és minden alkalommal, amikor kódmódosítás történik a forrásadattárban, a rendszer automatikusan futtatja és üzembe helyezi a webalkalmazás új buildjét az Azure-ban. A folyamatos teljesítést a GitHub Actions és az Azure Pipelines biztosítja. Static Web Apps észleli az új buildet, és bemutatja a végpont felhasználójának.

Az oktatóanyaghoz mellékelt csevegőszoba-mintaalkalmazás a következő munkafolyamattal rendelkezik.

1. Amikor egy felhasználó bejelentkezik az alkalmazásba, a Azure Functions login API aktiválódik egy Web PubSub szolgáltatás ügyfélkapcsolati URL-címének létrehozásához.
2. Amikor az ügyfél inicializálja a kapcsolati kérelmet a Web PubSub felé, a szolgáltatás egy rendszereseményt connect küld, amely elindítja a Functions connect API-t a felhasználó hitelesítéséhez.
3. Amikor egy ügyfél üzenetet küld az Azure Web PubSub szolgáltatásnak, a szolgáltatás egy felhasználói message eseménysel válaszol, és a Functions message API aktiválódik a közvetítéshez, az üzenetnek az összes csatlakoztatott ügyfélnek.
4. A Functions validate API rendszeres időközönként aktiválódik a CloudEvents Abuse Protection esetében, ha az Azure Web PubSub eseményei előre definiált paraméterrel {event}vannak konfigurálva, azaz https://$STATIC_WEB_APP/api/{event}.

Megjegyzés

A Functions API-k connect , és message akkor aktiválódnak, ha az Azure Web PubSub szolgáltatás ezzel a két eseménysel van konfigurálva.

Előfeltételek

• Egy GitHub-fiók.
• Egy Azure-fiók . Ha nem rendelkezik Azure-előfizetéssel, a kezdés előtt hozzon létre egy ingyenes Azure-fiókot .
• Azure CLI (2.29.0-s vagy újabb verzió) vagy Azure Cloud Shell az Azure-erőforrások kezeléséhez.

Web PubSub-erőforrás létrehozása

1. Jelentkezzen be az Azure CLI-be a következő paranccsal.

   az login
   

2. Hozzon létre egy erőforráscsoportot.

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

3. Hozzon létre egy Web PubSub-erőforrást.

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

4. Kérje le és tartsa lenyomva a hozzáférési kulcsot későbbi használatra.

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

   AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>
   

   Cserélje le a helyőrzőt <YOUR_AWPS_ACCESS_KEY> az előző lépés értékére primaryConnectionString .

Adattár létrehozása

Ez a cikk egy GitHub-sablontárat használ, hogy megkönnyítse az első lépéseket. A sablon tartalmaz egy kezdőalkalmazást, amelyet Azure Static Web Apps üzembe helyez.

1. Lépjen az https://github.com/Azure/awps-swa-sample/generate oktatóanyaghoz tartozó új adattár létrehozásához.
2. Válassza ki saját magát tulajdonosként , és nevezze el az adattárat my-awps-swa-app néven.
3. A saját igényeinek megfelelően létrehozhat nyilvános vagy privát adattárat. Mindkét munka az oktatóanyag.
4. Válassza az Adattár létrehozása sablonból lehetőséget.

Statikus webalkalmazás létrehozása

Most, hogy létrehozta az adattárat, létrehozhat egy statikus webalkalmazást az Azure CLI-ből.

1. Hozzon létre egy változót a GitHub-felhasználónév tárolásához.

   GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>
   

   Cserélje le a helyőrzőt <YOUR_GITHUB_USER_NAME> a GitHub-felhasználónévre.

2. Hozzon létre egy új statikus webalkalmazást az adattárból. A parancs futtatásakor a parancssori felület elindít egy interaktív GitHub-bejelentkezést. Kövesse az üzenetet az engedélyezés befejezéséhez.

   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
   

   Fontos

   A paraméternek --source átadott URL-cím nem tartalmazhatja az .git utótagot.

3. Nyissa meg a következőt: https://github.com/login/device.

4. Adja meg a felhasználói kódot a konzol üzenetének megfelelően.

5. Válassza a Folytatás lehetőséget.

6. Válassza az AzureAppServiceCLI engedélyezése lehetőséget.

7. Konfigurálja a statikus webalkalmazás beállításait.

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

A webhely megtekintése

A statikus alkalmazások üzembe helyezésének két szempontja van: Az első az alkalmazást alkotó mögöttes Azure-erőforrásokat hozza létre. A második egy GitHub Actions-munkafolyamat, amely létrehozza és közzéteszi az alkalmazást.

Mielőtt az új statikus helyre navigálna, az üzembe helyezési buildnek először futnia kell.

1. Térjen vissza a konzolablakba, és futtassa a következő parancsot az alkalmazáshoz társított URL-címek listázásához.

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

   A parancs kimenete visszaadja a GitHub-adattár URL-címét.

2. Másolja ki az adattár URL-címét , és illessze be a böngészőbe.

3. Válassza a Műveletek lapot.

   Ezen a ponton az Azure létrehozza a statikus webalkalmazást támogató erőforrásokat. Várja meg, amíg a futó munkafolyamat melletti ikon zöld háttérrel ✅rendelkező pipává változik. A művelet végrehajtása eltarthat néhány percig.

   A sikeresség ikon megjelenése után a munkafolyamat befejeződött, és visszatérhet a konzolablakba.

4. Futtassa a következő parancsot a webhely URL-címének lekérdezéséhez.

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

   Tartsa lenyomva a Web PubSub eseménykezelőben beállítani kívánt URL-címet.

   STATIC_WEB_APP=<YOUR_STATIC_WEB_APP>
   

A Web PubSub eseménykezelő konfigurálása

Nagyon közel áll a befejezéshez. Az utolsó lépés a Web PubSub konfigurálása, hogy az ügyfélkérések átkerüljenek a függvény API-kba.

1. Futtassa a következő parancsot a Web PubSub szolgáltatásesemények konfigurálásához. Az adattár mappája alatti api függvényeket a Web PubSub eseménykezelőre képezi le.

   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"
   

Most már készen áll arra, hogy játsszon a webhelyével <YOUR_STATIC_WEB_APP>. Másolja a böngészőbe, és válassza a Folytatás lehetőséget a csevegés megkezdéséhez a barátaival.

Az erőforrások eltávolítása

Ha nem folytatja az alkalmazás használatát, az alábbi parancs futtatásával törölheti az erőforráscsoportot és a statikus webalkalmazást.

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

Következő lépések

Ebben a rövid útmutatóban megtanulta, hogyan fejleszthet és helyezhet üzembe kiszolgáló nélküli csevegőalkalmazásokat. Most már elkezdheti saját alkalmazásának elkészítését.

Szórakozzon a játszható demókkal

Azure Web PubSub-kötések Azure Functions