Rychlý start: Vytvoření aplikace zobrazující počet GitHub pomocí Azure Functions a SignalR Service pomocí jazyka C#

Služba Azure SignalR Service umožňuje snadné přidávání funkcí v reálném čase do aplikací. Řešení Azure Functions představuje bezserverovou platformu, která umožňuje spouštět kód, aniž byste museli spravovat nějakou infrastrukturu. V tomto rychlém startu se dozvíte, jak pomocí SignalR Service a Azure Functions sestavit bez serveru aplikaci s jazykem C# pro vysílání zpráv klientům.

Požadavky

Pokud ještě nemáte nainstalované Visual Studio Code, můžete si ho stáhnout a použít zdarma( https://code.visualstudio.com/Download) .

Tento kurz můžete spustit také na příkazovém řádku (macOS, Windows nebo Linux) pomocí Azure Functions Core Tools). Také je .NET Core SDKa váš oblíbený editor kódu.

Pokud ještě nemáte předplatné Azure, vytvořte si ho zdarma, než začnete.

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Přihlášení k Azure a vytvoření SignalR Service instance

Přihlaste se k webu Azure Portal na adrese https://portal.azure.com/ pomocí svého účtu Azure.

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Vytvoření instance služby Azure SignalR Service

Vaše aplikace se připojí k instanci služby SignalR Service v Azure.

1. Vyberte tlačítko Nový v levém horním rohu portálu Azure Portal. Do vyhledávacího pole na obrazovce Nový zadejte SignalR Service a stiskněte klávesu Enter.

   

2. Ve výsledcích hledání vyberte SignalR Service a pak vyberte Vytvořit.

3. Zadejte následující nastavení.

   Nastavení	Navrhovaná hodnota	Popis
   Název prostředku	Globálně jedinečný název	Název, který identifikuje novou instanci služby SignalR Service. Platné znaky jsou a-z, 0-9 a -.
   Předplatné	Vaše předplatné	Předplatné, ve kterém se nová instance služby SignalR Service vytvoří.
   Skupina prostředků	myResourceGroup	Název nové skupiny prostředků, ve které se má instance služby SignalR Service vytvořit.
   Umístění	USA – západ	Vyberte oblast , která je blízko vás.
   Cenová úroveň	Free	Vyzkoušejte si službu Azure SignalR Service zdarma.
   Počet jednotek	Neuvedeno	Počet jednotek určuje, kolik připojení může instance služby SignalR Service přijmout. To lze nakonfigurovat jen na úrovni Standard.
   Režim služby	Bez serveru	Pro použití s Azure Functions nebo REST API.

   

4. Pokud chcete začít nasazovat instanci služby SignalR Service, vyberte Vytvořit.

5. Po nasazení instance ho otevřete na portálu a najděte jeho stránku nastavení. Nastavte režim služby na možnost bez serveru jenom v případě, že používáte službu Azure Signal service prostřednictvím Azure Functions vazby nebo REST API. V opačném případě je ponechte v klasickém nebo výchozím nastavení .

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Nastavení a místní spuštění funkce Azure

1. Ujistěte se, že máte nainstalované nástroje Azure Function Core Tools. Vytvořte prázdný adresář a pomocí příkazového řádku do tohoto adresáře přejděte.

   # 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. Po inicializaci projektu. Vytvořte nový soubor s názvem Function.cs. Do souboru Function.cs přidejte následující kód.

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

   Tyto kódy mají tři funkce. slouží Index k získání webu jako klienta. Se Negotiate používá pro klienta k získání přístupového tokenu. Se Broadcast pravidelně načítá počet hvězdiček z GitHub a všesměrového vysílání zpráv všem klientům.

3. Rozhraní klienta této ukázky je webová stránka. Za to, že čteme obsah HTML z content/index.html funkce , vytvořte nový soubor v GetHomePage index.html content adresáři v kořenové složce projektu. Zkopírujte následující obsah.

   <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. Aktualizujte *.csproj soubor tak, aby stránka obsahu byla ve výstupní složce sestavení.

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

5. Už je to skoro hotové. Posledním krokem je nastavení připojovacího řetězce SignalR Service funkce Azure.

   1. V prohlížeči, ve kterém máte otevřený Azure Portal, si ověřte, že se úspěšně vytvořila instance služby SignalR Service, kterou jste nasadili dříve. Vyhledejte její název pomocí vyhledávacího pole v horní části stránky portálu. Instanci vyberte a otevřete.

      

   2. Výběrem možnosti Klíče zobrazte připojovací řetězce instance služby SignalR.

      

   3. Zkopírujte primární připojovací řetězec. A spusťte následující příkaz.

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

6. Spusťte funkci Azure v místním prostředí:

   func start
   

   Po spuštění funkce Azure Function v místním prostředí. V prohlížeči přejděte na http://localhost:7071/api/index web a uvidíte aktuální počet hvězdiček. A pokud na návěsce GitHub hvězdičky, každých pár sekund se bude aktualizován počet hvězdiček.

   Poznámka

   Vazba SignalR potřebuje Azure Storage, ale pokud je funkce spuštěná místně, můžete použít emulátor místního úložiště. Pokud se vám zobrazí nějaká There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid. chyba, například Potřebujete si stáhnout a povolit Storage Emulator

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Vyčištění prostředků

Pokud nebudete tuto aplikace nadále používat, odstraňte na základě následujícího postupu všechny prostředky vytvořené podle tohoto rychlého startu, aby se vám neúčtovaly žádné poplatky:

1. Úplně nalevo na webu Azure Portal vyberte Skupiny prostředků a pak vyberte skupinu prostředků, kterou jste vytvořili. Případně můžete použít vyhledávací pole a skupinu prostředků vyhledat podle jejího názvu.

2. V okně, které se otevře, vyberte příslušnou skupinu prostředků a pak klikněte na Odstranit skupinu prostředků.

3. V novém okně zadejte název skupiny prostředků, kterou chcete odstranit, a pak klikněte na Odstranit.

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Další kroky

V tomto rychlém startu jste sestavili a spustili aplikaci bez serveru v reálném čase v místním prostředí. Další informace o používání SignalR Service vazby pro Azure Functions. Dále se dozvíte, jak obousměrně komunikovat mezi klienty a funkcí Azure s SignalR Service.