Rychlý start: Vytvoření aplikace zobrazující počet hvězd GitHubu se službou Azure Functions a službou SignalR prostřednictvím jazyka C#

Článek
11/16/2023

V tomto článku se dozvíte, jak pomocí služby SignalR a Azure Functions sestavit bezserverovou aplikaci s jazykem C# pro vysílání zpráv klientům.

Probíhá proces
Izolovaný proces

Poznámka:

Kód uvedený v tomto článku můžete získat z GitHubu.

Předpoklady

Pro účely tohoto rychlého startu jsou potřeba následující požadavky:

Visual Studio Code nebo jiný editor kódu Pokud ještě nemáte visual Studio Code nainstalovaný, stáhněte si Visual Studio Code sem.
Předplatné Azure. Pokud nemáte předplatné Azure, vytvořte si ho zdarma , než začnete.
Azure Functions Core Tools
Sada .NET Core SDK

Vytvoření instance služby Azure SignalR Service

V této části vytvoříte základní instanci Azure SignalR, která se použije pro vaši aplikaci. Následující kroky používají azure Portal k vytvoření nové instance, ale můžete také použít Azure CLI. Další informace najdete v tématu az signalr create command in the Azure SignalR Service CLI Reference.

Přihlaste se k portálu Azure.
V levém horním rohu stránky vyberte + Vytvořit prostředek.
Na stránce Vytvořit prostředek v textovém poli Search s a marketplace zadejte signalr a ze seznamu vyberte Službu SignalR.
Na stránce Služby SignalR vyberte Vytvořit.
Na kartě Základy zadáte základní informace pro novou instanci služby SignalR. Zadejte následující hodnoty:

Pole	Navrhovaná hodnota	Popis
Předplatné	Zvolte si předplatné.	Vyberte předplatné, které chcete použít k vytvoření nové instance služby SignalR.
Skupina prostředků	Vytvoření skupiny prostředků s názvem SignalRTestResources	Vyberte nebo vytvořte skupinu prostředků pro prostředek služby SignalR. Místo použití existující skupiny prostředků je užitečné vytvořit novou skupinu prostředků pro účely tohoto kurzu. Pokud chcete po dokončení kurzu uvolnit prostředky, odstraňte skupinu prostředků. Odstraněním skupiny prostředků se odstraní také všechny prostředky, které patří do skupiny. Tuto akci nelze vrátit zpět. Před odstraněním skupiny prostředků se ujistěte, že neobsahuje prostředky, které chcete zachovat. Další informace najdete v článku Použití skupin prostředků ke správě prostředků Azure.
Název prostředku	testsignalr	Zadejte jedinečný název prostředku, který se použije pro prostředek služby SignalR. Pokud je testsignalr už ve vaší oblasti pořízený, přidejte číslici nebo znak, dokud nebude název jedinečný. Název musí být řetězec 1 až 63 znaků a musí obsahovat jenom číslice, písmena a pomlčka (`-`). Název nemůže začínat ani končit znakem spojovníku a po sobě jdoucí znaky spojovníku nejsou platné.
Oblast	Vyberte vaši oblast	Vyberte příslušnou oblast pro novou instanci služby SignalR. Služba Azure SignalR není v současné době dostupná ve všech oblastech. Další informace najdete v tématu Dostupnost oblasti služby Azure SignalR Service.
Cenová úroveň	Vyberte Změnit a pak zvolte Free (pouze vývoj/testování). Zvolením možnosti Vybrat potvrďte svou volbu cenové úrovně.	Služba Azure SignalR má tři cenové úrovně: Free, Standard a Premium. Kurzy používají úroveň Free , pokud není uvedeno jinak v požadavcích. Další informace o rozdílech funkcí mezi úrovněmi a cenami najdete v tématu Ceny služby Azure SignalR.
Režim služby	Volba příslušného režimu služby	Použití výchozího nastavení při hostování logiky centra SignalR ve webových aplikacích a použití služby SignalR jako proxy serveru. Bezserverové použití bezserverových technologií, jako je Azure Functions, k hostování logiky centra SignalR. Klasický režim je pouze kvůli zpětné kompatibilitě a nedoporučuje se používat. Další informace najdete v tématu Režim služby ve službě Azure SignalR.

V kurzech SignalR nemusíte měnit nastavení na kartách Sítě a značky .

Vyberte tlačítko Zkontrolovat a vytvořit v dolní části karty Základy.
Na kartě Zkontrolovat a vytvořit zkontrolujte hodnoty a pak vyberte Vytvořit. Dokončení nasazení chvíli trvá.
Po dokončení nasazení vyberte tlačítko Přejít k prostředku .
Na stránce prostředku SignalR vyberte v nabídce na levé straně v části Nastavení.
Zkopírujte řetězec Připojení ion pro primární klíč. Tuto připojovací řetězec budete potřebovat ke konfiguraci aplikace později v tomto kurzu.

Místní nastavení a spuštění funkce Azure Functions

Pro tento krok budete potřebovat nástroje Azure Functions Core Tools.

Vytvořte prázdný adresář a přejděte do adresáře pomocí příkazového řádku.

Inicializace nového projektu

Probíhá proces
Izolovaný proces

# 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

# 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

Pomocí editoru kódu vytvořte nový soubor s názvem Function.cs. Do souboru Function.cs přidejte následující kód:

Probíhá proces
Izolovaný proces

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

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

Kód v souboru Function.cs má tři funkce:

GetHomePage slouží k získání webu jako klienta.
Negotiate klient ho používá k získání přístupového tokenu.
Broadcast se pravidelně volá, aby se z GitHubu získal počet hvězdiček a pak se zprávy vysílaly všem klientům.

Klientské rozhraní pro tuto ukázku je webová stránka. Webovou stránku vykreslíme GetHomePage pomocí funkce čtením obsahu HTML ze souboru content/index.html. Teď vytvoříme tento index.html v podadresáři content s následujícím obsahem:

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

Aktualizujte *.csproj stránku obsahu ve výstupní složce sestavení.

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

Azure Functions vyžaduje, aby fungoval účet úložiště. Emulátor služby Azure Storage můžete nainstalovat a spustit. Nebo můžete nastavení aktualizovat tak, aby používalo skutečný účet úložiště pomocí následujícího příkazu:
```
func settings add AzureWebJobsStorage "<storage-connection-string>"
```
Už je to skoro hotové. Posledním krokem je nastavení připojovací řetězec služby SignalR na nastavení funkce Azure Functions.
1. Ověřte, že se instance služby SignalR úspěšně vytvořila, a to vyhledáním jejího názvu do vyhledávacího pole v horní části 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>"
```
Spusťte funkci Azure místně:
```
func start
```
Jakmile je funkce Azure spuštěná místně, otevřete http://localhost:7071/api/indexji a zobrazí se aktuální počet hvězdiček. Pokud v GitHubu zvědíte nebo zrušíte hvězdičku, získáte každých několik sekund aktualizaci počtu hvězdiček.

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:

Ú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.
V okně, které se otevře, vyberte příslušnou skupinu prostředků a pak klikněte na Odstranit skupinu prostředků.
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 vytvořili a spustili aplikaci bez serveru v reálném čase místně. V dalším kroku se dozvíte více o obousměrné komunikaci mezi klienty a Azure Functions se službou Azure SignalR Service.

Vazby služby SignalR pro Azure Functions

Ukázka obousměrné komunikace ve službě Azure Functions

Ukázka obousměrné komunikace azure Functions pro izolovaný proces

Nasazení do aplikace Funkcí Azure pomocí sady Visual Studio