Sdílet prostřednictvím

Kurz: Vytvoření bezserverové chatovací aplikace v reálném čase pomocí Azure Functions a služby Azure Web PubSub

  • Článek

Služba Azure Web PubSub vám pomůže snadno vytvářet webové aplikace pro zasílání zpráv v reálném čase pomocí webSocketů a vzoru publikování a odběru. Řešení Azure Functions představuje bezserverovou platformu, která umožňuje spouštět kód, aniž byste museli spravovat nějakou infrastrukturu. V tomto kurzu se naučíte používat službu Azure Web PubSub a Azure Functions k vytvoření bezserverové aplikace se zasíláním zpráv v reálném čase a vzorem publikování a odběru.

V tomto kurzu se naučíte:

  • Vytvoření bezserverové chatovací aplikace v reálném čase
  • Práce s aktivačními vazbami funkce Web PubSub a výstupními vazbami
  • Nasazení funkce do aplikace Funkcí Azure
  • Konfigurace ověřování Azure
  • Konfigurace obslužné rutiny události Web PubSub pro směrování událostí a zpráv do aplikace

Požadavky

  • Editor kódu, například Visual Studio Code

  • Node.js verze 18.x nebo vyšší.

    Poznámka:

    Další informace o podporovaných verzích Node.js najdete v dokumentaci k verzím modulu runtime služby Azure Functions.

  • Azure Functions Core Tools (upřednostňovaná verze 4 nebo vyšší) pro místní spouštění aplikací Funkcí Azure a jejich nasazení do Azure

  • Azure CLI pro správu prostředků Azure.

Pokud ještě nemáte předplatné Azure, vytvořte si bezplatný účet Azure před tím, než začnete.

Přihlášení k Azure

Přihlaste se pomocí svého účtu Azure k webu Azure Portal na adrese https://portal.azure.com/.

Vytvoření instance služby Azure Web PubSub

Vaše aplikace se připojí k instanci služby Web PubSub v Azure.

  1. Vyberte tlačítko Nový v levém horním rohu portálu Azure Portal. Na obrazovce Nový zadejte do vyhledávacího pole web pubSub a stiskněte enter. (Můžete také vyhledat podsít webu Azure z Web kategorie.)

    Snímek obrazovky vyhledávání podsítě Azure Web PubSub na portálu

  2. Ve výsledcích hledání vyberte Web PubSub a pak vyberte Vytvořit.

  3. Zadejte následující nastavení.

    Nastavení Navrhovaná hodnota Popis
    Název prostředku Globálně jedinečný název Globálně jedinečný název, který identifikuje novou instanci služby Web PubSub. Platné znaky jsou a-z, A-Z, 0-9a -.
    Předplatné Vaše předplatné Předplatné Azure, ve kterém se vytvoří tato nová instance služby Web PubSub.
    Skupina prostředků myResourceGroup Název nové skupiny prostředků, ve které chcete vytvořit instanci služby Web PubSub.
    Místo USA – západ Zvolte oblast ve své blízkosti.
    Cenová úroveň Bezplatný Službu Azure Web PubSub si můžete vyzkoušet zdarma. Další informace o cenových úrovních služby Azure Web PubSub
    Počet jednotek - Počet jednotek určuje, kolik připojení může instance služby Web PubSub přijmout. Každá jednotka podporuje maximálně 1 000 souběžných připojení. To lze nakonfigurovat jen na úrovni Standard.

    Snímek obrazovky s vytvořením instance Azure Web PubSub na portálu

  4. Výběrem možnosti Vytvořit spusťte nasazení instance služby Web PubSub.

Vytvoření funkcí

  1. Ujistěte se, že máte nainstalované nástroje Azure Functions Core Tools . A pak pro projekt vytvořte prázdný adresář. Spusťte příkaz pod tímto pracovním adresářem.

    func init --worker-runtime javascript --model V4

  2. Nainstalujte Microsoft.Azure.WebJobs.Extensions.WebPubSub.

    Potvrďte a aktualizujte host.jsonextensionBundle na verzi 4.* nebo novější, abyste získali podporu Web PubSub.

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

  3. Vytvořte index funkci pro čtení a hostování statické webové stránky pro klienty.

    func new -n index -t HttpTrigger
    • Aktualizujte src/functions/index.js a zkopírujte následující kódy. 
      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. Vytvořte negotiate funkci, která klientům pomůže získat adresu URL připojení služby s přístupovým tokenem.

    func new -n negotiate -t HttpTrigger

    Poznámka:

    V této ukázce používáme hlavičku x-ms-client-principal-name identity uživatele Microsoft Entra ID k načtení userId. A to nebude fungovat v místní funkci. Můžete ho vyprázdnit nebo změnit na jiné způsoby, jak získat nebo vygenerovat userId při přehrávání v místním prostředí. Umožňuje například klientovi zadat uživatelské jméno a předat ho do dotazu, jako ?user={$username} je volání negotiate funkce pro získání adresy URL připojení služby. A ve negotiate funkci, nastavena userId s hodnotou {query.user}.

    • Aktualizujte src/functions/negotiate a zkopírujte následující kódy. 
      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. Vytvořte message funkci pro vysílání klientských zpráv prostřednictvím služby.

    func new -n message -t HttpTrigger
    • Aktualizujte src/functions/message.js a zkopírujte následující kódy. 
      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. Přidejte jednu stránku index.html klienta do kořenové složky projektu a zkopírujte obsah.

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

Vytvoření a nasazení aplikace Funkcí Azure

Než budete moct nasadit kód funkce do Azure, musíte vytvořit tři prostředky:

  • Skupina prostředků, což je logický kontejner pro související prostředky.
  • Účet úložiště, který slouží k udržování stavu a dalších informací o vašich funkcích.
  • Aplikace funkcí, která poskytuje prostředí pro spouštění kódu funkce. Aplikace funkcí se mapuje na místní projekt funkcí a umožňuje seskupit funkce jako logickou jednotku pro snadnější správu, nasazení a sdílení prostředků.

K vytvoření těchto položek použijte následující příkazy.

  1. Pokud jste to ještě neudělali, přihlaste se k Azure:

    az login

  2. Vytvořte skupinu prostředků nebo ji můžete přeskočit opětovným použitím jedné ze služeb Azure Web PubSub:

    az group create -n WebPubSubFunction -l <REGION>

  3. Ve skupině prostředků a oblasti vytvořte účet úložiště pro obecné účely:

    az storage account create -n <STORAGE_NAME> -l <REGION> -g WebPubSubFunction

  4. Vytvoření aplikace funkcí v Azure:

    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>

    Poznámka:

    Projděte si dokumentaci k verzím modulu runtime Azure Functions a nastavte --runtime-version parametr na podporovanou hodnotu.

  5. Nasazení projektu funkce do Azure:

    Po úspěšném vytvoření aplikace funkcí v Azure jste teď připraveni nasadit místní projekt funkcí pomocí příkazu func azure functionapp publish .

    func azure functionapp publish <FUNCIONAPP_NAME>

  6. WebPubSubConnectionString Nakonfigurujte aplikaci funkcí:

    Nejprve na webu Azure Portal vyhledejte prostředek Web PubSub a zkopírujte připojovací řetězec v části Klíče. Pak přejděte na nastavení aplikace funkcí na webu Azure Portal ->Settings ->Configuration. A do nastavení aplikace přidejte novou položku s názvem rovnou WebPubSubConnectionString a hodnotou je prostředek Web PubSub připojovací řetězec.

Konfigurace služby Web PubSub Event Handler

V této ukázce používáme WebPubSubTrigger k naslouchání upstreamovým požadavkům. Web PubSub proto potřebuje znát informace o koncovém bodu funkce, aby bylo možné odesílat požadavky cílového klienta. Aplikace Funkcí Azure vyžaduje systémový klíč pro zabezpečení týkající se metod webhooku specifických pro rozšíření. V předchozím kroku po nasazení aplikace funkcí s funkcemi message můžeme získat systémový klíč.

Přejděte na Web Azure Portal –> Vyhledejte prostředek aplikace Function App ->App keys ->System keys ->webpubsub_extension. Zkopírujte hodnotu jako <APP_KEY>.

Snímek obrazovky se získáním systémových klíčů funkcí

Nastavte Event Handler ve službě Azure Web PubSub. Přejděte na Web Portal –> Najděte prostředek Web PubSub ->Settings. Přidejte nové mapování nastavení rozbočovače na jednu funkci, která se používá. Nahraďte ho <FUNCTIONAPP_NAME> a <APP_KEY> do svého.

  • Název centra: simplechat
  • Šablona adresy URL: https://< FUNCTIONAPP_NAME.azurewebsites.net/runtime/webhooks/webpubsub?code>=<APP_KEY>
  • Vzor událostí uživatele: *
  • Systémové události: (V této ukázce není potřeba konfigurovat)

Snímek obrazovky s nastavením obslužné rutiny události

Konfigurace pro povolení ověřování klientů

Přejděte na Web Azure Portal –> Vyhledejte prostředek aplikace Function App –> Ověřování. Klikněte na Add identity provider. Nastavte nastavení ověřování služby App Service tak, aby povolovala neověřený přístup, takže stránku indexu klienta můžou před přesměrováním na ověření navštívit anonymní uživatelé. Pak klikněte na Uložit.

Tady zvolíme Microsoft jako identifikaci zprostředkovatele, který se používá x-ms-client-principal-name jako userId ve negotiate funkci. Kromě toho můžete nakonfigurovat další zprostředkovatele identity na základě odkazů a nezapomeňte odpovídajícím způsobem aktualizovat userId hodnotu ve negotiate funkci.

Vyzkoušení aplikace

Teď můžete otestovat stránku z aplikace funkcí: https://<FUNCTIONAPP_NAME>.azurewebsites.net/api/index. Podívejte se na snímek.

  1. Kliknutím login si můžete ověření provést sami.
  2. Napište zprávu do vstupního pole pro chat.

Ve funkci zprávy vysíláme zprávu volajícího všem klientům a vracíme volajícího se zprávou [SYSTEM] ack. Můžeme tedy vědět v ukázkovém snímku chatu, první čtyři zprávy pocházejí z aktuálního klienta a poslední dvě zprávy pocházejí z jiného klienta.

Snímek obrazovky s ukázkou chatu

Vyčištění prostředků

Pokud nebudete tuto aplikaci dál používat, odstraňte všechny prostředky vytvořené tímto dokumentem pomocí následujícího postupu, abyste nemuseli účtovat žádné poplatky:

  1. Úplně nalevo na webu Azure Portal vyberte Skupiny prostředků a pak vyberte skupinu prostředků, kterou jste vytvořili. K vyhledání skupiny prostředků podle jejího názvu můžete použít vyhledávací pole.

  2. V okně, které se otevře, vyberte skupinu prostředků a pak vyberte Odstranit skupinu prostředků.

  3. V novém okně zadejte název skupiny prostředků, která se má odstranit, a pak vyberte Odstranit.

Další kroky

V tomto rychlém startu jste zjistili, jak spustit bezserverovou chatovací aplikaci. Teď můžete začít vytvářet vlastní aplikaci.

Vazby Azure Web PubSub pro Azure Functions

Rychlý start: Vytvoření jednoduché chatovací místnosti pomocí azure Web PubSub

Prozkoumání dalších ukázek Azure Web PubSub