Rövid útmutató: GitHub-csillagszámlálót megjelenítő alkalmazás létrehozása az Azure Functions és a SignalR Service használatával C-n keresztül#

Ebből a cikkből megtudhatja, hogyan használhatja a SignalR Service-t és az Azure Functionst kiszolgáló nélküli alkalmazás létrehozására C# használatával az ügyfeleknek küldött üzenetek küldéséhez.

Folyamatban

Megjegyzés:

A cikkben említett kódot a GitHubról szerezheti be.

Izolált folyamat

Megjegyzés:

A cikkben említett kódot a GitHubról szerezheti be.

Előfeltételek

A rövid útmutatóhoz a következő előfeltételek szükségesek:

• Visual Studio Code vagy más kódszerkesztő. Ha még nincs telepítve a Visual Studio Code, töltse le ide a Visual Studio Code-ot.
• Azure-előfizetés. Ha nem rendelkezik Azure-előfizetéssel, a kezdés előtt hozzon létre egyet ingyenesen .
• Azure Functions Core Tools
• .NET Core SDK

Azure SignalR Service-példány létrehozása

Ebben a szakaszban egy alapszintű Azure SignalR-példányt hoz létre az alkalmazáshoz. Az alábbi lépések az Azure Portal használatával hoznak létre új példányt, de használhatja az Azure CLI-t is. További információ: az signalr create command in the Azure SignalR Service CLI Reference.

1. Jelentkezzen be az Azure Portalra.
2. A lap bal felső részén válassza az + Erőforrás létrehozása lehetőséget.
3. Az Erőforrás létrehozása lap Search szolgáltatás és piactér szövegmezőjében adja meg a signalr kifejezést, majd válassza ki a SignalR szolgáltatást a listából.
4. A SignalR szolgáltatás oldalán válassza a Létrehozás lehetőséget.
5. Az Alapok lapon adja meg az új SignalR-szolgáltatáspéldány alapvető adatait. Írja be a következő értékeket:

Mező	Ajánlott érték	Leírás
Subscription	Válassza ki az előfizetését	Válassza ki azt az előfizetést, amelyet egy új SignalR-szolgáltatáspéldány létrehozásához szeretne használni.
Erőforráscsoport	SignalRTestResources nevű erőforráscsoport létrehozása	Válasszon ki vagy hozzon létre egy erőforráscsoportot a SignalR-erőforráshoz. Hasznos, ha egy új erőforráscsoportot hoz létre ehhez az oktatóanyaghoz ahelyett, hogy meglévő erőforráscsoportot használ. Ha az oktatóanyag elvégzése után szeretné felszabadítani az erőforrásokat, törölje az erőforráscsoportot. Az erőforráscsoport törlése a csoporthoz tartozó összes erőforrást is törli. This action can't be undone. Mielőtt töröl egy erőforráscsoportot, győződjön meg arról, hogy nem tartalmazza a megtartani kívánt erőforrásokat. További információk: Erőforráscsoportok használata az Azure-erőforrások kezeléséhez.
Erőforrás neve	testsignalr	Írja be a SignalR-erőforráshoz használandó egyedi erőforrásnevet. Ha a testsignalr már szerepel a régióban, adjon hozzá egy számjegyet vagy karaktert, amíg a név egyedi nem lesz. A névnek 1–63 karakter hosszúságú sztringnek kell lennie, és csak számokat, betűket és kötőjelet (-) tartalmazhat. A név nem kezdődhet és nem végződhet kötőjeljellel, és az egymást követő kötőjelkarakterek érvénytelenek.
Region	Régió kiválasztása	Válassza ki az új SignalR-szolgáltatáspéldány megfelelő régióját. Az Azure SignalR szolgáltatás jelenleg nem érhető el minden régióban. További információ: Azure SignalR Service-régió rendelkezésre állása
Tarifacsomag	Válassza a Módosítás lehetőséget, majd válassza az Ingyenes (Csak dev/Test) lehetőséget. Válassza a Kiválasztás lehetőséget a tarifacsomag kiválasztásának megerősítéséhez.	Az Azure SignalR szolgáltatás három tarifacsomagot tartalmaz: ingyenes, standard és prémium. Az oktatóanyagok az ingyenes szintet használják, hacsak az előfeltételek másként nem rendelkeznek. A szintek és a díjszabás közötti funkcióbeli különbségekről további információt az Azure SignalR Service díjszabásában talál .
Szolgáltatás mód	Válassza ki a megfelelő szolgáltatási módot	Az Alapértelmezett beállítást akkor használja, ha a SignalR hub logikáját üzemelteti a webalkalmazásokban, és proxyként használja a SignalR szolgáltatást. Kiszolgáló nélküli technológiát, például az Azure Functionst használva üzemeltetheti a SignalR hub logikáját. A klasszikus mód csak a visszamenőleges kompatibilitást szolgálja, ezért nem ajánlott használni. További információ: Szolgáltatás mód az Azure SignalR Service-ben.

A SignalR-oktatóanyagok Hálózatkezelés és Címkék lapján nem kell módosítania a beállításokat.

6. Válassza az Alapismeretek lap alján található Véleményezés + létrehozás gombot.
7. A Véleményezés + létrehozás lapon tekintse át az értékeket, majd válassza a Létrehozás lehetőséget. Az üzembe helyezés végrehajtása néhány percet vesz igénybe.
8. Amikor az üzembe helyezés befejeződött, válassza az Erőforrás megnyitása gombot.
9. A SignalR erőforráslapján válassza a bal oldali menü kulcsait a Gépház alatt.
10. Másolja ki az elsődleges kulcshoz tartozó Csatlakozás ion sztringet. Erre a kapcsolati sztring van szüksége az alkalmazás konfigurálásához az oktatóanyag későbbi részében.

Az Azure-függvény helyi beállítása és futtatása

Ehhez a lépéshez szüksége lesz az Azure Functions Core-eszközökre.

1. Hozzon létre egy üres könyvtárat, és váltson a címtárra a parancssor használatával.

2. Új projekt inicializálása.

   Folyamatban

   # 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
   

   Izolált folyamat

   # Initialize a function project
   func init --worker-runtime dotnet-isolated
   
   # Add extensions package references to the project
   dotnet add package Microsoft.Azure.Functions.Worker.Extensions.Http
   dotnet add package Microsoft.Azure.Functions.Worker.Extensions.SignalRService
   dotnet add package Microsoft.Azure.Functions.Worker.Extensions.Timer
   

3. A kódszerkesztővel hozzon létre egy új fájlt Function.cs néven. Adja hozzá a következő kódot a Function.cs fájlhoz:

   Folyamatban

   using System;
   using System.IO;
   using System.Linq;
   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();
           private static string Etag = string.Empty;
           private static string StarCount = "0";
   
           [FunctionName("index")]
           public static IActionResult GetHomePage([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 = "serverless")] SignalRConnectionInfo connectionInfo)
           {
               return connectionInfo;
           }
   
           [FunctionName("broadcast")]
           public static async Task Broadcast([TimerTrigger("*/5 * * * * *")] TimerInfo myTimer,
           [SignalR(HubName = "serverless")] IAsyncCollector<SignalRMessage> signalRMessages)
           {
               var request = new HttpRequestMessage(HttpMethod.Get, "https://api.github.com/repos/azure/azure-signalr");
               request.Headers.UserAgent.ParseAdd("Serverless");
               request.Headers.Add("If-None-Match", Etag);
               var response = await httpClient.SendAsync(request);
               if (response.Headers.Contains("Etag"))
               {
                   Etag = response.Headers.GetValues("Etag").First();
               }
               if (response.StatusCode == System.Net.HttpStatusCode.OK)
               {
                   var result = JsonConvert.DeserializeObject<GitResult>(await response.Content.ReadAsStringAsync());
                   StarCount = result.StarCount;
               }
   
               await signalRMessages.AddAsync(
                   new SignalRMessage
                   {
                       Target = "newMessage",
                       Arguments = new[] { $"Current star count of https://github.com/Azure/azure-signalr is: {StarCount}" }
                   });
           }
   
           private class GitResult
           {
               [JsonRequired]
               [JsonProperty("stargazers_count")]
               public string StarCount { get; set; }
           }
       }
   }
   

   Izolált folyamat

   using System.Net;
   using System.Net.Http.Json;
   using System.Text.Json.Serialization;
   using Microsoft.Azure.Functions.Worker;
   using Microsoft.Azure.Functions.Worker.Http;
   
   namespace csharp_isolated;
   
   public class Functions
   {
       private static readonly HttpClient HttpClient = new();
       private static string Etag = string.Empty;
       private static int StarCount = 0;
   
       [Function("index")]
       public static HttpResponseData GetHomePage([HttpTrigger(AuthorizationLevel.Anonymous)] HttpRequestData req)
       {
           var response = req.CreateResponse(HttpStatusCode.OK);
           response.WriteString(File.ReadAllText("content/index.html"));
           response.Headers.Add("Content-Type", "text/html");
           return response;
       }
   
       [Function("negotiate")]
       public static HttpResponseData Negotiate([HttpTrigger(AuthorizationLevel.Anonymous)] HttpRequestData req,
           [SignalRConnectionInfoInput(HubName = "serverless")] string connectionInfo)
       {
           var response = req.CreateResponse(HttpStatusCode.OK);
           response.Headers.Add("Content-Type", "application/json");
           response.WriteString(connectionInfo);
           return response;
       }
   
       [Function("broadcast")]
       [SignalROutput(HubName = "serverless")]
       public static async Task<SignalRMessageAction> Broadcast([TimerTrigger("*/5 * * * * *")] TimerInfo timerInfo)
       {
           var request = new HttpRequestMessage(HttpMethod.Get, "https://api.github.com/repos/azure/azure-signalr");
           request.Headers.UserAgent.ParseAdd("Serverless");
           request.Headers.Add("If-None-Match", Etag);
           var response = await HttpClient.SendAsync(request);
           if (response.Headers.Contains("Etag"))
           {
               Etag = response.Headers.GetValues("Etag").First();
           }
           if (response.StatusCode == HttpStatusCode.OK)
           {
               var result = await response.Content.ReadFromJsonAsync<GitResult>();
               if (result != null)
               {
                   StarCount = result.StarCount;
               }
           }
           return new SignalRMessageAction("newMessage", new object[] { $"Current star count of https://github.com/Azure/azure-signalr is: {StarCount}" });
       }
   
       private class GitResult
       {
           [JsonPropertyName("stargazers_count")]
           public int StarCount { get; set; }
       }
   }
   

   A Function.cs kódjának három függvénye van:

   • GetHomePage egy webhely ügyfélként való lekérésére szolgál.
   • Negotiate az ügyfél használja a hozzáférési jogkivonat lekéréséhez.
   • Broadcast rendszeres időközönként meghívják, hogy lekérje a csillagszámot a GitHubról, majd üzeneteket közvetítsen az összes ügyfélnek.

4. A minta ügyfélfelülete egy weblap. A weblapot a függvény használatával jelenítjük meg, GetHomePage ha HTML-tartalmat olvasunk a fájlból content/index.html. Most hozzuk létre ezt az index.html fájlt az content alkönyvtárban a következő tartalommal:

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

5. Frissítse a *.csproj tartalmat úgy, hogy a tartalomlap a build kimeneti mappájában legyen.

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

6. Az Azure Functions használatához egy tárfiók szükséges. Telepítheti és futtathatja az Azure Storage Emulatort. Vagy frissítheti a beállítást úgy, hogy a valódi tárfiókot használja a következő paranccsal:

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

7. Már majdnem elkészült. Az utolsó lépés a SignalR szolgáltatás kapcsolati sztring beállítása azure-függvénybeállításokra.

   1. Győződjön meg arról, hogy a SignalR szolgáltatáspéldány sikeresen létrejött, ha a portál tetején található keresőmezőben keresi a nevét. A megnyitáshoz válassza ki a példányt.

      

   2. Válassza a Kulcsok elemet a SignalR-szolgáltatáspéldány kapcsolati sztringjeinek megtekintéséhez.

      

   3. Másolja ki az elsődleges kapcsolati sztring, majd futtassa a következő parancsot:

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

8. Futtassa helyileg az Azure-függvényt:

   func start
   

   Miután az Azure-függvény helyileg fut, nyissa meg http://localhost:7071/api/index, és láthatja az aktuális csillagszámot. Ha a GitHubon csillagot vagy csillagot választ ki, néhány másodpercenként frissül a csillagszám.

Clean up resources

Ha nem használja tovább az alkalmazást, akkor a következő lépésekkel a mintaalkalmazás által létrehozott összes erőforrást törölheti a költségek elkerülése érdekében:

1. Az Azure Portalon válassza az Erőforráscsoportok lehetőséget a bal szélen, majd a létrehozott erőforráscsoport. Másik lehetőségként a keresőmezőben, név alapján is rákereshet az erőforráscsoportra.

2. Az ekkor megnyíló új ablakban válassza ki az erőforráscsoportot, és kattintson az Erőforráscsoport törlése elemre.

3. Az új ablakban írja be a törölni kívánt erőforráscsoport nevét, majd kattintson a Törlés elemre.

Problémákat tapasztal? Próbálja ki a hibaelhárítási útmutatót , vagy tudassa velünk.

Következő lépések

Ebben a rövid útmutatóban helyileg készített és futtatott egy valós idejű kiszolgáló nélküli alkalmazást. Ezután további információ az ügyfelek és az Azure Functions közötti kétirányú kommunikációról az Azure SignalR Szolgáltatással.

SignalR-szolgáltatáskötések az Azure Functionshez

Azure Functions kétirányú kommunikációs minta

Azure Functions kétirányú kommunikációs minta izolált folyamathoz

Üzembe helyezés az Azure-függvényalkalmazásban a Visual Studióval