Quickstart: Een app maken met GitHub aantal sterren met Azure Functions en SignalR Service met C#

Met de service Azure SignalR kunt u eenvoudig realtimefunctionaliteit toevoegen aan een toepassing. Azure Functions is een serverloos platform waarmee u 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 C# om berichten naar clients uit te zenden.

Vereisten

Als u code nog niet hebt Visual Studio, kunt u deze gratis downloaden en gebruiken( https://code.visualstudio.com/Download) .

U kunt deze zelfstudie ook uitvoeren op de opdrachtregel (macOS, Windows of Linux) met behulp van Azure Functions Core Tools). Ook de .NET Core SDKen uw favoriete code-editor.

Als u geen Azure-abonnement hebt, kunt u er gratis een maken voordat u begint.

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

Aanmelden bij Azure en een SignalR Service maken

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.

   

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.

   

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 dotnet
   
   # Add SignalR Service package reference to the project
   dotnet add package Microsoft.Azure.WebJobs.Extensions.SignalRService
   

2. Nadat u een project hebt initialiseren. Maak een nieuw bestand met de naam Function.cs. Voeg de volgende code toe aan Function.cs.

   using System;
   using System.IO;
   using System.Net.Http;
   using System.Threading.Tasks;
   using Microsoft.AspNetCore.Http;
   using Microsoft.AspNetCore.Mvc;
   using Microsoft.Azure.WebJobs;
   using Microsoft.Azure.WebJobs.Extensions.Http;
   using Microsoft.Azure.WebJobs.Extensions.SignalRService;
   using Newtonsoft.Json;
   
   namespace CSharp
   {
       public static class Function
       {
           private static HttpClient httpClient = new HttpClient();
   
           [FunctionName("index")]
           public static IActionResult Index([HttpTrigger(AuthorizationLevel.Anonymous)]HttpRequest req, ExecutionContext context)
           {
               var path = Path.Combine(context.FunctionAppDirectory, "content", "index.html");
               return new ContentResult
               {
                   Content = File.ReadAllText(path),
                   ContentType = "text/html",
               };
           }
   
           [FunctionName("negotiate")]
           public static SignalRConnectionInfo Negotiate( 
               [HttpTrigger(AuthorizationLevel.Anonymous)] HttpRequest req,
               [SignalRConnectionInfo(HubName = "serverlessSample")] SignalRConnectionInfo connectionInfo)
           {
               return connectionInfo;
           }
   
           [FunctionName("broadcast")]
           public static async Task Broadcast([TimerTrigger("*/5 * * * * *")] TimerInfo myTimer,
           [SignalR(HubName = "serverlessSample")] IAsyncCollector<SignalRMessage> signalRMessages)
           {
               var request = new HttpRequestMessage(HttpMethod.Get, "https://api.github.com/repos/azure/azure-signalr");
               request.Headers.UserAgent.ParseAdd("Serverless");
               var response = await httpClient.SendAsync(request);
               var result = JsonConvert.DeserializeObject<GitResult>(await response.Content.ReadAsStringAsync());
               await signalRMessages.AddAsync(
                   new SignalRMessage
                   {
                       Target = "newMessage",
                       Arguments = new[] { $"Current star count of https://github.com/Azure/azure-signalr is: {result.StarCount}" }
                   });
           }
   
           private class GitResult
           {
               [JsonRequired]
               [JsonProperty("stargazers_count")]
               public string StarCount { get; set; }
           }
       }
   }
   

   Deze codes hebben drie functies. De Index wordt gebruikt om een website als client op te halen. De Negotiate wordt gebruikt voor client om toegangs token op te halen. De Broadcast krijgt periodiek het aantal sterren van GitHub en broadcast-berichten naar alle clients.

3. De clientinterface van dit voorbeeld is een webpagina. Gezien het lezen van HTML-inhoud content/index.html in GetHomePage de functie, maakt u een nieuw bestand index.html in de map onder de content hoofdmap van het 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. Werk uw *.csproj bij om de inhoudspagina in de uitvoermap van de build te maken.

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

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

      

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

      

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

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

6. 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 moet Azure Storage, maar u kunt de lokale opslagemulator gebruiken wanneer de functie lokaal wordt uitgevoerd. Als er een foutbericht wordt weergegeven There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid. 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.