Kurz: Vytvoření bezserverové aplikace pro oznámení pomocí azure Functions a služby Azure Web PubSub

Článek
01/12/2024

Služba Azure Web PubSub pomáhá vytvářet webové aplikace pro zasílání zpráv v reálném čase pomocí webSocket. Řešení Azure Functions představuje bezserverovou platformu, která umožňuje spouštět kód, aniž byste museli spravovat nějakou infrastrukturu. V tomto kurzu se naučíte používat službu Azure Web PubSub a Azure Functions k vytvoření bezserverové aplikace s zasíláním zpráv v reálném čase v rámci scénářů oznámení.

V tomto kurzu se naučíte:

Vytvoření aplikace oznámení bez serveru
Práce se vstupními a výstupními vazbami funkce Web PubSub
Místní spuštění ukázkových funkcí
Nasazení funkce do aplikace Funkcí Azure

Požadavky

Editor kódu, například Visual Studio Code
Node.js, verze 18.x nebo vyšší.

Poznámka:

Další informace o podporovaných verzích Node.js najdete v dokumentaci k verzím modulu runtime služby Azure Functions.
Azure Functions Core Tools (upřednostňovaná verze 4 nebo vyšší) pro místní spouštění aplikací Funkcí Azure a jejich nasazení do Azure.
Azure CLI pro správu prostředků Azure.

Pokud ještě nemáte předplatné Azure, vytvořte si bezplatný účet Azure před tím, než začnete.

Přihlaste se pomocí svého účtu Azure k webu Azure Portal na adrese https://portal.azure.com/.

Vytvoření instance služby Azure Web PubSub

Vaše aplikace se připojí k instanci služby Web PubSub v Azure.

Vyberte tlačítko Nový v levém horním rohu portálu Azure Portal. Na obrazovce Nový zadejte do vyhledávacího pole web pubSub a stiskněte enter. (Můžete také vyhledat podsít webu Azure z Web kategorie.)
Ve výsledcích hledání vyberte Web PubSub a pak vyberte Vytvořit.

Zadejte následující nastavení.

Nastavení	Navrhovaná hodnota	Popis
Název prostředku	Globálně jedinečný název	Globálně jedinečný název, který identifikuje novou instanci služby Web PubSub. Platné znaky jsou `a-z`, `A-Z`, `0-9`a `-`.
Předplatné	Vaše předplatné	Předplatné Azure, ve kterém se vytvoří tato nová instance služby Web PubSub.
Skupina prostředků	myResourceGroup	Název nové skupiny prostředků, ve které chcete vytvořit instanci služby Web PubSub.
Místo	USA – západ	Zvolte oblast ve své blízkosti.
Cenová úroveň	Bezplatný	Službu Azure Web PubSub si můžete vyzkoušet zdarma. Další informace o cenových úrovních služby Azure Web PubSub
Počet jednotek	-	Počet jednotek určuje, kolik připojení může instance služby Web PubSub přijmout. Každá jednotka podporuje maximálně 1 000 souběžných připojení. To lze nakonfigurovat jen na úrovni Standard.

Screenshot of creating the Azure Web PubSub instance in portal.

Výběrem možnosti Vytvořit spusťte nasazení instance služby Web PubSub.

Místní vytvoření a spuštění funkcí

Ujistěte se, že máte nainstalované nástroje Azure Functions Core Tools . Teď vytvořte prázdný adresář pro projekt. Spusťte příkaz pod tímto pracovním adresářem. Použijte jednu z uvedených možností níže.
```
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
```
Postupujte podle pokynů k instalaci Microsoft.Azure.WebJobs.Extensions.WebPubSub.
Pokud chcete získat podporu Web PubSub, potvrďte nebo aktualizujte host.jsonrozšířeníBundle na verzi 4.* nebo novější. Chcete-li host.jsonaktualizovat soubor , otevřete soubor v editoru a pak nahraďte stávající verzi ExtensionBundle na verzi 4.* nebo novější.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[4.*, 5.0.0)"
    }
}
```
Potvrďte nebo aktualizujte host.jsonextensionBundle na verzi 3.3.0 nebo novější, abyste získali podporu Web PubSub. Chcete-li host.jsonaktualizovat soubor , otevřete soubor v editoru a pak nahraďte stávající verzi extensionBundle na verzi 3.3.0 nebo novější.
```
{
    "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
```
Aktualizujte host.jsonextensionBundle na verzi 3.3.0 nebo novější, abyste získali podporu Web PubSub. Chcete-li host.jsonaktualizovat soubor , otevřete soubor v editoru a pak nahraďte stávající verzi extensionBundle na verzi 3.3.0 nebo novější.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[3.3.*, 4.0.0)"
    }
}
```

Vytvořte index funkci pro čtení a hostování statické webové stránky pro klienty.

func new -n index -t HttpTrigger

Aktualizujte src/functions/index.js a zkopírujte následující kódy.

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

Aktualizujte index/function.json a zkopírujte následující kódy JSON.

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

Aktualizujte index/index.js a zkopírujte následující kódy.

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

Aktualizujte index.cs a nahraďte Run funkci následujícími kódy.

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

Aktualizujte index.cs a nahraďte Run funkci následujícími kódy.

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

Aktualizujte index/function.json a zkopírujte následující kódy JSON.

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

Aktualizujte index/__init__.py a zkopírujte následující kódy.

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

Vytvořte negotiate funkci, která klientům pomůže získat adresu URL připojení služby s přístupovým tokenem.

func new -n negotiate -t HttpTrigger

Aktualizujte src/functions/negotiate.js a zkopírujte následující kódy.

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

Aktualizujte negotiate/function.json a zkopírujte následující kódy JSON.

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

Vytvořte složku negotiate a aktualizujte negotiate/index.js a zkopírujte následující kódy.

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

Aktualizujte negotiate.cs a nahraďte Run funkci následujícími kódy.

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

Přidání using příkazů v hlavičce pro vyřešení požadovaných závislostí
```
using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
```

Aktualizujte negotiate.cs a nahraďte Run funkci následujícími kódy.

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

Vytvořte složku negotiate a aktualizujte negotiate/function.json a zkopírujte následující kódy JSON.

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

Aktualizujte negotiate/__init__.py a zkopírujte následující kódy.

import logging

import azure.functions as func


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

Vytvořte funkci pro notification generování oznámení pomocí TimerTriggerfunkce .

func new -n notification -t TimerTrigger

Aktualizujte src/functions/notification.js a zkopírujte následující kódy.

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

Aktualizujte notification/function.json a zkopírujte následující kódy JSON.

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

Aktualizujte notification/index.js a zkopírujte následující kódy.

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

Aktualizujte notification.cs a nahraďte Run funkci následujícími kódy.

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

Přidání using příkazů v hlavičce pro vyřešení požadovaných závislostí

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

Aktualizujte notification.cs a nahraďte Run funkci následujícími kódy.

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

Vytvořte oznámení složky a aktualizujte notification/function.json a zkopírujte následující kódy JSON.

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

Aktualizujte notification/__init__.py a zkopírujte následující kódy.

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

Přidejte jednu stránku index.html klienta do kořenové složky projektu a zkopírujte obsah.

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

Vzhledem k tomu, že projekt C# kompiluje soubory do jiné výstupní složky, musíte aktualizovat *.csproj stránku obsahu tak, aby s ní šla.

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

Vzhledem k tomu, že projekt C# kompiluje soubory do jiné výstupní složky, musíte aktualizovat *.csproj stránku obsahu tak, aby s ní šla.

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

Konfigurace a spuštění aplikace Azure Functions
- V prohlížeči otevřete web Azure Portal a potvrďte úspěšné vytvoření instance služby Web PubSub Service, kterou jste nasadili dříve. Přejděte na instanci.
- Vyberte Klíče a zkopírujte připojovací řetězec.
Spuštěním příkazu ve složce funkce nastavte připojovací řetězec služby. Podle potřeby nahraďte <connection-string> hodnotou.
```
func settings add WebPubSubConnectionString "<connection-string>"
```
Poznámka:

TimerTrigger v ukázce je závislý na službě Azure Storage, ale při místním spuštění funkce můžete použít emulátor místního úložiště. Pokud se zobrazí nějaká chyba, jako There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid.je , budete si muset stáhnout a povolit emulátor úložiště.

Teď můžete místní funkci spustit příkazem.
```
func start --port 7071
```
Když zkontrolujete spuštěné protokoly, můžete navštívit statickou stránku místního hostitele: http://localhost:7071/api/index.

Poznámka:

Některé browery se automaticky přesměrují na to, že vedou na https nesprávnou adresu URL. Navrhněte použití Edge a pečlivě zkontrolujte adresu URL, pokud vykreslování není úspěšné.

Nasazení aplikace funkcí do Azure

Než budete moct nasadit kód funkce do Azure, musíte vytvořit tři prostředky:

Skupina prostředků, což je logický kontejner pro související prostředky.
Účet úložiště, který slouží k udržování stavu a dalších informací o vašich funkcích.
Aplikace funkcí, která poskytuje prostředí pro spouštění kódu funkce. Aplikace funkcí se mapuje na místní projekt funkcí a umožňuje seskupit funkce jako logickou jednotku pro snadnější správu, nasazení a sdílení prostředků.

K vytvoření těchto položek použijte následující příkazy.

Přihlaste se do Azure:
```
az login
```
Vytvořte skupinu prostředků nebo ji můžete přeskočit opětovným použitím jedné ze služeb Azure Web PubSub:
```
az group create -n WebPubSubFunction -l <REGION>
```
Ve skupině prostředků a oblasti vytvořte účet úložiště pro obecné účely:
```
az storage account create -n <STORAGE_NAME> -l <REGION> -g WebPubSubFunction
```

Vytvoření aplikace funkcí v 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>

Poznámka:

Projděte si dokumentaci k verzím modulu runtime Azure Functions a nastavte --runtime-version parametr na podporovanou hodnotu.

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>

Poznámka:

Projděte si dokumentaci k verzím modulu runtime Azure Functions a nastavte --runtime-version parametr na podporovanou hodnotu.

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>

Nasazení projektu funkce do Azure:

Po vytvoření aplikace funkcí v Azure teď můžete pomocí příkazu func azure functionapp publish nasadit svůj místní projekt funkcí.
```
func azure functionapp publish <FUNCIONAPP_NAME> --publish-local-settings
```
Poznámka:

Tady nasazujeme místní nastavení local.settings.json společně s parametrem --publish-local-settingspříkazu . Pokud používáte emulátor služby Microsoft Azure Storage, můžete zadáním no příkazu přeskočit přepsání této hodnoty v Azure podle výzvy: App setting AzureWebJobsStorage is different between azure and local.settings.json, Would you like to overwrite value in azure? [yes/no/show] Kromě toho můžete aktualizovat nastavení aplikace funkcí na webu Azure Portal ->Nastavení ->Configuration.
Teď můžete zkontrolovat svůj web z aplikace Funkcí Azure tak, že přejdete na adresu URL: https://<FUNCIONAPP_NAME>.azurewebsites.net/api/index.

Vyčištění prostředků

Pokud nebudete tuto aplikaci dál používat, odstraňte všechny prostředky vytvořené tímto dokumentem pomocí následujícího postupu, abyste nemuseli účtovat žádné poplatky:

Úplně nalevo na webu Azure Portal vyberte Skupiny prostředků a pak vyberte skupinu prostředků, kterou jste vytvořili. Pomocí vyhledávacího pole najděte skupinu prostředků podle jejího názvu.
V okně, které se otevře, vyberte skupinu prostředků a pak vyberte Odstranit skupinu prostředků.
V novém okně zadejte název skupiny prostředků, která se má odstranit, a pak vyberte Odstranit.

Další kroky

V tomto rychlém startu jste zjistili, jak spustit bezserverovou chatovací aplikaci. Teď můžete začít vytvářet vlastní aplikaci.

Kurz: Vytvoření jednoduché chatovací místnosti pomocí azure Web PubSub

Vazby Azure Web PubSub pro Azure Functions

Prozkoumání dalších ukázek Azure Web PubSub