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

Vereisten

JavaScript Model v4

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

JavaScript Model v3

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

C# in-process

• Een code-editor, zoals Visual Studio Code.

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

C# geïsoleerd proces

• Een code-editor, zoals Visual Studio Code.

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

Python

• Een code-editor, zoals Visual Studio Code.

• Python (v3.7+). Bekijk ondersteunde Python-versies.

• 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-abonnement hebt, kunt u een gratis Azure-account maken voordat u begint.

Aanmelden bij Azure

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.

1. Selecteer de knop Nieuw in de linkerbovenhoek van Azure Portal. Typ In het scherm Nieuw Web PubSub in het zoekvak en druk op Enter. (U kunt ook zoeken in de Azure Web PubSub vanuit de Web categorie.)

   

2. Selecteer Web PubSub in de zoekresultaten en selecteer Vervolgens Maken.

3. 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-Zen 0-9-.
   Abonnement	Uw abonnement	Het Azure-abonnement waaronder dit nieuwe exemplaar van de Web PubSub-service wordt gemaakt.
   Resourcegroep	myResourceGroup	Naam voor de nieuwe resourcegroep waarin u uw Web PubSub-service-exemplaar wilt maken.
   Location	VS - west	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	-	Aantal eenheden geeft aan hoeveel verbindingen uw Exemplaar van de Web PubSub-service kan accepteren. Elke eenheid ondersteunt maximaal 1000 gelijktijdige verbindingen. Dit kan alleen worden geconfigureerd in de Standard-laag.

   

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

De functies maken

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

   JavaScript Model v4

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

   JavaScript Model v3

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

   C# in-process

   func init --worker-runtime dotnet
   

   C# geïsoleerd proces

   func init --worker-runtime dotnet-isolated
   

   Python

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

2. Installeer Microsoft.Azure.WebJobs.Extensions.WebPubSub.

   JavaScript Model v4

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

   JavaScript Model v3

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

   C# in-process

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

   C# geïsoleerd proces

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

   Python

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

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

   func new -n index -t HttpTrigger
   

   JavaScript Model v4

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

   JavaScript Model v3

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

   C# in-process

   • Werk index.cs de functie bij en vervang deze door Run de volgende codes.

     [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# geïsoleerd proces

   • Werk index.cs de functie bij en vervang deze door Run de volgende codes.

     [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

   • 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 de functie bij en vervang deze door main de volgende codes.

     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. 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 de header van de gebruikersidentiteit x-ms-client-principal-name van Microsoft Entra ID om op te halenuserId. En dit werkt niet in een lokale functie. U kunt het leeg maken of wijzigen in andere manieren om te verkrijgen of te genereren userId wanneer u lokaal speelt. Laat de client bijvoorbeeld een gebruikersnaam typen en deze doorgeven in een query, bijvoorbeeld ?user={$username} wanneer de aanroepfunctie negotiate om de serviceverbindings-URL op te halen. En stel in de negotiate functie userId een waarde {query.user}in.

   JavaScript Model v4

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

   JavaScript Model v3

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

   C# in-process

   • Werk negotiate.cs de functie bij en vervang deze door Run de volgende codes.

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

   C# geïsoleerd proces

   • Werk negotiate.cs de functie bij en vervang deze door Run de volgende codes.

     [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

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

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

   func new -n message -t HttpTrigger
   

   JavaScript Model v4

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

   JavaScript Model v3

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

   C# in-process

   • Werk message.cs de functie bij en vervang deze door Run de volgende codes.

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

   C# geïsoleerd proces

   • Werk message.cs de functie bij en vervang deze door Run de volgende codes.

     [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

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

6. Voeg de client met één pagina index.html toe in de hoofdmap van het project en kopieer 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>
   

   JavaScript Model v4

   JavaScript Model v3

   C# in-process

   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>
   

   C# geïsoleerd proces

   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>
   

   Python

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.

1. Als u dit nog niet hebt gedaan, meldt u zich aan bij Azure:

   az login
   

2. Maak een resourcegroep of u kunt dit overslaan door de Azure Web PubSub-service opnieuw te gebruiken:

   az group create -n WebPubSubFunction -l <REGION>
   

3. Maak een algemeen opslagaccount in de resourcegroep en regio:

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

4. De functie-app maken in Azure:

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

   Notitie

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

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

   Notitie

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

   C# in-process

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

   C# geïsoleerd proces

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

6. Configureer de WebPubSubConnectionString functie-app:

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

De Web PubSub-service configureren Event Handler

In dit voorbeeld wordt gebruikgemaakt WebPubSubTrigger van het luisteren naar upstream-aanvragen van services. 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>.

Ingesteld Event Handler in de Azure Web PubSub-service. Ga naar Azure Portal :> zoek uw Web PubSub-resource ->Instellingen. 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)

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 Microsoft we als identificatieprovider, die wordt gebruikt x-ms-client-principal-name 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.

• Microsoft Entra ID
• Facebook
• Google
• Twitter

De toepassing uitproberen

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

1. Klik login hier om uzelf te autoreren.
2. 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.

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

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

2. Selecteer in het venster dat wordt geopend de resourcegroep en selecteer vervolgens Resourcegroep verwijderen.

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