Självstudie: Skapa en serverlös meddelandeapp med Azure Functions och Azure Web PubSub-tjänsten

Artikel
01/12/2024

Tjänsten Azure Web PubSub hjälper dig att skapa webbprogram för meddelanden i realtid med hjälp av WebSockets. Azure Functions är en serverlös plattform som gör att du kan köra din kod utan att behöva hantera någon infrastruktur. I den här självstudien lär du dig hur du använder Tjänsten Azure Web PubSub och Azure Functions för att skapa ett serverlöst program med meddelanden i realtid under meddelandescenarier.

I den här självstudien lär du dig att:

Skapa en serverlös meddelandeapp
Arbeta med indata- och utdatabindningar för Web PubSub-funktioner
Kör exempelfunktionerna lokalt
Distribuera funktionen till Azure-funktionsappen

Förutsättningar

En kodredigerare, till exempel Visual Studio Code
Node.js, version 18.x eller senare.

Kommentar

Mer information om de versioner av Node.js som stöds finns i dokumentationen om Azure Functions-körningsversioner.
Azure Functions Core Tools (V4 eller senare rekommenderas) för att köra Azure Function-appar lokalt och distribuera till Azure.
Azure CLI för att hantera Azure-resurser.

Om du inte har en Azure-prenumeration skapar du ett kostnadsfritt Azure-konto innan du börjar.

Logga in på Azure Portal på https://portal.azure.com/ med ditt Azure-konto.

Skapa en Azure Web PubSub-tjänstinstans

Ditt program ansluter till en Web PubSub-tjänstinstans i Azure.

Välj knappen Nytt högst upp till vänster i Azure-portalen. På skärmen Nytt skriver du Web PubSub i sökrutan och trycker på Retur. (Du kan också söka i Azure Web PubSub från Web kategorin.)
Välj Web PubSub i sökresultatet och välj sedan Skapa.

Ange följande inställningar.

Inställning	Föreslaget värde	beskrivning
Resursnamn	Globalt unikt namn	Det globalt unika namn som identifierar din nya Web PubSub-tjänstinstans. Giltiga tecken är `a-z`, `A-Z`, `0-9`och `-`.
Abonnemang	Din prenumeration	Den Azure-prenumeration under vilken den här nya Web PubSub-tjänstinstansen skapas.
Resursgrupp	myResourceGroup	Namn på den nya resursgrupp där du vill skapa din Web PubSub-tjänstinstans.
Plats	Västra USA	Välj en region nära dig.
Prisnivå	Kostnadsfritt	Du kan prova tjänsten Azure Web PubSub kostnadsfritt. Läs mer om prisnivåer för Azure Web PubSub-tjänsten
Antal enheter	-	Antal enheter anger hur många anslutningar din Web PubSub-tjänstinstans kan acceptera. Varje enhet stöder högst 1 000 samtidiga anslutningar. Det kan bara konfigureras på Standard-nivån.

Screenshot of creating the Azure Web PubSub instance in portal.

Välj Skapa för att börja distribuera instansen av Web PubSub-tjänsten.

Skapa och köra funktionerna lokalt

Kontrollera att du har Azure Functions Core Tools installerat. Skapa nu en tom katalog för projektet. Kör kommandot under den här arbetskatalogen. Använd något av de angivna alternativen nedan.
```
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
```
Följ stegen för att installera Microsoft.Azure.WebJobs.Extensions.WebPubSub.
Bekräfta eller uppdatera host.jsontilläggetBundle till version 4.* eller senare för att få support för Web PubSub. Om du vill uppdatera host.jsonöppnar du filen i redigeraren och ersätter sedan det befintliga versionstilläggetBundle till version 4.* eller senare.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[4.*, 5.0.0)"
    }
}
```
Bekräfta eller uppdatera host.jsontilläggetBundle till version 3.3.0 eller senare för att få support för Web PubSub. Om du vill uppdatera host.jsonöppnar du filen i redigeraren och ersätter sedan det befintliga versionstilläggetBundle till version 3.3.0 eller senare.
```
{
    "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
```
Uppdatera host.jsontilläggetBundle till version 3.3.0 eller senare för att få support för Web PubSub. Om du vill uppdatera host.jsonöppnar du filen i redigeraren och ersätter sedan det befintliga versionstilläggetBundle till version 3.3.0 eller senare.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[3.3.*, 4.0.0)"
    }
}
```

Skapa en index funktion för att läsa och vara värd för en statisk webbsida för klienter.

func new -n index -t HttpTrigger

Uppdatera src/functions/index.js och kopiera följande koder.

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

Uppdatera index/function.json och kopiera följande json-koder.

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

Uppdatera index/index.js och kopiera följande koder.

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

Uppdatera index.cs och ersätt Run funktionen med följande koder.

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

Uppdatera index.cs och ersätt Run funktionen med följande koder.

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

Uppdatera index/function.json och kopiera följande json-koder.

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

Uppdatera index/__init__.py och kopiera följande koder.

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

Skapa en negotiate funktion som hjälper klienter att hämta url:en för tjänstanslutning med åtkomsttoken.

func new -n negotiate -t HttpTrigger

Uppdatera src/functions/negotiate.js och kopiera följande koder.

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

Uppdatera negotiate/function.json och kopiera följande json-koder.

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    },
    {
      "type": "webPubSubConnection",
      "name": "connection",
      "hub": "notification",
      "direction": "in"
    }
  ]
}

Skapa en mapp som förhandlar om och uppdaterar negotiate/index.js och kopierar följande koder.

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

Uppdatera negotiate.cs och ersätt Run funktionen med följande koder.

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

Lägg till using instruktioner i huvudet för att lösa nödvändiga beroenden.
```
using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
```

Uppdatera negotiate.cs och ersätt Run funktionen med följande koder.

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

Skapa en mapp som förhandlar om och uppdaterar negotiate/function.json och kopierar följande json-koder.

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

Uppdatera negotiate/__init__.py och kopiera följande koder.

import logging

import azure.functions as func


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

Skapa en notification funktion för att generera meddelanden med TimerTrigger.

func new -n notification -t TimerTrigger

Uppdatera src/functions/notification.js och kopiera följande koder.

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

Uppdatera notification/function.json och kopiera följande json-koder.

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

Uppdatera notification/index.js och kopiera följande koder.

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

Uppdatera notification.cs och ersätt Run funktionen med följande koder.

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

Lägg till using instruktioner i huvudet för att lösa nödvändiga beroenden.

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

Uppdatera notification.cs och ersätt Run funktionen med följande koder.

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

Skapa ett mappmeddelande och uppdatera notification/function.json och kopiera följande json-koder.

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

Uppdatera notification/__init__.py och kopiera följande koder.

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

Lägg till klientens enstaka sida index.html i projektets rotmapp och kopiera innehåll.

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

Eftersom C#-projektet kompilerar filer till en annan utdatamapp måste du uppdatera din *.csproj för att göra så att innehållssidan går med den.

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

Eftersom C#-projektet kompilerar filer till en annan utdatamapp måste du uppdatera din *.csproj för att göra så att innehållssidan går med den.

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

Konfigurera och köra Azure Functions-appen
- Öppna Azure-portalen i webbläsaren och bekräfta att den Web PubSub Service-instans som du distribuerade tidigare har skapats. Navigera till instansen.
- Välj Nycklar och kopiera ut anslutningssträng.
Kör kommandot i funktionsmappen för att ange tjänsten anslutningssträng. Ersätt <connection-string> med ditt värde efter behov.
```
func settings add WebPubSubConnectionString "<connection-string>"
```
Kommentar

TimerTrigger som används i exemplet är beroende av Azure Storage, men du kan använda den lokala lagringsemulatorn när funktionen körs lokalt. Om du får ett felmeddelande som There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid.måste du ladda ned och aktivera Lagringsemulatorn.

Nu kan du köra din lokala funktion med kommando.
```
func start --port 7071
```
Och genom att kontrollera loggarna som körs kan du besöka den lokala värdens statiska sida genom att besöka: http://localhost:7071/api/index.

Kommentar

Vissa browers omdirigeras automatiskt till https som leder till fel URL. Föreslå att du använder Edge och dubbelkollar URL:en om renderingen inte lyckas.

Distribuera funktionsapp till Azure

Innan du kan distribuera funktionskoden till Azure måste du skapa tre resurser:

En resursgrupp, som är en logisk container för relaterade resurser.
Ett lagringskonto som används för att underhålla tillstånd och annan information om dina funktioner.
En funktionsapp som tillhandahåller miljön för att köra funktionskoden. En funktionsapp mappar till ditt lokala funktionsprojekt och låter dig gruppera funktioner som en logisk enhet för enklare hantering, distribution och delning av resurser.

Använd följande kommandon för att skapa dessa objekt.

Logga in på Azure:
```
az login
```
Skapa en resursgrupp eller så kan du hoppa över genom att återanvända en av Azure Web PubSub-tjänsten:
```
az group create -n WebPubSubFunction -l <REGION>
```

Skapa ett allmänt lagringskonto i din resursgrupp och region:

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

Skapa funktionsappen i 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>

Kommentar

Kontrollera dokumentationen för Azure Functions-körningsversioner för att ange --runtime-version parametern till det värde som stöds.

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>

Kommentar

Kontrollera dokumentationen för Azure Functions-körningsversioner för att ange --runtime-version parametern till det värde som stöds.

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>

Distribuera funktionsprojektet till Azure:

När du har skapat din funktionsapp i Azure är du nu redo att distribuera ditt lokala funktionsprojekt med hjälp av publiceringskommandot func azure functionapp .
```
func azure functionapp publish <FUNCIONAPP_NAME> --publish-local-settings
```
Kommentar

Här distribuerar vi lokala inställningar local.settings.json tillsammans med kommandoparametern --publish-local-settings. Om du använder Microsoft Azure Storage-emulatorn kan du skriva no för att hoppa över att skriva över det här värdet i Azure genom att följa promptmeddelandet: App setting AzureWebJobsStorage is different between azure and local.settings.json, Would you like to overwrite value in azure? [yes/no/show]. Dessutom kan du uppdatera inställningarna för funktionsappen i Azure Portal ->Inställningar ->Configuration.
Nu kan du kontrollera din webbplats från Azure-funktionsappen genom att gå till URL: https://<FUNCIONAPP_NAME>.azurewebsites.net/api/index.

Rensa resurser

Om du inte kommer att fortsätta att använda den här appen tar du bort alla resurser som skapats av det här dokumentet med följande steg så att du inte debiteras några avgifter:

Välj Resursgrupper i Azure Portal längst till vänster och välj sedan den resursgrupp du skapat. Använd sökrutan för att hitta resursgruppen efter dess namn i stället.
I fönstret som öppnas väljer du resursgruppen och väljer sedan Ta bort resursgrupp.
I det nya fönstret skriver du namnet på resursgruppen som ska tas bort och väljer sedan Ta bort.

Nästa steg

I den här snabbstarten har du lärt dig hur du kör ett serverlöst chattprogram. Nu kan du börja skapa ett eget program.

Självstudie: Skapa ett enkelt chattrum med Azure Web PubSub

Azure Web PubSub-bindningar för Azure Functions

Utforska fler Azure Web PubSub-exempel