Oktatóanyag: Kiszolgáló nélküli valós idejű csevegőalkalmazás létrehozása az Azure Functions és az Azure Web PubSub szolgáltatással
Az Azure Web PubSub szolgáltatással valós idejű üzenetküldési webalkalmazásokat hozhat létre WebSockets és a közzétételi-feliratkozási minta használatával. Az Azure Functions egy kiszolgáló nélküli platform, amellyel infrastruktúra kezelése nélkül futtathat kódokat. Ebben az oktatóanyagban megtudhatja, hogyan hozhat létre kiszolgáló nélküli alkalmazást az Azure Web PubSub szolgáltatással és az Azure Functions szolgáltatással valós idejű üzenetkezeléssel és közzétételi feliratkozási mintával.
Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:
- Kiszolgáló nélküli valós idejű csevegőalkalmazás létrehozása
- A Web PubSub függvény kötéseinek és kimeneti kötéseinek használata
- A függvény üzembe helyezése az Azure-függvényalkalmazásban
- Az Azure-hitelesítés konfigurálása
- Web PubSub Event Handler konfigurálása események és üzenetek alkalmazáshoz való átirányításához
Fontos
A cikkben szereplő nyers kapcsolati sztring csak bemutató célokra jelennek meg.
A kapcsolati sztring tartalmazzák azokat az engedélyezési információkat, amelyekre az alkalmazásnak szüksége van az Azure Web PubSub szolgáltatás eléréséhez. A kapcsolati sztring belüli hozzáférési kulcs hasonló a szolgáltatás gyökérjelszójához. Éles környezetben mindig védje a hozzáférési kulcsokat. Az Azure Key Vault használatával biztonságosan kezelheti és elforgathatja a kulcsokat, és biztonságossá teheti a kapcsolatot.WebPubSubServiceClient
Kerülje a hozzáférési kulcsok más felhasználók számára való terjesztését, a szigorú kódolást, illetve a mások számára hozzáférhető egyszerű szövegek mentését. Ha úgy véli, hogy illetéktelenek lettek, forgassa el a kulcsokat.
Előfeltételek
Kódszerkesztő, például Visual Studio Code
Node.js, 18.x vagy újabb verzió.
Feljegyzés
A Node.js támogatott verzióival kapcsolatos további információkért tekintse meg az Azure Functions futtatókörnyezeti verzióinak dokumentációját.
Az Azure Functions Core Tools (v4 vagy magasabb előnyben részesített) az Azure-függvényalkalmazások helyi futtatásához és az Azure-ban való üzembe helyezéséhez.
Ha nem rendelkezik Azure-előfizetéssel, első lépésként hozzon létre egy ingyenes Azure-fiókot.
Bejelentkezés az Azure-ba
Jelentkezzen be Azure-fiókjával az Azure Portalba a https://portal.azure.com/ webhelyen.
Azure Web PubSub szolgáltatáspéldány létrehozása
Az alkalmazás egy Web PubSub szolgáltatáspéldányhoz fog csatlakozni az Azure-ban.
Kattintson az Azure Portal bal felső sarkában található Új gombra. Az Új képernyőn írja be a Web PubSub kifejezést a keresőmezőbe, és nyomja le az Enter billentyűt. (Az Azure Web PubSubban is kereshet a
Web
kategóriából.)Válassza a Web PubSub lehetőséget a keresési eredmények közül, majd válassza a Létrehozás lehetőséget.
Adja meg az alábbi beállításokat.
Beállítás Ajánlott érték Leírás Erőforrás neve Globálisan egyedi név Az új Web PubSub szolgáltatáspéldányt azonosító globálisan egyedi név. Az érvényes karakterek a következők a-z
: ,A-Z
0-9
és-
.Előfizetés Az Ön előfizetése Az Azure-előfizetés, amely alatt ez az új Web PubSub szolgáltatáspéldány létrejön. Erőforráscsoport myResourceGroup Annak az új erőforráscsoportnak a neve, amelyben létre kívánja hozni a Web PubSub szolgáltatáspéldányt. Helyen USA nyugati régiója Egy Önhöz közeli régiót válasszon. Tarifacsomag Ingyenes Először ingyenesen kipróbálhatja az Azure Web PubSub szolgáltatást. További információ az Azure Web PubSub szolgáltatás tarifacsomagjairól Egységek száma - Az egységszám azt határozza meg, hogy a Web PubSub szolgáltatáspéldány hány kapcsolatot tud elfogadni. Minden egység legfeljebb 1000 egyidejű kapcsolatot támogat. Ez a beállítás csak a Standard szinten konfigurálható. Válassza a Létrehozás lehetőséget a Web PubSub szolgáltatáspéldány üzembe helyezésének megkezdéséhez.
A függvények létrehozása
Győződjön meg arról, hogy telepítve vannak az Azure Functions Core Tools . Ezután hozzon létre egy üres könyvtárat a projekthez. Futtassa a parancsot ebben a munkakönyvtárban.
func init --worker-runtime javascript --model V4
Telepítse a(z)
Microsoft.Azure.WebJobs.Extensions.WebPubSub
rendszert.A Web PubSub támogatásának beszerzéséhez erősítse meg és frissítse
host.json
az extensionBundle bővítményt a 4.* vagy újabb verzióra.{ "extensionBundle": { "id": "Microsoft.Azure.Functions.ExtensionBundle", "version": "[4.*, 5.0.0)" } }
index
Statikus weblap olvasására és üzemeltetésére szolgáló függvény létrehozása az ügyfelek számára.func new -n index -t HttpTrigger
- Frissítse
src/functions/index.js
és másolja a következő kódokat.const { app } = require('@azure/functions'); const { readFile } = require('fs/promises'); app.http('index', { methods: ['GET', 'POST'], authLevel: 'anonymous', handler: async (context) => { const content = await readFile('index.html', 'utf8', (err, data) => { if (err) { context.err(err) return } }); return { status: 200, headers: { 'Content-Type': 'text/html' }, body: content, }; } });
- Frissítse
Hozzon létre egy függvényt
negotiate
, amely segít az ügyfeleknek a szolgáltatáskapcsolat URL-címének lekérésében a hozzáférési jogkivonattal.func new -n negotiate -t HttpTrigger
Feljegyzés
Ebben a példában a Microsoft Entra ID felhasználói identitás fejlécét
x-ms-client-principal-name
használjuk a lekéréshezuserId
. És ez nem fog működni egy helyi függvényben. Üressé teheti, vagy más módon is beszerezheti vagy létrehozhatjauserId
, amikor helyi környezetben játszik. Adjon meg például egy felhasználónevet az ügyfélnek, és adja át a lekérdezésben, például?user={$username}
amikor a hívási függvény lekérinegotiate
a szolgáltatáskapcsolat URL-címét. És anegotiate
függvényben állítsa beuserId
az értéket{query.user}
.- Frissítse
src/functions/negotiate
és másolja a következő kódokat.const { app, input } = require('@azure/functions'); const connection = input.generic({ type: 'webPubSubConnection', name: 'connection', userId: '{headers.x-ms-client-principal-name}', hub: 'simplechat' }); app.http('negotiate', { methods: ['GET', 'POST'], authLevel: 'anonymous', extraInputs: [connection], handler: async (request, context) => { return { body: JSON.stringify(context.extraInputs.get('connection')) }; }, });
- Frissítse
Hozzon létre egy függvényt
message
az ügyfélüzenetek szolgáltatáson keresztüli közvetítéséhez.func new -n message -t HttpTrigger
- Frissítse
src/functions/message.js
és másolja a következő kódokat.const { app, output, trigger } = require('@azure/functions'); const wpsMsg = output.generic({ type: 'webPubSub', name: 'actions', hub: 'simplechat', }); const wpsTrigger = trigger.generic({ type: 'webPubSubTrigger', name: 'request', hub: 'simplechat', eventName: 'message', eventType: 'user' }); app.generic('message', { trigger: wpsTrigger, extraOutputs: [wpsMsg], handler: async (request, context) => { context.extraOutputs.set(wpsMsg, [{ "actionName": "sendToAll", "data": `[${context.triggerMetadata.connectionContext.userId}] ${request.data}`, "dataType": request.dataType }]); return { data: "[SYSTEM] ack.", dataType: "text", }; } });
- Frissítse
Adja hozzá az ügyfél egyetlen oldalát
index.html
a projekt gyökérmappájába, és másolja a tartalmat.<html> <body> <h1>Azure Web PubSub Serverless Chat App</h1> <div id="login"></div> <p></p> <input id="message" placeholder="Type to chat..." /> <div id="messages"></div> <script> (async function () { let authenticated = window.location.href.includes( "?authenticated=true" ); if (!authenticated) { // auth let login = document.querySelector("#login"); let link = document.createElement("a"); link.href = `${window.location.origin}/.auth/login/aad?post_login_redirect_url=/api/index?authenticated=true`; link.text = "login"; login.appendChild(link); } else { // negotiate let messages = document.querySelector("#messages"); let res = await fetch(`${window.location.origin}/api/negotiate`, { credentials: "include", }); let url = await res.json(); // connect let ws = new WebSocket(url.url); ws.onopen = () => console.log("connected"); ws.onmessage = (event) => { let m = document.createElement("p"); m.innerText = event.data; messages.appendChild(m); }; let message = document.querySelector("#message"); message.addEventListener("keypress", (e) => { if (e.charCode !== 13) return; ws.send(message.value); message.value = ""; }); } })(); </script> </body> </html>
Az Azure-függvényalkalmazás létrehozása és üzembe helyezése
Mielőtt üzembe helyezheti a függvénykódot az Azure-ban, három erőforrást kell létrehoznia:
- Egy erőforráscsoport, amely a kapcsolódó erőforrások logikai tárolója.
- Egy tárfiók, amely az állapot és a függvényekkel kapcsolatos egyéb információk fenntartására szolgál.
- Egy függvényalkalmazás, amely a függvénykód végrehajtásához biztosítja a környezetet. A függvényalkalmazások leképezik a helyi függvényprojektet, és lehetővé teszi a függvények logikai egységként való csoportosítását az erőforrások egyszerűbb kezelése, üzembe helyezése és megosztása érdekében.
Ezeket az elemeket az alábbi parancsokkal hozhatja létre.
Ha még nem tette meg, jelentkezzen be az Azure-ba:
az login
Hozzon létre egy erőforráscsoportot, vagy kihagyhatja az Azure Web PubSub szolgáltatás újbóli használatával:
az group create -n WebPubSubFunction -l <REGION>
Hozzon létre egy általános célú tárfiókot az erőforráscsoportban és a régióban:
az storage account create -n <STORAGE_NAME> -l <REGION> -g WebPubSubFunction
A függvényalkalmazás létrehozása az Azure-ban:
az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime node --runtime-version 18 --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>
Feljegyzés
Tekintse meg az Azure Functions futtatókörnyezeti verzióinak dokumentációját , és állítsa be
--runtime-version
a paramétert támogatott értékre.A függvényprojekt üzembe helyezése az Azure-ban:
Miután sikeresen létrehozta a függvényalkalmazást az Azure-ban, készen áll a helyi függvényprojekt üzembe helyezésére a func azure functionapp publish paranccsal.
func azure functionapp publish <FUNCIONAPP_NAME>
Konfigurálja a
WebPubSubConnectionString
függvényalkalmazást:A cikkben szereplő nyers kapcsolati sztring csak bemutató célokra jelennek meg. Éles környezetben mindig védje a hozzáférési kulcsokat. Az Azure Key Vault használatával biztonságosan kezelheti és elforgathatja a kulcsokat, és biztonságossá teheti a kapcsolatot.
WebPubSubServiceClient
Először keresse meg a Web PubSub-erőforrást az Azure Portalon, és másolja ki a kapcsolati sztring a Kulcsok területen. Ezután lépjen a függvényalkalmazás beállításaihoz az Azure Portal -Settings ->>Environment változói között. Adjon hozzá egy új elemet az Alkalmazásbeállítások területen, a név egyenlő
WebPubSubConnectionString
, az érték pedig a Web PubSub erőforrás kapcsolati sztring.
A Web PubSub szolgáltatás konfigurálása Event Handler
Ebben a mintában a szolgáltatás-felsőbb rétegbeli kérések figyelésére szolgálunk WebPubSubTrigger
. A Web PubSubnak tehát ismernie kell a függvény végpontadatait a célügyfél-kérelmek küldéséhez. Az Azure-függvényalkalmazáshoz pedig egy rendszerkulcsra van szükség a bővítményspecifikus webhook-metódusok biztonságához. Az előző lépésben, miután üzembe helyeztük a függvényalkalmazást a függvényekkel message
, le tudjuk szerezni a rendszerkulcsot.
Lépjen az Azure Portalra – A függvényalkalmazás erőforrásának megkeresése –>Alkalmazáskulcsok –>Rendszerkulcsok –.webpubsub_extension
>> Másolja ki az értéket a következőként <APP_KEY>
: .
Beállítás Event Handler
az Azure Web PubSub szolgáltatásban. Nyissa meg az Azure Portalt –> Keresse meg a Web PubSub-erőforrást –> Beállítások. Adjon hozzá egy új hubbeállítás-megfeleltetést a használt függvényhez. Cserélje le a <FUNCTIONAPP_NAME>
saját és <APP_KEY>
a sajátjaira.
- Központ neve:
simplechat
- URL-sablon: https://< FUNCTIONAPP_NAME.azurewebsites.net/runtime/webhooks/webpubsub?code>=<APP_KEY>
- Felhasználói eseményminta: *
- Rendszeresemények: –(Ebben a mintában nincs szükség konfigurálásra)
Ügyfél-hitelesítés engedélyezésének konfigurálása
Lépjen az Azure Portalra –> A függvényalkalmazás erőforrásának megkeresése –>Hitelesítés. Kattintson a Add identity provider
parancsra. Állítsa be az App Service hitelesítési beállításait hitelesítés nélküli hozzáférés engedélyezésére, hogy az ügyfélindex-oldalt névtelen felhasználók megtekinthessék, mielőtt átirányítanák a hitelesítésre. Ezután mentse a fájlt.
Itt a függvényben negotiate
használt x-ms-client-principal-name
userId
azonosító szolgáltatót választjukMicrosoft
. Emellett konfigurálhat más identitásszolgáltatókat is a hivatkozások alapján, és ne felejtse el ennek megfelelően frissíteni az userId
értéket a függvényben negotiate
.
Az alkalmazás kipróbálása
Most már tesztelheti az oldalt a függvényalkalmazásból: https://<FUNCTIONAPP_NAME>.azurewebsites.net/api/index
. Tekintse meg a pillanatképet.
- Kattintson
login
a hitelesítéshez. - Írja be az üzenetet a beviteli mezőbe a csevegéshez.
Az üzenetfüggvényben a hívó üzenetét továbbítjuk az összes ügyfélnek, és üzenettel [SYSTEM] ack
küldjük vissza a hívót. Így a csevegési mintaképből tudjuk, hogy az első négy üzenet az aktuális ügyféltől, az utolsó két üzenet pedig egy másik ügyféltől származik.
Az erőforrások eltávolítása
Ha nem fogja tovább használni ezt az alkalmazást, törölje a dokumentum által létrehozott összes erőforrást az alábbi lépésekkel, hogy ne járjon költségekkel:
Az Azure Portalon válassza az Erőforráscsoportok lehetőséget a bal szélen, majd a létrehozott erőforráscsoport. A keresőmezővel ehelyett a neve alapján keresheti meg az erőforráscsoportot.
A megnyíló ablakban jelölje ki az erőforráscsoportot, majd válassza az Erőforráscsoport törlése lehetőséget.
Az új ablakban írja be a törölni kívánt erőforráscsoport nevét, majd válassza a Törlés lehetőséget.
Következő lépések
Ebben a rövid útmutatóban megtanulta, hogyan futtathat kiszolgáló nélküli csevegőalkalmazásokat. Most már elkezdheti saját alkalmazásának összeállítását.