Freigeben über


Tutorial: Erstellen einer serverlosen Benachrichtigungs-App mit Azure Functions und dem Azure Web PubSub-Dienst

Der Azure Web PubSub-Dienst ermöglicht die Erstellung von Webanwendungen für Echtzeit-Messaging mithilfe von WebSockets. Azure Functions ist eine serverlose Plattform, mit der Sie Ihren Code ohne Verwaltung von Infrastruktur ausführen können. In diesem Tutorial erfahren Sie, wie Sie den Azure Web PubSub-Dienst und Azure Functions verwenden, um eine serverlose Anwendung mit Echtzeit-Messaging für Benachrichtigungszenarien zu erstellen.

In diesem Tutorial lernen Sie Folgendes:

  • Erstellen einer serverlosen Benachrichtigungs-App
  • Verwenden von Eingabe- und Ausgabebindungen für Web PubSub-Funktionen
  • Lokales Ausführen der Beispielfunktionen
  • Bereitstellen der Funktion in der Azure-Funktions-App

Voraussetzungen

Wenn Sie kein Azure-Abonnement haben, erstellen Sie ein kostenloses Azure-Konto, bevor Sie beginnen.

Anmelden bei Azure

Melden Sie sich unter https://portal.azure.com/ mit Ihrem Azure-Konto beim Azure-Portal an.

Erstellen einer Azure Web PubSub-Dienstinstanz

Ihre Anwendung stellt eine Verbindung mit einer Instanz des Web PubSub-Diensts in Azure her.

  1. Klicken Sie in der linken oberen Ecke des Azure-Portals auf die Schaltfläche „Neu“. Geben Sie im Bildschirm „Neu“ den Begriff Web PubSub in das Suchfeld ein, und drücken Sie die EINGABETASTE. (Sie können Azure Web PubSub auch in der Kategorie Web durchsuchen.)

    Screenshot of searching the Azure Web PubSub in portal.

  2. Wählen Sie in den Suchergebnissen Web PubSub und dann Erstellen aus.

  3. Geben Sie folgende Einstellungen ein.

    Einstellung Vorgeschlagener Wert BESCHREIBUNG
    Ressourcenname Global eindeutiger Name Der global eindeutige Name, welcher Ihre neue Web PubSub-Dienstinstanz identifiziert. Gültige Zeichen sind a-z, A-Z, 0-9 und -.
    Abonnement Ihr Abonnement Das Azure-Web PubSubAbonnement, unter dem diese neue Web PubSub-Dienstinstanz erstellt wird.
    Ressourcengruppe myResourceGroup Name für die neue Ressourcengruppe, in der Ihre Web PubSub-Dienstinstanz erstellt werden soll
    Location USA (Westen) Wählen Sie eine Region in Ihrer Nähe aus.
    Preisstufe Kostenlos Sie können Azure Web PubSub zuerst kostenlos ausprobieren. Erfahren Sie mehr über die Tarife des Azure Web PubSub-Diensts.
    Einheitenanzahl - Die Einheitenanzahl gibt an, wie viele Verbindungen Ihre Instanz des Web PubSub-Dienstes akzeptieren kann. Jede Einheit unterstützt höchstens 1.000 gleichzeitige Verbindungen. Dies kann nur im Tarif „Standard“ konfiguriert werden.

    Screenshot of creating the Azure Web PubSub instance in portal.

  4. Wählen Sie Erstellen aus, um mit der Bereitstellung der Instanz des Web PubSub-Dienstes zu beginnen.

Erstellen und lokales Ausführen der Funktionen

  1. Stellen Sie sicher, dass Azure Functions Core Tools installiert ist. Erstellen Sie nun ein leeres Verzeichnis für das Projekt. Führen Sie den Befehl unter diesem Arbeitsverzeichnis aus. Verwenden Sie eine der folgenden Optionen.

    func init --worker-runtime javascript --model V4
    
  2. Führen Sie die Schritte zum Installieren Microsoft.Azure.WebJobs.Extensions.WebPubSubaus.

    Bestätigen oder aktualisieren host.jsonSie 's extensionBundle auf Version 4.* oder höher, um Web PubSub-Support zu erhalten. Um die host.jsonDatei zu aktualisieren, öffnen Sie die Datei im Editor, und ersetzen Sie dann die vorhandene Version extensionBundle auf Version 4.* oder höher.

    {
        "extensionBundle": {
            "id": "Microsoft.Azure.Functions.ExtensionBundle",
            "version": "[4.*, 5.0.0)"
        }
    }
    
  3. Erstellen Sie eine index-Funktion zum Lesen und Hosten einer statischen Webseite für Clients.

    func new -n index -t HttpTrigger
    
    • Aktualisieren Sie src/functions/index.js und kopieren Sie den folgenden Code.
      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. Erstellen Sie eine negotiate-Funktion, damit Clients die Dienstverbindungs-URL mit Zugriffstoken abrufen können.

    func new -n negotiate -t HttpTrigger
    
    • Aktualisieren Sie src/functions/negotiate.js und kopieren Sie den folgenden Code.
      const { app, input } = require('@azure/functions');
      
      const connection = input.generic({
          type: 'webPubSubConnection',
          name: 'connection',
          hub: 'notification'
      });
      
      app.http('negotiate', {
          methods: ['GET', 'POST'],
          authLevel: 'anonymous',
          extraInputs: [connection],
          handler: async (request, context) => {
              return { body: JSON.stringify(context.extraInputs.get('connection')) };
          },
      });
      
  5. Erstellen Sie eine notification-Funktion zum Generieren von Benachrichtigungen mit TimerTrigger.

    func new -n notification -t TimerTrigger
    
    • Aktualisieren Sie src/functions/notification.js und kopieren Sie den folgenden Code.
      const { app, output } = require('@azure/functions');
      
      const wpsAction = output.generic({
          type: 'webPubSub',
          name: 'action',
          hub: 'notification'
      });
      
      app.timer('notification', {
          schedule: "*/10 * * * * *",
          extraOutputs: [wpsAction],
          handler: (myTimer, context) => {
              context.extraOutputs.set(wpsAction, {
                  actionName: 'sendToAll',
                  data: `[DateTime: ${new Date()}] Temperature: ${getValue(22, 1)}\xB0C, Humidity: ${getValue(40, 2)}%`,
                  dataType: 'text',
              });
          },
      });
      
      function getValue(baseNum, floatNum) {
          return (baseNum + 2 * floatNum * (Math.random() - 0.5)).toFixed(3);
      }
      
  6. Fügen Sie im Stammordner des Projekts die Client-Einzelseite index.html hinzu und kopieren Sie den Inhalt.

    <html>
        <body>
        <h1>Azure Web PubSub Notification</h1>
        <div id="messages"></div>
        <script>
            (async function () {
                let messages = document.querySelector('#messages');
                let res = await fetch(`${window.location.origin}/api/negotiate`);
                let url = await res.json();
                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);
                };
            })();
        </script>
        </body>
    </html>
    
  7. Konfigurieren und Ausführen der Azure Functions-App

    • Öffnen Sie im Browser das Azure-Portal, und vergewissern Sie sich, dass die zuvor bereitgestellte Instanz des Web PubSub-Diensts erfolgreich erstellt wurde. Navigieren Sie zu der Instanz.
    • Wählen Sie Schlüssel aus, und kopieren Sie die Verbindungszeichenfolge.

    Screenshot of copying the Web PubSub connection string.

    Führen Sie den Befehl im Funktionsordner aus, um die Verbindungszeichenfolge des Dienstes festzulegen. Ersetzen Sie <connection-string> durch den jeweils erforderlichen Wert.

    func settings add WebPubSubConnectionString "<connection-string>"
    

    Hinweis

    Das im Beispiel verwendete TimerTrigger ist von Azure Storage abhängig. Sie können jedoch den lokalen Speicheremulator verwenden, wenn die Funktion lokal ausgeführt wird. Wird eine Fehlermeldung wie There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid. angezeigt, müssen Sie den There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid. herunterladen und aktivieren.

    Jetzt können Sie Ihre lokale Funktion per Befehl ausführen.

    func start --port 7071
    

    Wenn Sie die ausgeführten Protokolle überprüfen, können Sie die statische Seite Ihres lokalen Hosts über http://localhost:7071/api/index aufrufen.

    Hinweis

    Einige Browser leiten automatisch auf https um, was zu einer falschen URL führt. Empfehlen Sie die Verwendung von Edge und überprüfen Sie die URL, wenn das Rendering nicht erfolgreich ist.

Bereitstellen der Funktions-App in Azure

Zum Bereitstellen Ihres Funktionscodes in Azure müssen Sie drei Ressourcen erstellen:

  • Eine Ressourcengruppe als logischen Container für verwandte Ressourcen.
  • Ein Speicherkonto, das verwendet wird, um den Status und andere Informationen zu Ihren Funktionen zu verwalten.
  • Eine Funktions-App, die als Umgebung zum Ausführen Ihres Funktionscodes dient. Eine Funktions-App ist Ihrem lokalen Funktionsprojekt zugeordnet und ermöglicht Ihnen das Gruppieren von Funktionen als logische Einheit, um die Verwaltung, Bereitstellung und Freigabe von Ressourcen zu vereinfachen.

Verwenden Sie die folgenden Befehle, um diese Elemente zu erstellen.

  1. Melden Sie sich bei Azure an:

    az login
    
  2. Erstellen Sie eine Ressourcengruppe oder verwenden Sie einfach die Ressourcengruppe des Azure Web PubSub-Dienstes weiter:

    az group create -n WebPubSubFunction -l <REGION>
    
  3. Erstellen Sie in Ihrer Ressourcengruppe und Region ein universelles Speicherkonto:

    az storage account create -n <STORAGE_NAME> -l <REGION> -g WebPubSubFunction
    
  4. Erstellen Sie die Funktions-App in 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>
    

    Hinweis

    Lesen Sie die Dokumentation zu den Azure Functions Runtime-Versionen, um den Parameter --runtime-version auf einen unterstützten Wert zu setzen.

  5. Stellen Sie das Funktionsprojekts in Azure bereit:

    Nachdem Sie Ihre Funktions-App in Azure erstellt haben, können Sie jetzt Ihr lokales Funktionsprojekt mithilfe des Veröffentlichungsbefehls "azure functionapp veröffentlichen " bereitstellen.

    func azure functionapp publish <FUNCIONAPP_NAME> --publish-local-settings
    

    Hinweis

    Hier werden die lokalen Einstellungen von local.settings.json zusammen mit dem Befehlsparameter --publish-local-settings bereitgestellt. Wenn Sie den Microsoft Azure-Speicheremulator verwenden, können Sie no für die folgende Eingabeaufforderung eingeben, damit dieser Wert in Azure nicht überschrieben wird: App setting AzureWebJobsStorage is different between azure and local.settings.json, Would you like to overwrite value in azure? [yes/no/show]. Darüber hinaus können Sie die Einstellungen für die Funktions-App im Azure-Portal unter Einstellungen>Konfiguration aktualisieren.

  6. Nun können Sie Ihre Website über die Azure-Funktions-App überprüfen, indem Sie zur URL https://<FUNCIONAPP_NAME>.azurewebsites.net/api/index navigieren.

Bereinigen von Ressourcen

Wenn Sie diese App nicht mehr benötigen, löschen Sie alle im Rahmen dieser Dokumentation erstellten Ressourcen, damit keine Gebühren anfallen. Gehen Sie dazu wie folgt vor:

  1. Klicken Sie ganz links im Azure-Portal auf Ressourcengruppen und anschließend auf die erstellte Ressourcengruppe. Verwenden Sie stattdessen das Suchfeld, um die Ressourcengruppe anhand ihres Namens zu finden.

  2. Wählen im daraufhin angezeigten Fenster die Ressourcengruppe und anschließend die Option Ressourcengruppe löschen aus.

  3. Geben Sie im neuen Fenster den Namen der Ressourcengruppe ein, die Sie löschen möchten, und wählen Sie Löschen aus.

Nächste Schritte

In dieser Schnellstartanleitung haben Sie gelernt, wie Sie eine serverlose Benachrichtigungsanwendung ausführen. Sie können nun damit beginnen, Ihre eigene Anwendung zu erstellen.