Zelfstudie: Een serverloze realtime chat-app maken met Azure Functions en de Azure Web PubSub-service

Met de Azure Web PubSub-service kunt u eenvoudig realtime webtoepassingen voor berichten bouwen met behulp van WebSockets en het patroon publish-subscribe. Azure Functions is een serverloos platform waarmee u code kunt uitvoeren zonder een infrastructuur te beheren. In deze zelfstudie leert u hoe u de Azure Web PubSub-service en Azure Functions gebruikt om een serverloze toepassing te bouwen met realtime berichten en het patroon publish-subscribe.

In deze zelfstudie leert u het volgende:

Een serverloze realtime chat-app bouwen
Werken met Web PubSub-functietriggerbindingen en uitvoerbindingen
De functie implementeren in de Azure-functie-app
Azure-verificatie configureren
Web PubSub Event Handler configureren om gebeurtenissen en berichten naar de toepassing te routeren

Belangrijk

Onbewerkte verbindingsreeksen worden in dit artikel alleen weergegeven ter demonstratie.

Een verbindingsreeks bevat de autorisatiegegevens die nodig zijn voor uw toepassing voor toegang tot de Azure Web PubSub-service. De toegangssleutel in de verbindingsreeks is vergelijkbaar met een hoofdwachtwoord voor uw service. Beveilig uw toegangssleutels altijd in productieomgevingen. Gebruik Azure Key Vault om uw sleutels veilig te beheren en te roteren en uw verbinding te beveiligen.WebPubSubServiceClient

Vermijd het distribueren van toegangssleutels naar andere gebruikers, het coderen ervan of het opslaan van ze ergens in tekst zonder opmaak die toegankelijk is voor anderen. Draai uw sleutels als u denkt dat ze mogelijk zijn aangetast.

Vereisten

Een code-editor zoals Visual Studio Code
Node.js versie 18.x of hoger.

Notitie

Zie de documentatie over runtimeversies van Azure Functions voor meer informatie over de ondersteunde versies van Node.js.
Azure Functions Core Tools (v4 of hoger) om Azure Function-apps lokaal uit te voeren en te implementeren in Azure.
De Azure CLI voor het beheren van Azure-resources.

Als u geen Azure-account hebt, maak dan een gratis account aan voordat u begint.

Meld u met uw Azure-account aan bij de Azure-portal op https://portal.azure.com/.

Een Azure Web PubSub-service-exemplaar maken

Uw toepassing maakt verbinding met een Web PubSub-service-exemplaar in Azure.

Selecteer de knop Nieuw in de linkerbovenhoek van Azure Portal. In het Nieuwe scherm typt u Web PubSub in het zoekvak en drukt u op Enter. (U kunt ook zoeken in de Azure Web PubSub vanuit de Web categorie.)
Selecteer Web PubSub in de zoekresultaten en selecteer Maken.

Voer de volgende instellingen in.

Instelling	Voorgestelde waarde	Beschrijving
Resourcenaam	Wereldwijd unieke naam	De wereldwijd unieke naam waarmee uw nieuwe exemplaar van de Web PubSub-service wordt geïdentificeerd. Geldige tekens zijn `a-z`, `A-Z`en `0-9-`.
Abonnement	Uw abonnement	Het Azure-abonnement waaraan deze nieuwe instantie van de Web PubSub-service is gekoppeld.
Resourcegroep	myResourceGroup (mijnHulpbronnenGroep)	Naam voor de nieuwe resourcegroep waarin u uw Web PubSub-service-exemplaar wilt maken.
Plaats	West-VS	Kies een regio bij u in de buurt.
Prijscategorie	Gratis	U kunt de Azure Web PubSub-service eerst gratis uitproberen. Meer informatie over de prijscategorieën van de Azure Web PubSub-service
Aantal eenheden	-	Eenhedentelling geeft aan hoeveel verbindingen uw Web PubSub-service-exemplaar kan accepteren. Elke eenheid ondersteunt maximaal 1000 gelijktijdige verbindingen. Dit kan alleen worden geconfigureerd in de Standard-laag.

Schermopname van het maken van een Azure Web PubSub-exemplaar in de Azure Portal.

Selecteer Maken om te beginnen met het implementeren van het Web PubSub-service-exemplaar.

De functies maken

Zorg ervoor dat Azure Functions Core Tools geïnstalleerd is. Maak vervolgens een lege map voor het project. Voer de opdracht uit onder deze werkmap.

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

Installeer Microsoft.Azure.WebJobs.Extensions.WebPubSub.

Bevestig en werk host.jsonextensionBundle bij naar versie 4.* of hoger om ondersteuning voor Web PubSub te krijgen.

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

Bevestig en werk host.jsonextensionBundle bij naar versie 3.3.0 of hoger om ondersteuning voor Web PubSub te krijgen.

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

Maak een index functie voor het lezen en hosten van een statische webpagina voor clients.

func new -n index -t HttpTrigger

Werk src/functions/index.js de volgende codes bij en kopieer deze.

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

Werk index/function.json de volgende json-codes bij en kopieer deze.

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

Werk index/index.js de volgende codes bij en kopieer deze.

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

Werk index.cs bij en vervang de functie Run door de volgende 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",
    };
}

Werk index.cs bij en vervang de functie Run door de volgende 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;
}

Werk index/function.json de volgende json-codes bij en kopieer deze.

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

Werk __init__.py bij en vervang de functie main door de volgende 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")

Maak een negotiate functie om clients te helpen serviceverbindings-URL met toegangstoken op te halen.

func new -n negotiate -t HttpTrigger

Notitie

In dit voorbeeld gebruiken we Microsoft Entra ID gebruikersidentiteitsheader x-ms-client-principal-name om gegevens op te halenuserId. En dit werkt niet in een lokale functie. U kunt het leeg laten of wijzigen naar andere manieren om userId te verkrijgen of te genereren in de lokale spelmodus. Laat de client bijvoorbeeld een gebruikersnaam typen en deze doorgeven in een query zoals ?user={$username}, wanneer de functie negotiate wordt aangeroepen om de serviceverbindings-URL op te halen. En stel in de negotiate functie userId met waarde {query.user} in.

Werk src/functions/negotiate de volgende codes bij en kopieer deze.

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

Werk negotiate/function.json de volgende json-codes bij en kopieer deze.

{
  "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"
    }
  ]
}

Werk negotiate/index.js de volgende codes bij en kopieer deze.

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

Werk negotiate.cs bij en vervang de functie Run door de volgende 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;
}

Voeg using instructies toe in de header om vereiste afhankelijkheden op te lossen.
```
using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
```

Werk negotiate.cs bij en vervang de functie Run door de volgende 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;
}

Werk negotiate/function.json de volgende json-codes bij en kopieer deze.

{
  "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"
    }
  ]
}

Werk negotiate/__init__.py de volgende codes bij en kopieer deze.

import azure.functions as func


def main(req: func.HttpRequest, connection) -> func.HttpResponse:
    return func.HttpResponse(connection)

Maak een message functie voor het uitzenden van clientberichten via de service.

func new -n message -t HttpTrigger

Werk src/functions/message.js de volgende codes bij en kopieer deze.

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

Werk message/function.json de volgende json-codes bij en kopieer deze.

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

Werk message/index.js de volgende codes bij en kopieer deze.

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

Werk message.cs bij en vervang de functie Run door de volgende 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
    };
}

Voeg using instructies toe in de header om vereiste afhankelijkheden op te lossen.

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

Werk message.cs bij en vervang de functie Run door de volgende 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
    };
}

Werk message/function.json de volgende json-codes bij en kopieer deze.

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

Werk message/__init__.py de volgende codes bij en kopieer deze.

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

Voeg de single page client index.html toe in de hoofdmap van het project en kopieer de inhoud.

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

Omdat het C#-project bestanden compileert naar een andere uitvoermap, moet u uw *.csproj bestand bijwerken om ervoor te zorgen dat de inhoudspagina meegaat.

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

Omdat het C#-project bestanden compileert naar een andere uitvoermap, moet u uw *.csproj bestand bijwerken om ervoor te zorgen dat de inhoudspagina meegaat.

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

De Azure-functie-app maken en implementeren

Voordat u uw functiecode kunt implementeren in Azure, moet u drie resources maken:

Een resourcegroep, wat een logische container is voor gerelateerde resources.
Een opslagaccount dat wordt gebruikt voor het onderhouden van status en andere informatie over uw functies.
Een functie-app, die de omgeving biedt voor het uitvoeren van uw functiecode. Een functie-app wordt toegewezen aan uw lokale functieproject en stelt u in staat om functies te groeperen als een logische eenheid voor eenvoudiger beheer, implementatie en delen van resources.

Gebruik de volgende opdrachten om deze items te maken.

Als u dit nog niet hebt gedaan, meldt u zich aan bij Azure:
```
az login
```
Maak een resourcegroep of u kunt dit overslaan door de Azure Web PubSub-service opnieuw te gebruiken:
```
az group create -n WebPubSubFunction -l <REGION>
```

Maak een algemeen opslagaccount in de resourcegroep en regio:

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

De functie-app maken 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>

Notitie

Raadpleeg de documentatie over runtimeversies van Azure Functions om de parameter in te stellen --runtime-version op ondersteunde waarde.

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>

Notitie

Raadpleeg de documentatie over runtimeversies van Azure Functions om de parameter in te stellen --runtime-version op ondersteunde waarde.

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>

Het functieproject implementeren in Azure:

Nadat u uw functie-app in Azure hebt gemaakt, bent u nu klaar om uw lokale functions-project te implementeren met behulp van de func azure functionapp publish-opdracht .
```
func azure functionapp publish <FUNCIONAPP_NAME>
```
Configureer de WebPubSubConnectionString voor de functie-app.

Onbewerkte verbindingsreeksen worden in dit artikel alleen weergegeven ter demonstratie. Beveilig uw toegangssleutels altijd in productieomgevingen. Gebruik Azure Key Vault om uw sleutels veilig te beheren en te roteren en uw verbinding te beveiligen.WebPubSubServiceClient

Zoek eerst uw Web PubSub-resource uit de Azure-portal en kopieer de verbindingsreeks onder Sleutels. Navigeer vervolgens naar Instellingen voor functie-apps in De Azure-portal -> Instellingen -> Omgevingsvariabelen. En voeg een nieuw item toe onder App-instellingen, waarbij de naam gelijk is aan WebPubSubConnectionString en de waarde de verbindingsreeks is van uw Web PubSub-resource.

De Web PubSub-service configureren `Event Handler`

In dit voorbeeld gebruiken we WebPubSubTrigger om naar upstream-aanvragen van services te luisteren. Web PubSub moet dus weten wat de eindpuntgegevens van de functie zijn om doelclientaanvragen te kunnen verzenden. En Azure Function App vereist een systeemsleutel voor beveiliging met betrekking tot extensiespecifieke webhookmethoden. In de vorige stap nadat we de functie-app met message functies hebben geïmplementeerd, kunnen we de systeemsleutel ophalen.

Ga naar Azure Portal -> Zoek uw functie-app-resource ->App-sleutels ->Systeemsleutels ->webpubsub_extension. Kopieer de waarde als <APP_KEY>.

Schermopname van functiesysteemsleutels ophalen.

Ingesteld Event Handler in de Azure Web PubSub-service. Ga naar Azure Portal -> Zoek uw Web PubSub-resource ->Settings. Voeg een nieuwe hubinstellingentoewijzing toe aan de ene functie die wordt gebruikt. Vervang de <FUNCTIONAPP_NAME> en <APP_KEY> de jouwe.

Hubnaam: simplechat
URL-sjabloon: https://<FUNCTIONAPP_NAME>.azurewebsites.net/runtime/webhooks/webpubsub?code=<APP_KEY>
Gebruikers gebeurtenispatroon: *
Systeemgebeurtenissen: -(Niet nodig om in dit voorbeeld te configureren)

Schermopname van het instellen van de gebeurtenis-handler.

Configureren om clientverificatie in te schakelen

Ga naar Azure Portal -> Zoek uw functie-app-resource -> Verificatie. Klik op Add identity provider. Stel app Service-verificatie-instellingen in op Niet-geverifieerde toegang toestaan, zodat uw clientindexpagina kan worden bezocht door anonieme gebruikers voordat ze worden omgeleid naar verificatie. Selecteer vervolgens Opslaan.

Hier kiezen we Microsoft als identificatieprovider, die x-ms-client-principal-name gebruikt als userId in de negotiate functie. Bovendien kunt u andere id-providers configureren door de koppelingen te volgen en vergeet niet de userId waarde in negotiate functie dienovereenkomstig bij te werken.

De toepassing uitproberen

Nu kunt u uw pagina testen vanuit uw functie-app: https://<FUNCTIONAPP_NAME>.azurewebsites.net/api/index. Zie momentopname.

Klik login hier om uzelf te autoreren.
Typ een bericht in het invoervak om te chatten.

In de berichtfunctie verzenden we het bericht van de beller naar alle clients en retourneren we de beller met bericht [SYSTEM] ack. Zodat we kunnen weten in een voorbeeld van een chatmomentopname, zijn de eerste vier berichten afkomstig van de huidige client en de laatste twee berichten zijn van een andere client.

Schermopname van een chatvoorbeeld.

Middelen opschonen

Als u deze app niet wilt blijven gebruiken, verwijdert u alle resources die door dit document zijn gemaakt met de volgende stappen, zodat er geen kosten in rekening worden gebracht:

Selecteer links in de Azure-portal de optie Resourcegroepen en selecteer vervolgens de resourcegroep die u hebt gemaakt. U kunt het zoekvak gebruiken om in plaats daarvan de resourcegroep op naam te vinden.
Selecteer in het venster dat wordt geopend de resourcegroep en selecteer vervolgens Resourcegroep verwijderen.
Typ in het nieuwe venster de naam van de resourcegroep die u wilt verwijderen en selecteer vervolgens Verwijderen.

Volgende stappen

In deze quickstart hebt u geleerd hoe u een serverloze chattoepassing uitvoert. U kunt nu beginnen met het bouwen van uw eigen toepassing.

Azure Web PubSub-bindingen voor Azure Functions

Snel aan de slag: Een eenvoudige chatroom maken met Azure Web PubSub

Meer Voorbeelden van Azure Web PubSub verkennen

Feedback

Is deze pagina nuttig?

Last updated on 2024-12-12

Delen via

Zelfstudie: Een serverloze realtime chat-app maken met Azure Functions en de Azure Web PubSub-service

Vereisten

Aanmelden bij Azure

Een Azure Web PubSub-service-exemplaar maken

De functies maken

De Azure-functie-app maken en implementeren

De Web PubSub-service configureren Event Handler

Configureren om clientverificatie in te schakelen

De toepassing uitproberen

Middelen opschonen

Volgende stappen

Feedback

Aanvullende resources

De Web PubSub-service configureren `Event Handler`