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
Ein Code-Editor wie Visual Studio Code
Node.js, Version 18.x oder höher.
Hinweis
Weitere Informationen zu den unterstützten Versionen von Node.js finden Sie in der Übersicht über die Runtimeversionen von Azure Functions.
Azure Functions Core Tools (v4 oder höher bevorzugt), um Azure Funktions-Apps lokal auszuführen und in Azure bereitzustellen.
Azure CLI zum Verwalten von Azure-Ressourcen
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.
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.)Wählen Sie in den Suchergebnissen Web PubSub und dann Erstellen aus.
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. Wählen Sie Erstellen aus, um mit der Bereitstellung der Instanz des Web PubSub-Dienstes zu beginnen.
Erstellen und lokales Ausführen der Funktionen
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
Führen Sie die Schritte zum Installieren
Microsoft.Azure.WebJobs.Extensions.WebPubSub
aus.Bestätigen oder aktualisieren
host.json
Sie 's extensionBundle auf Version 4.* oder höher, um Web PubSub-Support zu erhalten. Um diehost.json
Datei 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)" } }
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, }; } });
- Aktualisieren Sie
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')) }; }, });
- Aktualisieren Sie
Erstellen Sie eine
notification
-Funktion zum Generieren von Benachrichtigungen mitTimerTrigger
.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); }
- Aktualisieren Sie
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>
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.
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 wieThere 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 denThere 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 vonEdge
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.
Melden Sie sich bei Azure an:
az login
Erstellen Sie eine Ressourcengruppe oder verwenden Sie einfach die Ressourcengruppe des Azure Web PubSub-Dienstes weiter:
az group create -n WebPubSubFunction -l <REGION>
Erstellen Sie in Ihrer Ressourcengruppe und Region ein universelles Speicherkonto:
az storage account create -n <STORAGE_NAME> -l <REGION> -g WebPubSubFunction
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.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 Sieno
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.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:
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.
Wählen im daraufhin angezeigten Fenster die Ressourcengruppe und anschließend die Option Ressourcengruppe löschen aus.
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.