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

Der Azure Web PubSub-Dienst unterstützt Sie beim einfachen Erstellen von Echtzeit-Messagingwebanwendungen mithilfe von WebSockets und des Veröffentlichen-Abonnieren-Musters. 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 Echtzeitmessaging und dem Veröffentlichen-Abonnieren-Muster zu erstellen.

In diesem Tutorial lernen Sie Folgendes:

• Erstellen einer serverlosen Echtzeit-Chat-App
• Arbeiten mit Web PubSub-Funktionstrigger- und -ausgabebindungen
• Bereitstellen der Funktion in der Azure-Funktions-App
• Konfigurieren der Azure-Authentifizierung
• Konfigurieren des Web PubSub-Ereignishandlers zum Weiterleiten von Ereignissen und Nachrichten an die Anwendung

Voraussetzungen

JavaScript-Modell v4

• 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

JavaScript-Modell v3

• 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

C#, prozessintern

• Ein Code-Editor wie Visual Studio Code.

• 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

C#, isolierter Prozess

• Ein Code-Editor wie Visual Studio Code.

• 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

Python

• Ein Code-Editor wie Visual Studio Code.

• Python (v3.7 und höher). Siehe Unterstützte Python-Versionen.

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

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

   

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.

   

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

Erstellen der Funktionen

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

   JavaScript-Modell v4

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

   JavaScript-Modell v3

   func init --worker-runtime javascript --model V3
   

   C#, prozessintern

   func init --worker-runtime dotnet
   

   C#, isolierter Prozess

   func init --worker-runtime dotnet-isolated
   

   Python

   func init --worker-runtime python --model V1
   

2. Installieren von Microsoft.Azure.WebJobs.Extensions.WebPubSub.

   JavaScript-Modell v4

   Bestätigen und aktualisieren Sie host.json's extensionBundle auf Version 4.* oder höher, um Web PubSub-Unterstützung zu erhalten.

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

   JavaScript-Modell v3

   Bestätigen und aktualisieren Sie host.json's extensionBundle auf Version 3.3.0.* oder höher, um Web PubSub-Unterstützung zu erhalten.

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

   C#, prozessintern

   dotnet add package Microsoft.Azure.WebJobs.Extensions.WebPubSub
   

   C#, isolierter Prozess

   dotnet add package Microsoft.Azure.Functions.Worker.Extensions.WebPubSub --prerelease
   

   Python

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

3. Erstellen Sie eine index-Funktion zum Lesen und Hosten einer statischen Webseite für Clients.

   func new -n index -t HttpTrigger
   

   JavaScript-Modell v4

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

   JavaScript-Modell v3

   • Aktualisieren Sie index/function.json und kopieren Sie den folgenden JSON-Code.

     {
       "bindings": [
         {
           "authLevel": "anonymous",
           "type": "httpTrigger",
           "direction": "in",
           "name": "req",
           "methods": ["get", "post"]
         },
         {
           "type": "http",
           "direction": "out",
           "name": "res"
         }
       ]
     }
     

   • Aktualisieren Sie index/index.js und kopieren Sie den folgenden Code.

     var fs = require("fs");
     var path = require("path");
     
     module.exports = function (context, req) {
       var index =
         context.executionContext.functionDirectory + "/../index.html";
       context.log("index.html path: " + index);
       fs.readFile(index, "utf8", function (err, data) {
         if (err) {
           console.log(err);
           context.done(err);
         }
         context.res = {
           status: 200,
           headers: {
             "Content-Type": "text/html",
           },
           body: data,
         };
         context.done();
       });
     };
     

   C#, prozessintern

   • Aktualisieren Sie index.cs und ersetzen Sie die Run-Funktion durch den folgenden Code.

     [FunctionName("index")]
     public static IActionResult Run([HttpTrigger(AuthorizationLevel.Anonymous)] HttpRequest req, ExecutionContext context, ILogger log)
     {
         var indexFile = Path.Combine(context.FunctionAppDirectory, "index.html");
         log.LogInformation($"index.html path: {indexFile}.");
         return new ContentResult
         {
             Content = File.ReadAllText(indexFile),
             ContentType = "text/html",
         };
     }
     

   C#, isolierter Prozess

   • Aktualisieren Sie index.cs und ersetzen Sie die Run-Funktion durch den folgenden Code.

     [Function("index")]
     public HttpResponseData Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequestData req, FunctionContext context)
     {
         var path = Path.Combine(context.FunctionDefinition.PathToAssembly, "../index.html");
         _logger.LogInformation($"index.html path: {path}.");
     
     var response = req.CreateResponse();
     response.WriteString(File.ReadAllText(path));
     response.Headers.Add("Content-Type", "text/html");
     return response;
     }
     

   Python

   • Aktualisieren Sie index/function.json und kopieren Sie den folgenden JSON-Code.

     {
       "bindings": [
         {
           "authLevel": "anonymous",
           "type": "httpTrigger",
           "direction": "in",
           "name": "req",
           "methods": ["get", "post"]
         },
         {
           "type": "http",
           "direction": "out",
           "name": "$return"
         }
       ]
     }
     
     

   • Aktualisieren Sie __init__.py und ersetzen Sie die main-Funktion durch den folgenden Code.

     import os
     
     import azure.functions as func
     
     
     def main(req: func.HttpRequest) -> func.HttpResponse:
         f = open(os.path.dirname(os.path.realpath(__file__)) + "/../index.html")
         return func.HttpResponse(f.read(), mimetype="text/html")
     

4. Erstellen Sie eine negotiate-Funktion, damit Clients die Dienstverbindungs-URL mit Zugriffstoken abrufen können.

   func new -n negotiate -t HttpTrigger
   

   Hinweis

   In diesem Beispiel wird der Microsoft Entra ID-Header der Benutzeridentität x-ms-client-principal-name zum Abrufen von userId verwendet. Dies funktioniert in einer lokalen Funktion nicht. Sie können ihn leer lassen oder auf andere Weise ändern, um userId abzurufen oder zu generieren, wenn Sie lokal agieren. Lassen Sie den Client z. B. einen Benutzernamen eingeben und ihn in einer Abfrage wie ?user={$username} übergeben, wenn Sie die negotiate-Funktion aufrufen, um die URL für die Verbindung mit dem Dienst zu erhalten. Legen Sie in der negotiate-Funktion userId auf den Wert {query.user} fest.

   JavaScript-Modell v4

   • Aktualisieren Sie src/functions/negotiate und kopieren Sie den folgenden Code.

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

   JavaScript-Modell v3

   • Aktualisieren Sie negotiate/function.json und kopieren Sie den folgenden JSON-Code.

     {
       "bindings": [
         {
           "authLevel": "anonymous",
           "type": "httpTrigger",
           "direction": "in",
           "name": "req"
         },
         {
           "type": "http",
           "direction": "out",
           "name": "res"
         },
         {
           "type": "webPubSubConnection",
           "name": "connection",
           "hub": "simplechat",
           "userId": "{headers.x-ms-client-principal-name}",
           "direction": "in"
         }
       ]
     }
     

   • Aktualisieren Sie negotiate/index.js und kopieren Sie den folgenden Code.

     module.exports = function (context, req, connection) {
       context.res = { body: connection };
       context.done();
     };
     

   C#, prozessintern

   • Aktualisieren Sie negotiate.cs und ersetzen Sie die Run-Funktion durch den folgenden Code.

     [FunctionName("negotiate")]
     public static WebPubSubConnection Run(
         [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
         [WebPubSubConnection(Hub = "simplechat", UserId = "{headers.x-ms-client-principal-name}")] WebPubSubConnection connection,
         ILogger log)
     {
         log.LogInformation("Connecting...");
         return connection;
     }
     

   • Fügen Sie im Header die Anweisungen using hinzu, um erforderliche Abhängigkeiten aufzulösen.

     using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
     

   C#, isolierter Prozess

   • Aktualisieren Sie negotiate.cs und ersetzen Sie die Run-Funktion durch den folgenden Code.

     [Function("negotiate")]
     public HttpResponseData Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequestData req,
         [WebPubSubConnectionInput(Hub = "simplechat", UserId = "{headers.x-ms-client-principal-name}")] WebPubSubConnection connectionInfo)
     {
         var response = req.CreateResponse(HttpStatusCode.OK);
         response.WriteAsJsonAsync(connectionInfo);
         return response;
     }
     

   Python

   • Aktualisieren Sie negotiate/function.json und kopieren Sie den folgenden JSON-Code.

     {
       "bindings": [
         {
           "authLevel": "anonymous",
           "type": "httpTrigger",
           "direction": "in",
           "name": "req"
         },
         {
           "type": "http",
           "direction": "out",
           "name": "$return"
         },
         {
           "type": "webPubSubConnection",
           "name": "connection",
           "hub": "simplechat",
           "userId": "{headers.x-ms-client-principal-name}",
           "direction": "in"
         }
       ]
     }
     

   • Aktualisieren Sie negotiate/__init__.py und kopieren Sie den folgenden Code.

     import azure.functions as func
     
     
     def main(req: func.HttpRequest, connection) -> func.HttpResponse:
         return func.HttpResponse(connection)
     
     

5. Erstellen Sie eine message-Funktion, um Clientnachrichten über den Dienst zu übertragen.

   func new -n message -t HttpTrigger
   

   JavaScript-Modell v4

   • Aktualisieren Sie src/functions/message.js und kopieren Sie den folgenden Code.

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

   JavaScript-Modell v3

   • Aktualisieren Sie message/function.json und kopieren Sie den folgenden JSON-Code.

     {
       "bindings": [
         {
           "type": "webPubSubTrigger",
           "direction": "in",
           "name": "data",
           "hub": "simplechat",
           "eventName": "message",
           "eventType": "user"
         },
         {
           "type": "webPubSub",
           "name": "actions",
           "hub": "simplechat",
           "direction": "out"
         }
       ]
     }
     

   • Aktualisieren Sie message/index.js und kopieren Sie den folgenden Code.

     module.exports = async function (context, data) {
       context.bindings.actions = {
         actionName: "sendToAll",
         data: `[${context.bindingData.request.connectionContext.userId}] ${data}`,
         dataType: context.bindingData.dataType,
       };
       // UserEventResponse directly return to caller
       var response = {
         data: "[SYSTEM] ack.",
         dataType: "text",
       };
       return response;
     };
     

   C#, prozessintern

   • Aktualisieren Sie message.cs und ersetzen Sie die Run-Funktion durch den folgenden Code.

     [FunctionName("message")]
     public static async Task<UserEventResponse> Run(
         [WebPubSubTrigger("simplechat", WebPubSubEventType.User, "message")] UserEventRequest request,
         BinaryData data,
         WebPubSubDataType dataType,
         [WebPubSub(Hub = "simplechat")] IAsyncCollector<WebPubSubAction> actions)
     {
         await actions.AddAsync(WebPubSubAction.CreateSendToAllAction(
             BinaryData.FromString($"[{request.ConnectionContext.UserId}] {data.ToString()}"),
             dataType));
         return new UserEventResponse
         {
             Data = BinaryData.FromString("[SYSTEM] ack"),
             DataType = WebPubSubDataType.Text
         };
     }
     

   • Fügen Sie im Header die Anweisungen using hinzu, um erforderliche Abhängigkeiten aufzulösen.

     using System.Threading.Tasks;
     using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
     using Microsoft.Azure.WebPubSub.Common;
     

   C#, isolierter Prozess

   • Aktualisieren Sie message.cs und ersetzen Sie die Run-Funktion durch den folgenden Code.

     [Function("message")]
     [WebPubSubOutput(Hub = "simplechat")]
     public SendToAllAction Run(
         [WebPubSubTrigger("simplechat", WebPubSubEventType.User, "message")] UserEventRequest request)
     {
         return new SendToAllAction
         {
             Data = BinaryData.FromString($"[{request.ConnectionContext.UserId}] {request.Data.ToString()}"),
             DataType = request.DataType
         };
     }
     

   Python

   • Aktualisieren Sie message/function.json und kopieren Sie den folgenden JSON-Code.

     {
       "bindings": [
         {
           "type": "webPubSubTrigger",
           "direction": "in",
           "name": "request",
           "hub": "simplechat",
           "eventName": "message",
           "eventType": "user"
         },
         {
           "type": "webPubSub",
           "name": "actions",
           "hub": "simplechat",
           "direction": "out"
         }
       ]
     }
     

   • Aktualisieren Sie message/__init__.py und kopieren Sie den folgenden Code.

     import json
     
     import azure.functions as func
     
     
     def main(request, actions: func.Out[str]) -> None:
         req_json = json.loads(request)
         actions.set(
             json.dumps(
                 {
                     "actionName": "sendToAll",
                     "data": f'[{req_json["connectionContext"]["userId"]}] {req_json["data"]}',
                     "dataType": req_json["dataType"],
                 }
             )
         )
     

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

   JavaScript-Modell v4

   JavaScript-Modell v3

   C#, prozessintern

   Da das C#-Projekt Dateien in einen anderen Ausgabeordner kompiliert, müssen Sie Ihre *.csproj aktualisieren, damit die Inhaltsseite enthalten ist.

   <ItemGroup>
       <None Update="index.html">
           <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
       </None>
   </ItemGroup>
   

   C#, isolierter Prozess

   Da das C#-Projekt Dateien in einen anderen Ausgabeordner kompiliert, müssen Sie Ihre *.csproj aktualisieren, damit die Inhaltsseite enthalten ist.

   <ItemGroup>
       <None Update="index.html">
           <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
       </None>
   </ItemGroup>
   

   Python

Erstellen und Bereitstellen der Azure-Funktions-App

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, falls dies noch nicht geschehen ist:

   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:

   JavaScript-Modell v4

   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.

   JavaScript-Modell v3

   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.

   C#, prozessintern

   az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime dotnet --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>
   

   C#, isolierter Prozess

   az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime dotnet-isolated --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>
   

   Python

   az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime python --runtime-version 3.9 --functions-version 4 --name <FUNCIONAPP_NAME> --os-type linux --storage-account <STORAGE_NAME>
   

5. Stellen Sie das Funktionsprojekts in Azure bereit:

   Nachdem Sie Ihre Funktions-App in Azure erfolgreich erstellt haben, können Sie nun Ihr lokales Funktionsprojekt mit dem Befehl func azure functionapp publish bereitstellen.

   func azure functionapp publish <FUNCIONAPP_NAME>
   

6. Konfigurieren Sie WebPubSubConnectionString für die Funktions-App:

   Suchen Sie zuerst Ihre Web PubSub-Ressource im Azure-Portal, und kopieren Sie die Verbindungszeichenfolge unter Schlüssel. Navigieren Sie anschließend im Azure-Portal unter Einstellungen>Konfiguration zu den Einstellungen für die Funktions-App. Fügen Sie unter Anwendungseinstellungen ein neues Element mit dem Namen und dem Wert WebPubSubConnectionString ihrer Web PubSub-Ressourcenverbindungszeichenfolge hinzu.

Konfigurieren des Web PubSub-Diensts Event Handler

In diesem Beispiel verwenden Sie WebPubSubTrigger, um auf Anforderungen des Diensts für Upstreams zu lauschen. Web PubSub muss also die Endpunktinformationen der Funktion kennen, um die Clientanforderungen senden zu können. Die Azure Functions-App benötigt zudem einen Systemschlüssel für Sicherheit bei erweiterungsspezifischen Webhookmethoden. Nachdem wir im vorherigen Schritt die Funktions-App mit message-Funktionen bereitgestellt haben, können wir den Systemschlüssel abrufen.

Wechseln Sie zum Azure-Portal, suchen Sie Ihre Funktions-App-Ressource, und wählen Sie >>>>webpubsub_extension aus. Kopieren Sie den Wert von <APP_KEY>.

Legen Sie Event Handler im Azure Web PubSub-Dienst fest. Navigieren Sie im Azure-Portal zu Ihrer Web PubSub-Ressource, und wählen Sie > aus. Fügen Sie eine neue Hubeinstellungszuordnung für die einzelne verwendete Funktion hinzu. Ersetzen Sie die <FUNCTIONAPP_NAME> und <APP_KEY> durch Ihre Werte.

• Hub-Name: simplechat
• URL-Vorlage: https://<FUNCTIONAPP_NAME>.azurewebsites.net/runtime/webhooks/webpubsub?code=<APP_KEY>
• Benutzerereignismuster: *
• Systemereignisse: (bei diesem Beispiel keine Konfiguration nötig)

Konfiguration zum Aktivieren der Clientauthentifizierung

Wechseln Sie zum Azure-Portal. Wählen Sie Ihre Funktions-App-Ressource und dann > aus. Klicken Sie auf Add identity provider. Legen Sie die Einstellungen für die App Service-Authentifizierung auf Nicht authentifizierten Zugriff zulassen fest, damit Ihre Client-Indexseite von anonymen Benutzern besucht werden kann, bevor sie zur Authentifizierung weitergeleitet werden. Speichern Sie anschließend.

Hier wählen wir Microsoft als Bezeichner des Anbieters, der x-ms-client-principal-name als userId in der negotiate-Funktion verwendet. Außerdem können Sie andere Identitätsanbieter konfigurieren, indem Sie den Links folgen. Vergessen Sie dabei nicht, den userId-Wert in der negotiate-Funktion entsprechend zu aktualisieren.

• Microsoft Entra ID
• Facebook
• Google
• Twitter

Testen der Anwendung

Nun können Sie Ihre Seite in Ihrer Funktions-App https://<FUNCTIONAPP_NAME>.azurewebsites.net/api/index testen. Siehe die Momentaufnahme.

1. Klicken Sie auf login, um sich zu authentifizieren.
2. Geben Sie die Nachricht in das Eingabefeld ein, um zu chatten.

In der Nachrichtenfunktion senden wir die Nachricht des Anrufers an alle Clients und geben den Anrufer mit der Nachricht [SYSTEM] ack zurück. In der Momentaufnahme des Beispielchats sind also die ersten vier Nachrichten vom aktuellen Client und die letzten beiden Nachrichten von einem anderen Client.

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. Sie können auch das Suchfeld verwenden, um nach dem Namen der Ressourcengruppe zu suchen.

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.

Azure Web PubSub-Bindungen für Azure Functions

Schnellstart: Erstellen eines einfachen Chatrooms mit Azure Web PubSub

Weitere Beispiele für Azure Web PubSub