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.
- 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. - 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 Functionsconnect
API-t a felhasználó hitelesítéséhez. - 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 Functionsmessage
API aktiválódik a közvetítéshez, az üzenetnek az összes csatlakoztatott ügyfélnek. - 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
Jelentkezzen be az Azure CLI-be a következő paranccsal.
az login
Hozzon létre egy erőforráscsoportot.
az group create \ --name my-awps-swa-group \ --location "eastus2"
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
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éreprimaryConnectionString
.
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.
- Lépjen az https://github.com/Azure/awps-swa-sample/generate oktatóanyaghoz tartozó új adattár létrehozásához.
- Válassza ki saját magát tulajdonosként , és nevezze el az adattárat my-awps-swa-app néven.
- A saját igényeinek megfelelően létrehozhat nyilvános vagy privát adattárat. Mindkét munka az oktatóanyag.
- 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.
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.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.Nyissa meg a következőt: https://github.com/login/device.
Adja meg a felhasználói kódot a konzol üzenetének megfelelően.
Válassza a Folytatás lehetőséget.
Válassza az AzureAppServiceCLI engedélyezése lehetőséget.
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.
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.
Másolja ki az adattár URL-címét , és illessze be a böngészőbe.
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.
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.
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.