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

Artikel
01/12/2024

Met de Azure Web PubSub-service kunt u realtime webtoepassingen voor berichten bouwen met behulp van WebSockets. 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 onder meldingsscenario's.

In deze zelfstudie leert u het volgende:

Een serverloze meldings-app bouwen
Werken met invoer- en uitvoerbindingen van de Web PubSub-functie
De voorbeeldfuncties lokaal uitvoeren
De functie implementeren in de Azure-functie-app

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 een hogere voorkeur) 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.

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. 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.)
Selecteer Web PubSub in de zoekresultaten en selecteer Vervolgens 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 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	Beschikbaar	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.

Screenshot of creating the Azure Web PubSub instance in portal.

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

De functies lokaal maken en uitvoeren

Zorg ervoor dat Azure Functions Core Tools is geïnstalleerd. Maak nu een lege map voor het project. Voer de opdracht uit onder deze werkmap. Gebruik een van de onderstaande opties.
```
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
```
Volg de stappen om te installeren Microsoft.Azure.WebJobs.Extensions.WebPubSub.
Bevestig of werk host.jsonextensionBundle bij naar versie 4.* of hoger om ondersteuning voor Web PubSub te krijgen. Als u het host.jsonbestand wilt bijwerken, opent u het bestand in de editor en vervangt u de bestaande versieextensieBundle naar versie 4.* of hoger.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[4.*, 5.0.0)"
    }
}
```
Bevestig of werk host.jsonextensionBundle bij naar versie 3.3.0 of hoger om ondersteuning voor Web PubSub te krijgen. Als u het host.jsonbestand wilt bijwerken, opent u het bestand in de editor en vervangt u de bestaande versieextensieBundle naar versie 3.3.0 of hoger.
```
{
    "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
```
Werk host.jsonextensionBundle bij naar versie 3.3.0 of hoger om ondersteuning voor Web PubSub te krijgen. Als u het host.jsonbestand wilt bijwerken, opent u het bestand in de editor en vervangt u de bestaande versieextensieBundle naar versie 3.3.0 of hoger.
```
{
    "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 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",
    };
}

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

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

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

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

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

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

const { app, input } = require('@azure/functions');

const connection = input.generic({
    type: 'webPubSubConnection',
    name: 'connection',
    hub: 'notification'
});

app.http('negotiate', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    extraInputs: [connection],
    handler: async (request, context) => {
        return { body: JSON.stringify(context.extraInputs.get('connection')) };
    },
});

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": "notification",
      "direction": "in"
    }
  ]
}

Maak een maponderhandeling en 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 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 = "notification")] 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 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 = "notification")] WebPubSubConnection connectionInfo)
{
    var response = req.CreateResponse(HttpStatusCode.OK);
    response.WriteAsJsonAsync(connectionInfo);
    return response;
}

Maak een maponderhandeling en negotiate/function.json werk de volgende json-codes bij en kopieer deze.

{
  "scriptFile": "__init__.py",
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "$return"
    },
    {
      "type": "webPubSubConnection",
      "name": "connection",
      "hub": "notification",
      "direction": "in"
    }
  ]
}

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

import logging

import azure.functions as func


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

Maak een notification functie voor het genereren van meldingen met TimerTrigger.

func new -n notification -t TimerTrigger

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

const { app, output } = require('@azure/functions');

const wpsAction = output.generic({
    type: 'webPubSub',
    name: 'action',
    hub: 'notification'
});

app.timer('notification', {
    schedule: "*/10 * * * * *",
    extraOutputs: [wpsAction],
    handler: (myTimer, context) => {
        context.extraOutputs.set(wpsAction, {
            actionName: 'sendToAll',
            data: `[DateTime: ${new Date()}] Temperature: ${getValue(22, 1)}\xB0C, Humidity: ${getValue(40, 2)}%`,
            dataType: 'text',
        });
    },
});

function getValue(baseNum, floatNum) {
    return (baseNum + 2 * floatNum * (Math.random() - 0.5)).toFixed(3);
}

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

{
  "bindings": [
    {
      "name": "myTimer",
      "type": "timerTrigger",
      "direction": "in",
      "schedule": "*/10 * * * * *"
    },
    {
      "type": "webPubSub",
      "name": "actions",
      "hub": "notification",
      "direction": "out"
    }
  ]
}

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

module.exports = function (context, myTimer) {
    context.bindings.actions = {
        "actionName": "sendToAll",
        "data": `[DateTime: ${new Date()}] Temperature: ${getValue(22, 1)}\xB0C, Humidity: ${getValue(40, 2)}%`,
        "dataType": "text"
    }
    context.done();
};

function getValue(baseNum, floatNum) {
    return (baseNum + 2 * floatNum * (Math.random() - 0.5)).toFixed(3);
}

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

[FunctionName("notification")]
public static async Task Run([TimerTrigger("*/10 * * * * *")]TimerInfo myTimer, ILogger log,
    [WebPubSub(Hub = "notification")] IAsyncCollector<WebPubSubAction> actions)
{
    await actions.AddAsync(new SendToAllAction
    {
        Data = BinaryData.FromString($"[DateTime: {DateTime.Now}] Temperature: {GetValue(23, 1)}{'\xB0'}C, Humidity: {GetValue(40, 2)}%"),
        DataType = WebPubSubDataType.Text
    });
}

private static string GetValue(double baseNum, double floatNum)
{
    var rng = new Random();
    var value = baseNum + floatNum * 2 * (rng.NextDouble() - 0.5);
    return value.ToString("0.000");
}

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 notification.cs de functie bij en vervang deze door Run de volgende codes.

[Function("notification")]
[WebPubSubOutput(Hub = "notification")]
public SendToAllAction Run([TimerTrigger("*/10 * * * * *")] MyInfo myTimer)
{
    return new SendToAllAction
    {
        Data = BinaryData.FromString($"[DateTime: {DateTime.Now}] Temperature: {GetValue(23, 1)}{'\xB0'}C, Humidity: {GetValue(40, 2)}%"),
        DataType = WebPubSubDataType.Text
    };
}

private static string GetValue(double baseNum, double floatNum)
{
    var rng = new Random();
    var value = baseNum + floatNum * 2 * (rng.NextDouble() - 0.5);
    return value.ToString("0.000");
}

Maak een mapmelding en werk notification/function.json de volgende json-codes bij en kopieer deze.

{
  "scriptFile": "__init__.py",
  "bindings": [
    {
      "name": "myTimer",
      "type": "timerTrigger",
      "direction": "in",
      "schedule": "*/10 * * * * *"
    },
    {
      "type": "webPubSub",
      "name": "actions",
      "hub": "notification",
      "direction": "out"
    }
  ]
}

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

import datetime
import random
import json

import azure.functions as func

def main(myTimer: func.TimerRequest, actions: func.Out[str]) -> None:
    time = datetime.datetime.now().strftime("%A %d-%b-%Y %H:%M:%S")
    actions.set(json.dumps({
        'actionName': 'sendToAll',
        'data': '\x5B DateTime: {0} \x5D Temperature: {1:.3f} \xB0C, Humidity: {2:.3f} \x25'.format(time, 22 + 2 * (random.random() - 0.5), 44 + 4 * (random.random() - 0.5)),
        'dataType': 'text'
    }))

Voeg de client met één pagina index.html toe in de hoofdmap van het project en kopieer inhoud.

<html>
    <body>
    <h1>Azure Web PubSub Notification</h1>
    <div id="messages"></div>
    <script>
        (async function () {
            let messages = document.querySelector('#messages');
            let res = await fetch(`${window.location.origin}/api/negotiate`);
            let url = await res.json();
            let ws = new WebSocket(url.url);
            ws.onopen = () => console.log('connected');

            ws.onmessage = event => {
                let m = document.createElement('p');
                m.innerText = event.data;
                messages.appendChild(m);
            };
        })();
    </script>
    </body>
</html>

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 Functions-app uitvoeren
- Open de Azure-portal in de browser en controleer of het Web PubSub Service-exemplaar dat u eerder hebt geïmplementeerd, is gemaakt. Navigeer naar het exemplaar.
- Selecteer Sleutels en kopieer de verbindingsreeks.
Voer de opdracht uit in de functiemap om de service-verbindingsreeks in te stellen. Vervang <connection-string> indien nodig door uw waarde.
```
func settings add WebPubSubConnectionString "<connection-string>"
```
Notitie

TimerTrigger wordt gebruikt in het voorbeeld is afhankelijk van Azure Storage, maar u kunt lokale opslagemulator gebruiken wanneer de functie lokaal wordt uitgevoerd. Als er een fout optreedt, There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid.moet u Opslagemulator downloaden en inschakelen.

Nu kunt u uw lokale functie uitvoeren op opdracht.
```
func start --port 7071
```
En als u de actieve logboeken controleert, kunt u de statische pagina van uw lokale host bezoeken door naar: http://localhost:7071/api/index.

Notitie

Sommige wenkbrauwen leiden automatisch om naar https die url. Stel voor om de URL te gebruiken Edge en controleer de URL als de rendering niet is gelukt.

Functie-app implementeren in Azure

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.

Meld u 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:

Zodra u uw functie-app in Azure hebt gemaakt, bent u klaar om uw lokale functions-project te implementeren met behulp van de func azure functionapp publish-opdracht .
```
func azure functionapp publish <FUNCIONAPP_NAME> --publish-local-settings
```
Notitie

Hier implementeren we lokale instellingen local.settings.json samen met de opdrachtparameter --publish-local-settings. Als u Microsoft Azure Storage Emulator gebruikt, kunt u typen no om deze waarde over te slaan in Azure volgens het promptbericht: App setting AzureWebJobsStorage is different between azure and local.settings.json, Would you like to overwrite value in azure? [yes/no/show] Bovendien kunt u instellingen voor functie-apps bijwerken in Azure Portal ->Instellingen ->Configuration.
U kunt uw site nu controleren vanuit de Azure-functie-app door naar de URL te navigeren: https://<FUNCIONAPP_NAME>.azurewebsites.net/api/index.

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:

Selecteer links in de Azure-portal de optie Resourcegroepen en selecteer vervolgens de resourcegroep die u hebt gemaakt. Gebruik het zoekvak om in plaats daarvan de resourcegroep op naam te zoeken.
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.

Zelfstudie: Een eenvoudige chatroom maken met Azure Web PubSub

Azure Web PubSub-bindingen voor Azure Functions

Meer Voorbeelden van Azure Web PubSub verkennen

Delen via

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

Vereisten

Een Azure Web PubSub-service-exemplaar maken

De functies lokaal maken en uitvoeren

Functie-app implementeren in Azure

Resources opschonen

Volgende stappen

Feedback

Feedback

Aanvullende resources

Delen via

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

Vereisten

Aanmelden bij Azure

Een Azure Web PubSub-service-exemplaar maken

De functies lokaal maken en uitvoeren

Functie-app implementeren in Azure

Resources opschonen

Volgende stappen

Feedback

Feedback

Aanvullende resources