Snabbstart: Skapa en serverlös app med Azure Functions och SignalR Service med JavaScript

Artikel
04/25/2024

I den här artikeln använder du Azure SignalR Service, Azure Functions och JavaScript för att skapa ett serverlöst program för att sända meddelanden till klienter.

Förutsättningar

Den här snabbstarten kan köras på macOS, Windows eller Linux.

Förutsättning	beskrivning
En Azure-prenumeration	Om du inte har en prenumeration skapar du ett kostnadsfritt Azure-konto
En kodredigerare	Du behöver en kodredigerare som Visual Studio Code.
Azure Functions Core Tools	Kräver version 4.0.5611 eller senare för att köra Node.js v4-programmeringsmodell.
Node.js LTS	Se vilka node.js versioner som stöds i utvecklarguiden för Azure Functions JavaScript.
Azurite	SignalR-bindning behöver Azure Storage. Du kan använda en lokal lagringsemulator när en funktion körs lokalt.
Azure CLI	Du kan också använda Azure CLI för att skapa en Azure SignalR Service-instans.

Skapa en Azure SignalR Service-instans

I det här avsnittet skapar du en grundläggande Azure SignalR-instans som ska användas för din app. Följande steg använder Azure-portalen för att skapa en ny instans, men du kan också använda Azure CLI. Mer information finns i kommandot az signalr create i Cli-referensen för Azure SignalR Service.

Logga in på Azure-portalen.
Välj + Skapa en resurs längst upp till vänster på sidan.
På sidan Skapa en resurs går du till textrutan tjänsten Search s och marketplace och anger signalr och väljer sedan SignalR Service i listan.
På sidan SignalR Service väljer du Skapa.
På fliken Grundläggande anger du viktig information för din nya SignalR Service-instans. Ange följande värden:

Fält	Föreslaget värde	beskrivning
Abonnemang	Välj din prenumeration	Välj den prenumeration som du vill använda för att skapa en ny SignalR Service-instans.
Resursgrupp	Skapa en resursgrupp med namnet SignalRTestResources	Välj eller skapa en resursgrupp för SignalR-resursen. Det är användbart att skapa en ny resursgrupp för den här självstudien i stället för att använda en befintlig resursgrupp. Om du vill frigöra resurser när du har slutfört självstudien tar du bort resursgruppen. Om du tar bort en resursgrupp tas även alla resurser som tillhör gruppen bort. Det går inte att ångra den här åtgärden. Innan du tar bort en resursgrupp kontrollerar du att den inte innehåller resurser som du vill behålla. Mer information finns i Using resource groups to manage your Azure resources (Hantera dina Azure-resurser med hjälp av resursgrupper).
Resursnamn	testsignalr	Ange ett unikt resursnamn för SignalR-resursen. Om testsignaler redan har tagits i din region lägger du till en siffra eller ett tecken tills namnet är unikt. Namnet måste vara en sträng på 1 till 63 tecken och innehålla endast siffror, bokstäver och bindestreck (`-`). Namnet kan inte starta eller sluta med bindestreckstecknet och efterföljande bindestreck är inte giltiga.
Region	Välj din region	Välj lämplig region för din nya SignalR Service-instans. Azure SignalR Service är för närvarande inte tillgängligt i alla regioner. Mer information finns i Tillgänglighet för Azure SignalR Service-regionen
Prisnivå	Välj Ändra och välj sedan Kostnadsfri (endast dev/test). Välj Välj för att bekräfta ditt val av prisnivå.	Azure SignalR Service har tre prisnivåer: Kostnadsfri, Standard och Premium. Självstudier använder den kostnadsfria nivån, om inget annat anges i förutsättningarna. Mer information om funktionsskillnader mellan nivåer och priser finns i Prissättning för Azure SignalR Service
Tjänstläge	Välj lämpligt tjänstläge	Använd Standard när du är värd för SignalR Hub-logiken i dina webbappar och använder SignalR-tjänsten som proxy. Använd Serverlös när du använder serverlösa tekniker som Azure Functions som värd för SignalR Hub-logiken. Klassiskt läge är endast för bakåtkompatibilitet och rekommenderas inte att använda. Mer information finns i Tjänstläge i Azure SignalR Service.

Du behöver inte ändra inställningarna på flikarna Nätverk och Taggar för SignalR-självstudierna.

Välj knappen Granska + skapa längst ned på fliken Grundläggande.
På fliken Granska + skapa granskar du värdena och väljer sedan Skapa. Det tar en stund innan distributionen har slutförts.
När distributionen är klar väljer du knappen Gå till resurs .
På sidan SignalR-resurs väljer du Nycklar på menyn till vänster under Inställningar.
Kopiera Anslut ionssträngen för primärnyckeln. Du behöver den här anslutningssträng för att konfigurera appen senare i den här självstudien.

Installationsfunktionsprojekt

Kontrollera att du har Azure Functions Core Tools installerat.

Öppna en kommandorad.
Skapa projektkatalog och ändra sedan till den.
Kör Azure Functions-kommandot func init för att initiera ett nytt projekt.

func init --worker-runtime javascript --language javascript --model V4

Skapa projektfunktionerna

När du har initierat ett projekt måste du skapa funktioner. Det här projektet kräver tre funktioner:

index: Är värd för en webbsida för en klient.
negotiate: Tillåter att en klient hämtar en åtkomsttoken.
broadcast: Använder en tidsutlösare för att regelbundet sända meddelanden till alla klienter.

När du kör func new kommandot från projektets rotkatalog skapar Azure Functions Core Tools funktionskällfilerna som lagrar dem i en mapp med funktionsnamnet. Du redigerar filerna efter behov och ersätter standardkoden med appkoden.

Skapa indexfunktionen

Kör följande kommando för att skapa index funktionen.
```
func new -n index -t HttpTrigger
```

Redigera src/functions/httpTrigger.js och ersätt innehållet med följande json-kod:

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

Skapa funktionen negotiate

Kör följande kommando för att skapa negotiate funktionen.
```
func new -n negotiate -t HttpTrigger
```

Redigera src/functions/negotiate.js och ersätt innehållet med följande json-kod:

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

Skapa en sändningsfunktion.

Kör följande kommando för att skapa broadcast funktionen.
```
func new -n broadcast -t TimerTrigger
```

Redigera src/functions/broadcast.js och ersätt innehållet med följande kod:

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

    }
});

Skapa index.html-filen

Klientgränssnittet för den här appen är en webbsida. Funktionen index läser HTML-innehåll från content/index.html-filen.

Skapa en mapp med namnet content i projektrotmappen.
Skapa filen content/index.html.

Kopiera följande innehåll till filen content/index.html och spara det:

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

Konfigurera Azure Storage

Azure Functions kräver ett lagringskonto för att fungera. Välj något av följande två alternativ:

Kör den kostnadsfria Azure Storage-emulatorn.
Använd Azure Storage-tjänsten. Detta kan medföra kostnader om du fortsätter att använda det.

Lokal emulering
Azure Blob Storage

Starta Azurite Storage-emulatorn:

azurite -l azurite -d azurite\debug.log

Kontrollera att AzureWebJobsStorage i local.settings.json inställt på UseDevelopmentStorage=true.

Uppdatera projektet så att det använder Azure Blob Storage-anslutningssträng.

func settings add AzureWebJobsStorage "<storage-connection-string>"

Lägg till SignalR Service-anslutningssträng i inställningarna för funktionsappen

Du är nästan klar nu. Det sista steget är att ange SignalR Service-anslutningssträng i Azure Function-appinställningar.

I Azure-portalen går du till den SignalR-instans som du distribuerade tidigare.
Välj Nycklar för att visa anslutningssträngarna för SignalR Service-instansen.

Kopiera den primära anslutningssträng och kör kommandot:

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

Kör Azure-funktionsappen lokalt

Kör Azure-funktionsappen i den lokala miljön:

func start

När Azure-funktionen körs lokalt går du till http://localhost:7071/api/index. Sidan visar det aktuella stjärnantalet för GitHub Azure/azure-signalr-lagringsplatsen. När du spelar upp eller tar bort lagringsplatsen i GitHub visas det uppdaterade antalet med några sekunders mellanrum.

Har du problem? Prova felsökningsguiden eller meddela oss.

Rensa resurser

Om du inte planerar att fortsätta använda den här appen tar du bort alla resurser som skapades i snabbstarten med följande steg, så att inga kostnader uppstår:

Välj Resursgrupper i Azure Portal längst till vänster och välj sedan den resursgrupp du skapat. Du kan också använda sökrutan till att hitta resursgruppen efter dess namn.
Markera resursgruppen i fönstret som öppnas och klicka sedan på Ta bort resursgrupp.
I det nya fönstret skriver du namnet på resursgruppen som ska tas bort. Klicka sedan på Ta bort.

Exempelkod

Du kan hämta all kod som används i artikeln från GitHub-lagringsplatsen:

aspnet/AzureSignalR-samples.

Nästa steg

I den här snabbstarten skapade och körde du ett serverlöst realtidsprogram i localhost. Läs sedan mer om hur du kommunicerar dubbelriktade mellan klienter och Azure Function med SignalR Service.

SignalR Service-bindningar för Azure Functions

Dubbelriktad kommunikation i Serverless

Distribuera Azure Functions med VS Code

Dela via