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

  • Cikk

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

Előfeltételek

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.

  1. 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.)

    Képernyőkép az Azure Web PubSub portálon való kereséséről.

  2. 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.

  3. 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őka-z: , A-Z0-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ó.

    Képernyőkép az Azure Web PubSub-példány portálon való létrehozásáról.

  4. 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

  1. 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

  2. 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.jsonaz extensionBundle bővítményt a 4.* vagy újabb verzióra.

    {
  "extensionBundle": {
    "id": "Microsoft.Azure.Functions.ExtensionBundle",
    "version": "[4.*, 5.0.0)"
  }
}

  3. 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, 
        };
    }
});

  4. 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étrehozhatja userId , 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éri negotiate a szolgáltatáskapcsolat URL-címét. És a negotiate függvényben állítsa be userId 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')) };
    },
});

  5. 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",
        };
    }
});

  6. 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.

  1. Ha még nem tette meg, jelentkezzen be az Azure-ba:

    az login

  2. 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>

  3. 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

  4. 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.

  5. 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>

  6. Konfigurálja a WebPubSubConnectionString függvényalkalmazást:

    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 navigáljon a függvényalkalmazás beállításaihoz az Azure Portal ->Gépház ->Configuration webhelyen. 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>: .

Képernyőkép a függvényrendszerkulcsok lekéréséről.

Beállítás Event Handler az Azure Web PubSub szolgáltatásban. Lépjen az Azure Portalra –> Keresse meg a Web PubSub-erőforrást –> Gépház. 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)

Képernyőkép az eseménykezelő beállításáról.

Ü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-nameuserId 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.

  1. Kattintson login a hitelesítéshez.
  2. Í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] ackkü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.

Képernyőkép a csevegési mintáról.

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:

  1. 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.

  2. A megnyíló ablakban jelölje ki az erőforráscsoportot, majd válassza az Erőforráscsoport törlése lehetőséget.

  3. 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.

Azure Web PubSub-kötések az Azure Functionshez

Rövid útmutató: Egyszerű csevegőszoba létrehozása az Azure Web PubSub használatával

További Azure Web PubSub-minták felfedezése