Leggere in inglese

Condividi tramite

Guida introduttiva: Creare un'app serverless con Funzioni di Azure e Servizio SignalR usando JavaScript

  • Articolo

In questo articolo si usano Servizio Azure SignalR, Funzioni di Azure e JavaScript per compilare un'applicazione serverless per trasmettere messaggi ai client.

Importante

Le stringa di connessione non elaborate vengono visualizzate in questo articolo solo a scopo dimostrativo.

Un stringa di connessione include le informazioni di autorizzazione necessarie per consentire all'applicazione di accedere alle Servizio Azure SignalR. La chiave di accesso all'interno della stringa di connessione è simile a una password radice per il servizio. Negli ambienti di produzione proteggere sempre le chiavi di accesso. Usare Azure Key Vault per gestire e ruotare le chiavi in modo sicuro e proteggere i stringa di connessione usando Microsoft Entra ID e autorizzare l'accesso con Microsoft Entra ID.

Evitare di distribuire le chiavi di accesso ad altri utenti, impostarle come hardcoded o salvarle in un file di testo normale accessibile ad altri. Ruotare le chiavi se si ritiene che siano state compromesse.

Prerequisiti

Questa guida introduttiva può essere eseguita su macOS, Windows o Linux.

Prerequisito Descrizione
Una sottoscrizione di Azure Se non si ha una sottoscrizione, creare un account Azure gratuito
Editor di codice È necessario un editor di codice, ad esempio Visual Studio Code.
Azure Functions Core Tools Richiede la versione 4.0.5611 o successiva per eseguire Node.js modello di programmazione v4.
Node.js LTS Vedere le versioni di node.js supportate nella guida per sviluppatori javaScript Funzioni di Azure.
Azzurrite L'associazione SignalR richiede Archiviazione di Azure. È possibile usare un emulatore di archiviazione locale quando una funzione è in esecuzione in locale.
Interfaccia della riga di comando di Azure Facoltativamente, è possibile usare l'interfaccia della riga di comando di Azure per creare un'istanza di Servizio Azure SignalR.

Creare un'istanza del servizio Azure SignalR

In questa sezione viene creata un'istanza di Azure SignalR di base da usare per l'app. I passaggi seguenti usano il portale di Azure per creare una nuova istanza, ma è anche possibile usare l'interfaccia della riga di comando di Azure. Per altre informazioni, vedere il comando az signalr create in Informazioni di riferimento sull'interfaccia della riga di comando per il Servizio Azure SignalR.

  1. Accedere al portale di Azure.
  2. Nell'angolo in alto a sinistra della pagina selezionare + Crea una risorsa.
  3. Nella casella di testo Servizi di ricerca e marketplace della pagina Crea una risorsa immettere signalr e quindi selezionare Servizio SignalR dall'elenco.
  4. Nella pagina Servizio SignalR selezionare Crea.
  5. Nella scheda Informazioni di base immettere le informazioni essenziali per la nuova istanza del servizio SignalR. Immettere i valori seguenti:
Campo Valore consigliato Descrizione
Abbonamento Scegliere la sottoscrizione in uso Selezionare la sottoscrizione da usare per creare una nuova istanza del servizio SignalR.
Gruppo di risorse Creare un gruppo di risorse denominato SignalRTestResources Selezionare o creare un gruppo di risorse per la risorsa SignalR. È utile creare un nuovo gruppo di risorse per questa esercitazione anziché usare un gruppo di risorse esistente. Per liberare risorse dopo aver completato l'esercitazione, eliminare il gruppo di risorse.

L'eliminazione di un gruppo di risorse elimina anche tutte le risorse che appartengono al gruppo. Non è possibile annullare questa azione. Prima di eliminare un gruppo di risorse, assicurarsi che non contenga risorse da conservare.

Per altre informazioni, vedere Using resource groups to manage your Azure resources (Uso di Gruppi di risorse per gestire le risorse di Azure).
Nome risorsa testsignalr Immettere un nome risorsa univoco da usare per la risorsa SignalR. Se testsignalr è già in uso nell'area, aggiungere una cifra o un carattere fino a quando il nome non è univoco.

Il nome deve essere una stringa contenente da 1 a 63 caratteri che possono includere solo numeri, lettere e il segno meno (-). Il nome non può iniziare o terminare con un trattino e non sono consentiti più trattini consecutivi.
Area Scegli la tua area geografica Selezionare l'area appropriata per la nuova istanza del servizio SignalR.

Il Servizio Azure SignalR non è attualmente disponibile in tutte le aree. Per altre informazioni, vedere Disponibilità del Servizio Azure SignalR a livello di area
Piano tariffario Selezionare Modifica e quindi scegliere Gratuito (solo sviluppo/test). Scegliere Seleziona per confermare la scelta del piano tariffario. Il Servizio Azure SignalR ha tre piani tariffari: Gratuito, Standard e Premium. Le esercitazioni usano il livello Gratuito, a meno che non sia specificato diversamente nei prerequisiti.

Per altre informazioni sulle differenze di funzionalità tra i livelli e i prezzi, vedere Prezzi del Servizio Azure SignalR
Modalità di servizio Scegliere la modalità di servizio appropriata Usare Predefinita quando si ospita la logica dell'hub SignalR nelle app Web e si usa il Servizio SignalR come proxy. Usare Serverless quando si usano tecnologie serverless come Funzioni di Azure per ospitare la logica dell'hub SignalR.

La modalità Classica è disponibile solo ai fini della compatibilità con le versioni precedenti e non è consigliabile usarla.

Per altre informazioni, vedere Modalità di servizio nel Servizio Azure SignalR.

Non è necessario modificare le impostazioni nelle schede Rete e Tag per le esercitazioni su SignalR.

  1. Selezionare il pulsante blu Rivedi e crea nella parte inferiore della scheda Informazioni di base.
  2. Nella scheda Rivedi e crea rivedere i valori e quindi selezionare Crea. Il completamento della distribuzione richiede alcuni istanti.
  3. Dopo avere completato la distribuzione, selezionare il pulsante Vai alla risorsa.
  4. Nella pagina della risorsa SignalR selezionare Chiavi dal menu a sinistra, in Impostazioni.
  5. Copiare la Stringa di connessione per la chiave primaria. Questa stringa di connessione è necessaria per configurare l'app più avanti in questa esercitazione.

Progetto di funzione di installazione

Assicurarsi di avere installato Azure Functions Core Tools.

  1. Aprire una riga di comando.
  2. Creare la directory del progetto e quindi modificarla.
  3. Eseguire il comando Funzioni di Azure func init per inizializzare un nuovo progetto.
Bash 
func init --worker-runtime javascript --language javascript --model V4

Creare le funzioni del progetto

Dopo aver inizializzato un progetto, è necessario creare funzioni. Questo progetto richiede tre funzioni:

  • index: ospita una pagina Web per un client.
  • negotiate: consente a un client di ottenere un token di accesso.
  • broadcast: usa un trigger di tempo per trasmettere periodicamente i messaggi a tutti i client.

Quando si esegue il func new comando dalla directory radice del progetto, il Funzioni di Azure Core Tools crea i file di origine della funzione che li archiviano in una cartella con il nome della funzione. Modificare i file in base alle esigenze sostituendo il codice predefinito con il codice dell'app.

Creare la funzione index

  1. Eseguire il comando seguente per creare la index funzione .

    Bash 
    func new -n index -t HttpTrigger

  2. Modificare src/functions/httpTrigger.js e sostituire il contenuto con il codice JSON seguente:

    JavaScript 
    const { app } = require('@azure/functions');
const fs = require('fs').promises;
const path = require('path');

app.http('index', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    handler: async (request, context) => {

        try {

            context.log(`Http function processed request for url "${request.url}"`);

            const filePath = path.join(__dirname,'../content/index.html');
            const html = await fs.readFile(filePath);

            return {
                body: html,
                headers: {
                    'Content-Type': 'text/html'
                }
            };

        } catch (error) {
            context.log(error);
            return {
                status: 500,
                jsonBody: error
            }
        }
    }
});

Creare la funzione negotiate

  1. Eseguire il comando seguente per creare la negotiate funzione .

    Bash 
    func new -n negotiate -t HttpTrigger

  2. Modificare src/functions/negotiate.js e sostituire il contenuto con il codice JSON seguente:

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

const inputSignalR = input.generic({
    type: 'signalRConnectionInfo',
    name: 'connectionInfo',
    hubName: 'serverless',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

app.post('negotiate', {
    authLevel: 'anonymous',
    handler: (request, context) => {
        try {
            return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) }
        } catch (error) {
            context.log(error);
            return {
                status: 500,
                jsonBody: error
            }
        }
    },
    route: 'negotiate',
    extraInputs: [inputSignalR],
});

Creare una funzione di trasmissione.

  1. Eseguire il comando seguente per creare la broadcast funzione .

    Bash 
    func new -n broadcast -t TimerTrigger

  2. Modificare src/functions/broadcast.js e sostituire il contenuto con il codice seguente:

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

var etag = '';
var star = 0;

const goingOutToSignalR = output.generic({
    type: 'signalR',
    name: 'signalR',
    hubName: 'serverless',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

app.timer('sendMessasge', {
    schedule: '0 * * * * *',
    extraOutputs: [goingOutToSignalR],
    handler: async (myTimer, context) => {

        try {
            const response = await getStars(etag);

            if(response.etag === etag){
                console.log(`Same etag: ${response.etag}, no need to broadcast message`);
                return;
            }
        
            etag = response.etag;
            const message = `${response.stars}`;

            context.extraOutputs.set(goingOutToSignalR,
                {
                    'target': 'newMessage',
                    'arguments': [message]
                });
        } catch (error) {
            context.log(error);
        }

    }
});

Creare il file index.html

L'interfaccia client per questa app è una pagina Web. La index funzione legge il contenuto HTML dal file content/index.html .

  1. Creare una cartella denominata content nella cartella radice del progetto.

  2. Creare il file content/index.html.

  3. Copiare il contenuto seguente nel file content/index.html e salvarlo:

    HTML 
    <html>

<body>
  <h1>Azure SignalR Serverless Sample</h1>
  <div>Instructions: Goto <a href="https://github.com/Azure/azure-signalr">GitHub repo</a> and star the repository.</div>
  <hr>
  <div>Star count: <div id="messages"></div></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>
  <script>
    let messages = document.querySelector('#messages');
    const apiBaseUrl = window.location.origin;
    console.log(`apiBaseUrl: ${apiBaseUrl}`);
    const connection = new signalR.HubConnectionBuilder()
        .withUrl(apiBaseUrl + '/api')
        .configureLogging(signalR.LogLevel.Information)
        .build();
      connection.on('newMessage', (message) => {
        console.log(`message: ${message}`);
        document.getElementById("messages").innerHTML = message;
      });

      connection.start()
        .catch(console.error);
  </script>
</body>

</html>

Archiviazione di Azure di installazione

Funzioni di Azure richiede il funzionamento di un account di archiviazione. Scegliere una delle due opzioni seguenti:

  1. Avviare l'emulatore di archiviazione Di Azurite:

    Bash 
    azurite -l azurite -d azurite\debug.log

  2. Assicurarsi che in AzureWebJobsStorage local.settings.json impostato su UseDevelopmentStorage=true.

Aggiungere il Servizio SignalR stringa di connessione alle impostazioni dell'app per le funzioni

Ora hai quasi finito. L'ultimo passaggio consiste nell'impostare il Servizio SignalR stringa di connessione nelle impostazioni dell'app per le funzioni di Azure.

  1. Nella portale di Azure passare all'istanza di SignalR distribuita in precedenza.

  2. Selezionare Chiavi per visualizzare le stringhe di connessione per l'istanza del servizio SignalR.

    Screenshot della pagina Chiavi del servizio Azure SignalR.

  3. Copiare il stringa di connessione primario ed eseguire il comando .

    Le stringa di connessione non elaborate vengono visualizzate in questo articolo solo a scopo dimostrativo. Negli ambienti di produzione proteggere sempre le chiavi di accesso. Usare Azure Key Vault per gestire e ruotare le chiavi in modo sicuro e proteggere i stringa di connessione usando Microsoft Entra ID e autorizzare l'accesso con Microsoft Entra ID.

    Bash 
    func settings add AzureSignalRConnectionString "<signalr-connection-string>"

Eseguire l'app per le funzioni di Azure in locale

Eseguire l'app per le funzioni di Azure nell'ambiente locale:

Bash 
func start

Dopo aver eseguito la funzione di Azure in locale, passare a http://localhost:7071/api/index. Nella pagina viene visualizzato il numero di stelle corrente per il repository Azure/azure-signalr di GitHub. Quando si star o unstar il repository in GitHub, il conteggio aggiornato verrà visualizzato ogni pochi secondi.

Problemi? Vedere la guida alla risoluzione dei problemi oppure segnalarli.

Pulire le risorse

Se non si intende continuare a usare l'app, eliminare tutte le risorse create tramite questa guida di avvio rapido eseguendo i passaggi seguenti, per evitare qualsiasi addebito:

  1. Nel portale di Azure selezionare Gruppi di risorse all'estrema sinistra e quindi selezionare il gruppo di risorse creato. In alternativa, è possibile usare la casella di ricerca per trovare il gruppo di risorse in base al nome.

  2. Nella finestra che si apre selezionare il gruppo di risorse e quindi fare clic su Elimina gruppo di risorse.

  3. Nella nuova finestra digita il nome del gruppo di risorse da eliminare e quindi fai clic su Elimina.

Codice di esempio

È possibile ottenere tutto il codice usato nell'articolo dal repository GitHub:

Passaggi successivi

In questa guida introduttiva è stata creata ed eseguita un'applicazione serverless in tempo reale in localhost. Altre informazioni su come comunicare bidirezionalmente tra client e funzioni di Azure con Servizio SignalR.

associazioni Servizio SignalR per Funzioni di Azure

Comunicazione bidirezionale in Serverless

Distribuire le funzioni di Azure con VS Code