Quickstart: JavaScript gebruiken om een app te maken met GitHub aantal sterren met Azure Functions en SignalR Service

  • Artikel
  • 6 minuten om te lezen

Met Azure SignalR Service kunt u eenvoudig realtime functionaliteit toevoegen aan uw toepassing en Azure Functions is een serverloos platform waarmee u uw code kunt uitvoeren zonder een infrastructuur te beheren. In deze quickstart leert u hoe u SignalR Service en Azure Functions om een serverloze toepassing te bouwen met JavaScript om berichten naar clients uit te zenden.

Notitie

U kunt alle codes die in het artikel worden vermeld, op GitHub

Vereisten

Notitie

Deze quickstart kan worden uitgevoerd op macOS, Windows of Linux.

Ondervindt u problemen? Probeer de gids voor probleemoplossing of laat het ons weten.

Meld u aan bij Azure.

Meld u met uw Azure-account aan bij Azure Portal op https://portal.azure.com/.

Ondervindt u problemen? Probeer de gids voor probleemoplossing of laat het ons weten.

Een exemplaar van de Azure SignalR Service maken

Uw toepassing maakt verbinding met een SignalR-Service-exemplaar in Azure.

  1. Selecteer de knop Nieuw in de linkerbovenhoek van Azure Portal. Typ in het scherm Nieuw SignalR Service in het zoekvak in en druk op Enter.

    Schermopname met zoekopdracht voor de SignalR-service in de Azure-portal.

  2. Selecteer SignalR Service in de zoekresultaten en selecteer Maken.

  3. Voer de volgende instellingen in.

    Instelling Voorgestelde waarde Beschrijving
    Resourcenaam Wereldwijd unieke naam Naam ter identificatie van uw nieuwe SignalR Service-exemplaar. Geldige tekens zijn a-z, 0-9 en -.
    Abonnement Uw abonnement Het abonnement waarin dit nieuwe SignalR Service-exemplaar is gemaakt.
    Resourcegroep myResourceGroup Naam voor de nieuwe resourcegroep waarin het SignalR Service-exemplaar moet worden gemaakt.
    Locatie VS - west Kies een regio bij u in de buurt.
    Prijscategorie Gratis Probeer Azure SignalR Service gratis uit.
    Aantal eenheden Niet van toepassing Het aantal eenheden geeft aan hoeveel verbindingen uw SignalR Service-exemplaar kan accepteren. Dit kan alleen worden geconfigureerd in de Standard-laag.
    Servicemodus Serverloos Voor gebruik met Azure Functions of REST-API.

    Schermopname met het tabblad Basisbeginselen van SignalR met waarden.

  4. Selecteer Maken om te beginnen met het implementeren van het SignalR-Service-exemplaar.

  5. Zodra het exemplaar is geïmplementeerd, opent u dit in de portal en zoekt u de bijbehorende Instellingen-pagina. Wijzig de instelling van Servicemodus alleen in Serverloos als u de Azure SignalR-service gebruikt via Azure Functions-binding of de REST-API. Laat de modus anders op Klassiek of Standaard staan.

Ondervindt u problemen? Probeer de gids voor probleemoplossing of laat het ons weten.

De Azure-functie lokaal instellen en uitvoeren

  1. Zorg ervoor dat Azure Function Core Tools is geïnstalleerd. Maak een lege map en navigeer naar de map met de opdrachtregel.

    # Initialize a function project
func init --worker-runtime javascript

  2. Nadat u een project hebt initialiseren, moet u functies maken. In dit voorbeeld moeten we drie functies maken.

    1. Voer de volgende opdracht uit om een functie index te maken waarmee een webpagina voor de client wordt host.

      func new -n index -t HttpTrigger

      Open index/function.json en kopieer de volgende json-codes:

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

      Open index/index.js en kopieer de volgende codes.

      var fs = require('fs').promises

module.exports = async function (context, req) {
    const path = context.executionContext.functionDirectory + '/../content/index.html'
    try {
        var data = await fs.readFile(path);
        context.res = {
            headers: {
                'Content-Type': 'text/html'
            },
            body: data
        }
        context.done()
    } catch (error) {
        context.log.error(err);
        context.done(err);
    }
}

    2. Maak een negotiate functie voor clients om toegang te krijgen tot een token.

      func new -n negotiate -t SignalRNegotiateHTTPTrigger

      Open negotiate/function.json en kopieer de volgende json-codes:

      {
  "disabled": false,
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "methods": [
        "post"
      ],
      "name": "req",
      "route": "negotiate"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    },
    {
      "type": "signalRConnectionInfo",
      "name": "connectionInfo",
      "hubName": "serverless",
      "connectionStringSetting": "AzureSignalRConnectionString",
      "direction": "in"
    }
  ]
}

    3. Maak een broadcast functie om berichten uit te zenden naar alle clients. In het voorbeeld gebruiken we tijdtrigger om periodiek berichten uit te zenden.

      func new -n broadcast -t TimerTrigger

      Open broadcast/function.json en kopieer de volgende codes.

      {
  "bindings": [
    {
      "name": "myTimer",
      "type": "timerTrigger",
      "direction": "in",
      "schedule": "*/5 * * * * *"
    },
    {
      "type": "signalR",
      "name": "signalRMessages",
      "hubName": "serverless",
      "connectionStringSetting": "AzureSignalRConnectionString",
      "direction": "out"
    }
  ]
}

      Open broadcast/index.js en kopieer de volgende codes.

      var https = require('https');

module.exports = function (context) {
    var req = https.request("https://api.github.com/repos/azure/azure-signalr", {
        method: 'GET',
        headers: {'User-Agent': 'serverless'}
    }, res => {
        var body = "";

        res.on('data', data => {
            body += data;
        });
        res.on("end", () => {
            var jbody = JSON.parse(body);
            context.bindings.signalRMessages = [{
                "target": "newMessage",
                "arguments": [ `Current star count of https://github.com/Azure/azure-signalr is: ${jbody['stargazers_count']}` ]
            }]
            context.done();
        });
    }).on("error", (error) => {
        context.log(error);
        context.res = {
          status: 500,
          body: error
        };
        context.done();
    });
    req.end();
}

  3. De clientinterface van dit voorbeeld is een webpagina. Gezien het lezen van HTML-inhoud content/index.html in index de functie, maakt u een nieuw bestand index.html in de map onder de content hoofdmap van uw project. Kopieer de volgende inhoud.

    <html>

<body>
  <h1>Azure SignalR Serverless Sample</h1>
  <div id="messages"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.7/signalr.min.js"></script>
  <script>
    let messages = document.querySelector('#messages');
    const apiBaseUrl = window.location.origin;
    const connection = new signalR.HubConnectionBuilder()
        .withUrl(apiBaseUrl + '/api')
        .configureLogging(signalR.LogLevel.Information)
        .build();
      connection.on('newMessage', (message) => {
        document.getElementById("messages").innerHTML = message;
      });

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

</html>

  4. Het is nu bijna klaar. De laatste stap is het instellen van een connection string van de SignalR Service op Azure Function-instellingen.

    1. Controleer in de browser waarin de Azure-portal is geopend, of het service-exemplaar van SignalR dat u eerder hebt geïmplementeerd, is gemaakt. Hiervoor typt u de naam van het exemplaar in het zoekvak boven in de portal. Selecteer het exemplaar om het te openen.

      Het service-exemplaar van SignalR zoeken

    2. Selecteer Sleutels om de verbindingsreeksen voor het service-exemplaar van SignalR weer te geven.

      Schermopname waarin de primaire verbindingsreeks is gemarkeerd.

    3. Kopieer de primaire connection string. Voer de onderstaande opdracht uit.

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

  5. Voer de Azure-functie lokaal uit:

    func start

    Nadat De Azure-functie lokaal is uitgevoerd. Gebruik uw browser om naar te http://localhost:7071/api/index gaan en u kunt het huidige aantal sterren zien. En als u in de GitHub ster of ster bent, wordt het aantal sterren elke paar seconden vernieuwd.

    Notitie

    SignalR-binding Azure Storage, maar u kunt de lokale opslagemulator gebruiken wanneer de functie lokaal wordt uitgevoerd. Als er een foutbericht wordt There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid. weergegeven, zoals U moet het downloaden en inschakelen van Storage Emulator

Ondervindt u problemen? Probeer de gids voor probleemoplossing of laat het ons weten

Resources opschonen

Als u deze app niet verder gaat gebruiken, kunt u alle resources verwijderen die door deze Quick Start zijn aangemaakt door de onderstaande stappen te volgen, zodat u geen kosten in rekening worden gebracht:

  1. Selecteer in Azure Portal Resourcegroepen aan de linkerkant en selecteer vervolgens de resourcegroep die u hebt gemaakt. U kunt ook het zoekvak gebruiken om de resourcegroep op de naam te zoeken.

  2. Selecteer in het venster dat wordt geopend, de resourcegroep en klik op Resourcegroep verwijderen.

  3. Voer in het nieuwe venster de naam in van de resourcegroep die u wilt verwijderen en klik vervolgens op Verwijderen.

Ondervindt u problemen? Probeer de gids voor probleemoplossing of laat het ons weten.

Volgende stappen

In deze quickstart hebt u lokaal een serverloze toepassing in realtime gemaakt en uitgevoerd. Meer informatie over het gebruik SignalR Service bindingen voor Azure Functions. Hierna leert u meer over bi-directionele communicatie tussen clients en Azure Function met SignalR Service.

SignalR-servicebindingen voor Azure Functions

Bi-directionele communicatie in serverloos

Azure Functions met VS Code implementeren