Esercitazione: Creare un'app di notifica serverless con Funzioni di Azure e servizio Web PubSub di Azure

Articolo
01/12/2024

Il servizio Web PubSub di Azure consente di creare applicazioni Web di messaggistica in tempo reale usando WebSocket. Funzioni di Azure è una piattaforma serverless che consente di eseguire il codice senza gestire alcuna infrastruttura. Questa esercitazione illustra come usare il servizio Web PubSub di Azure e Funzioni di Azure per creare un'applicazione serverless con messaggistica in tempo reale in scenari di notifica.

In questa esercitazione apprenderai a:

Creare un'app di notifica serverless
Usare le associazioni di input e output della funzione Web PubSub
Eseguire le funzioni di esempio in locale
Distribuire la funzione nell'app per le funzioni di Azure

Prerequisiti

Un editor di codice, ad esempio Visual Studio Code
Node.js, versione 18.x o successiva.

Nota

Per altre informazioni sulle versioni supportate di Node.js, vedere Funzioni di Azure documentazione sulle versioni di runtime.
Funzioni di Azure Core Tools (V4 o versione successiva preferita) per eseguire le app per le funzioni di Azure in locale e distribuirlo in Azure.
Interfaccia della riga di comando di Azure per gestire le risorse di Azure.

Se non si ha una sottoscrizione di Azure, creare un account Azure gratuito prima di iniziare.

Accedere al portale di Azure all'indirizzo https://portal.azure.com/ con il proprio account Azure.

Creare un'istanza del servizio Web PubSub di Azure

L'applicazione si connetterà a un'istanza del servizio Web PubSub in Azure.

Selezionare il pulsante Nuovo nell'angolo superiore sinistro del portale di Azure. Nella schermata Nuovo digitare Web PubSub nella casella di ricerca e premere INVIO. È anche possibile eseguire una ricerca in PubSub Web di Azure dalla Web categoria .
Selezionare Web PubSub nei risultati della ricerca e quindi selezionare Crea.

Immettere le impostazioni seguenti.

Impostazione	Valore suggerito	Descrizione
Nome risorsa	Nome globalmente univoco	Nome univoco globale che identifica la nuova istanza del servizio Web PubSub. I caratteri validi sono `a-z`, `A-Z`, `0-9`e `-`.
Abbonamento	Sottoscrizione in uso	Sottoscrizione di Azure in cui viene creata la nuova istanza del servizio Web PubSub.
Gruppo di risorse	myResourceGroup	Nome del nuovo gruppo di risorse in cui creare l'istanza del servizio Web PubSub.
Location	Stati Uniti occidentali	Scegliere un'area nelle vicinanze.
Piano tariffario	Libero	È prima possibile provare gratuitamente il servizio Web PubSub di Azure. Altre informazioni sui piani tariffari del servizio Web PubSub di Azure
Unità: conteggio	-	Il numero di unità specifica il numero di connessioni che l'istanza del servizio Web PubSub può accettare. Ogni unità supporta al massimo 1.000 connessioni simultanee. È configurabili solo nel livello Standard.

Screenshot of creating the Azure Web PubSub instance in portal.

Selezionare Crea per avviare la distribuzione dell'istanza del servizio Web PubSub.

Creare ed eseguire le funzioni in locale

Assicurarsi di aver installato Funzioni di Azure Core Tools. Creare ora una directory vuota per il progetto. Eseguire il comando in questa directory di lavoro. Usare una delle opzioni indicate di seguito.
```
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
```
Seguire la procedura per installare Microsoft.Azure.WebJobs.Extensions.WebPubSub.
Confermare o aggiornare host.jsonl'estensioneBundle alla versione 4.* o successiva per ottenere il supporto di Web PubSub. Per aggiornare , host.jsonaprire il file nell'editor e quindi sostituire l'estensione della versione esistenteBundle alla versione 4.* o successiva.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[4.*, 5.0.0)"
    }
}
```
Confermare o aggiornare host.jsonl'estensioneBundle alla versione 3.3.0 o successiva per ottenere il supporto di Web PubSub. Per aggiornare , host.jsonaprire il file nell'editor e quindi sostituire l'estensione della versione esistenteBundle alla versione 3.3.0 o successiva.
```
{
    "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
```
Aggiornare host.jsonl'estensioneBundle alla versione 3.3.0 o successiva per ottenere il supporto di Web PubSub. Per aggiornare , host.jsonaprire il file nell'editor e quindi sostituire l'estensione della versione esistenteBundle alla versione 3.3.0 o successiva.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[3.3.*, 4.0.0)"
    }
}
```

Creare una index funzione per leggere e ospitare una pagina Web statica per i client.

func new -n index -t HttpTrigger

Aggiornare e copiare src/functions/index.js i codici seguenti.

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

Aggiornare e copiare index/function.json i codici JSON seguenti.

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

Aggiornare e copiare index/index.js i codici seguenti.

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

Aggiornare index.cs e sostituire Run la funzione con i codici seguenti.

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

Aggiornare index.cs e sostituire Run la funzione con i codici seguenti.

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

Aggiornare e copiare index/function.json i codici JSON seguenti.

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

Aggiornare e copiare index/__init__.py i codici seguenti.

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

Creare una negotiate funzione per consentire ai client di ottenere l'URL di connessione del servizio con il token di accesso.

func new -n negotiate -t HttpTrigger

Aggiornare e copiare src/functions/negotiate.js i codici seguenti.

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

Aggiornare e copiare negotiate/function.json i codici JSON seguenti.

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

Creare una cartella negoziata e aggiornare e copiare negotiate/index.js i codici seguenti.

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

Aggiornare negotiate.cs e sostituire Run la funzione con i codici seguenti.

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

Aggiungere using istruzioni nell'intestazione per risolvere le dipendenze necessarie.
```
using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
```

Aggiornare negotiate.cs e sostituire Run la funzione con i codici seguenti.

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

Creare una cartella negotiate e aggiornare e copiare negotiate/function.json i codici JSON seguenti.

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

Aggiornare e copiare negotiate/__init__.py i codici seguenti.

import logging

import azure.functions as func


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

Creare una notification funzione per generare notifiche con TimerTrigger.

func new -n notification -t TimerTrigger

Aggiornare e copiare src/functions/notification.js i codici seguenti.

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

Aggiornare e copiare notification/function.json i codici JSON seguenti.

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

Aggiornare e copiare notification/index.js i codici seguenti.

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

Aggiornare notification.cs e sostituire Run la funzione con i codici seguenti.

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

Aggiungere using istruzioni nell'intestazione per risolvere le dipendenze necessarie.

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

Aggiornare notification.cs e sostituire Run la funzione con i codici seguenti.

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

Creare una notifica di cartella e aggiornare e copiare notification/function.json i codici JSON seguenti.

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

Aggiornare e copiare notification/__init__.py i codici seguenti.

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

Aggiungere la singola pagina index.html client nella cartella radice del progetto e copiare il contenuto.

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

Poiché il progetto C# compila i file in una cartella di output diversa, è necessario aggiornare *.csproj per rendere disponibile la pagina del contenuto.

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

Poiché il progetto C# compila i file in una cartella di output diversa, è necessario aggiornare *.csproj per rendere disponibile la pagina del contenuto.

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

Configurare ed eseguire l'app per le funzioni di Azure
- Nel browser aprire il portale di Azure e verificare che l'istanza del servizio Web PubSub distribuita in precedenza sia stata creata correttamente. Passare all'istanza di .
- Selezionare Chiavi e copiare il stringa di connessione.
Eseguire il comando nella cartella della funzione per impostare il servizio stringa di connessione. Sostituire <connection-string> con il valore in base alle esigenze.
```
func settings add WebPubSubConnectionString "<connection-string>"
```
Nota

TimerTriggerusato nell'esempio ha dipendenze da Archiviazione di Azure, ma è possibile usare l'emulatore di archiviazione locale quando la funzione è in esecuzione in locale. Se si verifica un errore simile There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid.a , sarà necessario scaricare e abilitare Archiviazione Emulatore.

A questo momento è possibile eseguire la funzione locale tramite comando.
```
func start --port 7071
```
E controllando i log in esecuzione, è possibile visitare la pagina statica dell'host locale visitando: http://localhost:7071/api/index.

Nota

Alcuni brower reindirizzano automaticamente a https tale URL. Suggerire di usare Edge e controllare l'URL se il rendering non riesce.

Distribuire un'app per le funzioni in Azure

Prima di distribuire il codice della funzione in Azure, è necessario creare tre risorse:

Un gruppo di risorse, ovvero un contenitore logico di risorse correlate.
Un account di archiviazione, usato per mantenere lo stato e altre informazioni sulle funzioni.
Un'app per le funzioni, che fornisce l'ambiente per l'esecuzione del codice della funzione. Un'app per le funzioni esegue il mapping al progetto di funzione locale e consente di raggruppare le funzioni come unità logica per semplificare la gestione, la distribuzione e la condivisione delle risorse.

Usare i comandi seguenti per creare questi elementi.

Accedere ad Azure:
```
az login
```
Creare un gruppo di risorse oppure ignorare riutilizzando uno dei servizi Web PubSub di Azure:
```
az group create -n WebPubSubFunction -l <REGION>
```
Creare un account di archiviazione per utilizzo generico nel gruppo di risorse e nell'area:
```
az storage account create -n <STORAGE_NAME> -l <REGION> -g WebPubSubFunction
```

Creare l'app per le funzioni 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>

Nota

Controllare Funzioni di Azure documentazione delle versioni di runtime per impostare il parametro sul --runtime-version valore supportato.

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>

Nota

Controllare Funzioni di Azure documentazione delle versioni di runtime per impostare il parametro sul --runtime-version valore supportato.

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>

Distribuire il progetto di funzione in Azure:

Dopo aver creato l'app per le funzioni in Azure, è ora possibile distribuire il progetto di funzioni locali usando il comando func azure functionapp publish .
```
func azure functionapp publish <FUNCIONAPP_NAME> --publish-local-settings
```
Nota

Di seguito vengono distribuite le impostazioni local.settings.json locali insieme al parametro di --publish-local-settingscomando . Se si usa Archiviazione di Microsoft Azure Emulator, è possibile digitare no per ignorare la sovrascrittura di questo valore in Azure seguendo il messaggio di richiesta: App setting AzureWebJobsStorage is different between azure and local.settings.json, Would you like to overwrite value in azure? [yes/no/show]. È anche possibile aggiornare le impostazioni dell'app per le funzioni nel portale di Azure ->Impostazioni ->Configuration.
È ora possibile controllare il sito dall'app per le funzioni di Azure passando all'URL: https://<FUNCIONAPP_NAME>.azurewebsites.net/api/index.

Pulire le risorse

Se non si intende continuare a usare questa app, eliminare tutte le risorse create da questo documento con i passaggi seguenti in modo da non incorrere in alcun addebito:

Nel portale di Azure selezionare Gruppi di risorse all'estrema sinistra e quindi selezionare il gruppo di risorse creato. Usare invece la casella di ricerca per trovare il gruppo di risorse in base al nome.
Nella finestra visualizzata selezionare il gruppo di risorse e quindi selezionare Elimina gruppo di risorse.
Nella nuova finestra digitare il nome del gruppo di risorse da eliminare e quindi selezionare Elimina.

Passaggi successivi

In questa guida introduttiva si è appreso come eseguire un'applicazione chat serverless. A questo punto, è possibile iniziare a creare un'applicazione personalizzata.

Esercitazione: Creare una chatroom semplice con PubSub Web di Azure

Associazioni Web PubSub di Azure per Funzioni di Azure

Esplorare altri esempi di PubSub Web di Azure