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

Artikel
04/16/2024

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

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.

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.

Screenshot: Erstellen der Azure Web PubSub-Instanz im Portal.

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

Erstellen der Funktionen

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.
```
func init --worker-runtime javascript --model V4
```
```
func init --worker-runtime javascript --model V3
```
```
func init --worker-runtime dotnet
```
```
func init --worker-runtime dotnet-isolated
```
```
func init --worker-runtime python --model V1
```

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

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

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

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

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

{
  "extensionBundle": {
    "id": "Microsoft.Azure.Functions.ExtensionBundle",
    "version": "[3.3.*, 4.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 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();
  });
};

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

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

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

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.

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

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();
};

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

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

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)

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

func new -n message -t HttpTrigger

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

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

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;

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

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

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>

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>

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>

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.

Melden Sie sich bei Azure an, falls dies noch nicht geschehen ist:
```
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.

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.

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

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

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>

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

Screenshot des Abrufens der Systemschlüssel der Funktion.

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)

Screenshot: Festlegen des Ereignishandlers

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.

Testen der Anwendung

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

Klicken Sie auf login, um sich zu authentifizieren.
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.

Screenshot des Chatbeispiels.

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

Azure Web PubSub-Bindungen für Azure Functions

Schnellstart: Erstellen eines einfachen Chatrooms mit Azure Web PubSub

Weitere Beispiele für Azure Web PubSub

Freigeben über

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

Voraussetzungen

Erstellen einer Azure Web PubSub-Dienstinstanz

Erstellen der Funktionen

Erstellen und Bereitstellen der Azure-Funktions-App

Konfigurieren des Web PubSub-Diensts `Event Handler`

Konfiguration zum Aktivieren der Clientauthentifizierung

Testen der Anwendung

Bereinigen von Ressourcen

Nächste Schritte

Feedback

Zusätzliche Ressourcen

Freigeben über

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

Voraussetzungen

Anmelden bei Azure

Erstellen einer Azure Web PubSub-Dienstinstanz

Erstellen der Funktionen

Erstellen und Bereitstellen der Azure-Funktions-App

Konfigurieren des Web PubSub-Diensts Event Handler

Konfiguration zum Aktivieren der Clientauthentifizierung

Testen der Anwendung

Bereinigen von Ressourcen

Nächste Schritte

Feedback

Zusätzliche Ressourcen

Konfigurieren des Web PubSub-Diensts `Event Handler`