Snabbstart: Skapa en app som visar GitHub stjärnantal med hjälp Azure Functions och SignalR Service med C#

Med Azure SignalR Service kan du enkelt lägga till realtidsfunktioner i ditt program. Azure Functions är en serverlös plattform som gör att du kan köra din kod utan att behöva hantera någon infrastruktur. I den här snabbstarten lär du dig hur du använder SignalR Service och Azure Functions för att skapa ett serverlöst program med C# för att skicka meddelanden till klienter.

Förutsättningar

Om du inte redan har Visual Studio Code kan du ladda ned och använda det kostnadsfritt( https://code.visualstudio.com/Download) .

Du kan också köra den här självstudien på kommandoraden (macOS, Windows eller Linux) med hjälp av Azure Functions Core Tools). Även .NET Core SDKoch din favoritkodredigerare.

Om du inte har en Azure-prenumeration kan du skapa en utan kostnad innan du börjar.

Har du problem? Prova felsökningsguiden eller berätta för oss.

Logga in på Azure och skapa en SignalR Service instans

Logga in på Azure-portalen på https://portal.azure.com/ med ditt Azure-konto.

Har du problem? Prova felsökningsguiden eller berätta för oss.

Skapa en Azure SignalR Service-instans

Din app ansluter till en SignalR Service-instans i Azure.

1. Välj knappen Nytt högst upp till vänster i Azure-portalen. På sidan Nytt skriver du SignalR Service i sökrutan och trycker på RETUR.

   

2. Välj SignalR Service i sökresultatet och välj sedan Skapa.

3. Ange följande inställningar.

   Inställning	Föreslaget värde	Beskrivning
   Resurs namn	Globalt unikt namn	Namn som identifierar din nya SignalR Service-instans. Giltiga tecken är a-z, 0-9 och -.
   Prenumeration	Din prenumeration	Prenumerationen som den här nya SignalR Service-instansen har skapats i.
   Resursgrupp	myResourceGroup	Namnet på den nya resursgruppen som SignalR Service-instansen ska skapas i.
   Plats	USA, västra	Välj en region nära dig.
   Prisnivå	Kostnadsfri	Prova Azure SignalR Service kostnadsfritt.
   Antal enheter	Inte tillämpligt	Antal enheter anger hur många anslutningar som SignalR Service-instansen kan acceptera. Det kan bara konfigureras på Standard-nivån.
   Tjänstläge	Utan server	För användning med Azure Functions eller REST API.

   

4. Välj Skapa för att börja distribuera SignalR Service-instansen.

5. När instansen har distribuerats öppnar du den i portalen och letar upp dess inställnings sida. Ändra inställningen för tjänst läge till endast Server om du använder Azure SignalR-tjänsten via Azure Functions bindning eller REST API. Lämna det i klassiskt eller i annat fall.

Har du problem? Prova felsökningsguiden eller berätta för oss.

Konfigurera och köra Azure-funktionen lokalt

1. Kontrollera att Azure Function Core Tools är installerat. Och skapa en tom katalog och gå till katalogen med kommandoraden.

   # 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. När du har initierat ett projekt. Skapa en ny fil med namnet Function.cs. Lägg till följande kod i 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; }
           }
       }
   }
   

   Dessa koder har tre funktioner. Indexanvänds för att hämta en webbplats som klient. används Negotiate för att klienten ska kunna hämta åtkomsttoken. Broadcasthämtar regelbundet antal stjärnor från GitHub och sänder meddelanden till alla klienter.

3. Klientgränssnittet för det här exemplet är en webbsida. Vi läste HTML-innehåll från content/index.html i funktionen och skapade en ny fil i katalogen under projektets GetHomePage index.html content rotmapp. Och kopiera följande innehåll.

   <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. Uppdatera så *.csproj att innehållssidan blir i utdatamappen för versionen.

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

5. Det är nästan klart nu. Det sista steget är att ange en anslutningssträng för SignalR Service till Azure Function-inställningar.

   1. I den webbläsare där Azure-portalen är öppnad bekräftar du att den SignalR Service-instans som du distribuerade tidigare skapades korrekt genom att söka efter dess namn i sökrutan längst upp i portalen. Välj instansen för att öppna den.

      

   2. Välj Nycklar för att visa anslutningssträngarna för SignalR Service-instansen.

      

   3. Kopiera den primära anslutningssträngen. Och kör kommandot nedan.

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

6. Kör Azure-funktionen lokalt:

   func start
   

   När Azure-funktionen körs lokalt. Använd webbläsaren för att besöka http://localhost:7071/api/index och du kan se det aktuella stjärnantalet. Och om du star eller unstar i GitHub får du ett stjärnantal som uppdateras med några sekunders mellanrum.

   Anteckning

   SignalR-bindning Azure Storage, men du kan använda den lokala lagringsemulatorn när funktionen körs lokalt. Om du får ett felmeddelande som There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid. Du måste ladda ned och aktivera Storage Emulator

Har du problem? Prova felsökningsguiden eller berätta för 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:

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

2. Markera resursgruppen i fönstret som öppnas och klicka sedan på Ta bort resursgrupp.

3. I det nya fönstret, skriv namnet på resursgruppen som ska tas bort och klicka sedan på Ta bort.

Har du problem? Prova felsökningsguiden eller berätta för oss.

Nästa steg

I den här snabbstarten skapade och körde du ett serverlöst realtidsprogram lokalt. Läs mer om hur du använder SignalR Service-bindningar för Azure Functions. Härnäst får du lära dig mer om dubbelriktad kommunikation mellan klienter och Azure-funktionen med SignalR Service.