Snabbstart: Skapa en app som visar Antalet GitHub-stjärnor med Azure Functions och SignalR Service via C#

Artikel
05/16/2024

I den här artikeln får du lära dig hur du använder SignalR Service och Azure Functions för att skapa ett serverlöst program med C# för att sända meddelanden till klienter.

Pågående
Isolerad process

Kommentar

Du kan hämta koden som nämns i den här artikeln från GitHub.

Förutsättningar

Följande krav krävs för den här snabbstarten:

Visual Studio Code eller annan kodredigerare. Om du inte redan har Visual Studio Code installerat laddar du ned Visual Studio Code här.
En Azure-prenumeration Om du inte har en Azure-prenumeration skapar du en kostnadsfritt innan du börjar.
Azure Functions Core Tools
.NET Core SDK

Skapa en Azure SignalR Service-instans

I det här avsnittet skapar du en grundläggande Azure SignalR-instans som ska användas för din app. Följande steg använder Azure-portalen för att skapa en ny instans, men du kan också använda Azure CLI. Mer information finns i kommandot az signalr create i Cli-referensen för Azure SignalR Service.

Logga in på Azure-portalen.
Välj + Skapa en resurs längst upp till vänster på sidan.
På sidan Skapa en resurs går du till textrutan tjänsten Search s och marketplace och anger signalr och väljer sedan SignalR Service i listan.
På sidan SignalR Service väljer du Skapa.
På fliken Grundläggande anger du viktig information för din nya SignalR Service-instans. Ange följande värden:

Fält	Föreslaget värde	beskrivning
Abonnemang	Välj din prenumeration	Välj den prenumeration som du vill använda för att skapa en ny SignalR Service-instans.
Resursgrupp	Skapa en resursgrupp med namnet SignalRTestResources	Välj eller skapa en resursgrupp för SignalR-resursen. Det är användbart att skapa en ny resursgrupp för den här självstudien i stället för att använda en befintlig resursgrupp. Om du vill frigöra resurser när du har slutfört självstudien tar du bort resursgruppen. Om du tar bort en resursgrupp tas även alla resurser som tillhör gruppen bort. Det går inte att ångra den här åtgärden. Innan du tar bort en resursgrupp kontrollerar du att den inte innehåller resurser som du vill behålla. Mer information finns i Using resource groups to manage your Azure resources (Hantera dina Azure-resurser med hjälp av resursgrupper).
Resursnamn	testsignalr	Ange ett unikt resursnamn för SignalR-resursen. Om testsignaler redan har tagits i din region lägger du till en siffra eller ett tecken tills namnet är unikt. Namnet måste vara en sträng på 1 till 63 tecken och innehålla endast siffror, bokstäver och bindestreck (`-`). Namnet kan inte starta eller sluta med bindestreckstecknet och efterföljande bindestreck är inte giltiga.
Region	Välj din region	Välj lämplig region för din nya SignalR Service-instans. Azure SignalR Service är för närvarande inte tillgängligt i alla regioner. Mer information finns i Tillgänglighet för Azure SignalR Service-regionen
Prisnivå	Välj Ändra och välj sedan Kostnadsfri (endast dev/test). Välj Välj för att bekräfta ditt val av prisnivå.	Azure SignalR Service har tre prisnivåer: Kostnadsfri, Standard och Premium. Självstudier använder den kostnadsfria nivån, om inget annat anges i förutsättningarna. Mer information om funktionsskillnader mellan nivåer och priser finns i Prissättning för Azure SignalR Service
Tjänstläge	Välj lämpligt tjänstläge	Använd Standard när du är värd för SignalR Hub-logiken i dina webbappar och använder SignalR-tjänsten som proxy. Använd Serverlös när du använder serverlösa tekniker som Azure Functions som värd för SignalR Hub-logiken. Klassiskt läge är endast för bakåtkompatibilitet och rekommenderas inte att använda. Mer information finns i Tjänstläge i Azure SignalR Service.

Du behöver inte ändra inställningarna på flikarna Nätverk och Taggar för SignalR-självstudierna.

Välj knappen Granska + skapa längst ned på fliken Grundläggande.
På fliken Granska + skapa granskar du värdena och väljer sedan Skapa. Det tar en stund innan distributionen har slutförts.
När distributionen är klar väljer du knappen Gå till resurs .
På sidan SignalR-resurs väljer du Nycklar på menyn till vänster under Inställningar.
Kopiera Anslut ionssträngen för primärnyckeln. Du behöver den här anslutningssträng för att konfigurera appen senare i den här självstudien.

Konfigurera och köra Azure-funktionen lokalt

Du behöver Azure Functions Core Tools för det här steget.

Skapa en tom katalog och ändra till katalogen med kommandoraden.

Initiera ett nytt projekt.

Pågående
Isolerad process

# 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

Använd kodredigeraren och skapa en ny fil med namnet Function.cs. Lägg till följande kod i Function.cs:

Pågående
Isolerad process

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

Koden i Function.cs har tre funktioner:

GetHomePage används för att hämta en webbplats som klient.
Negotiate används av klienten för att hämta en åtkomsttoken.
Broadcast anropas regelbundet för att hämta stjärnantalet från GitHub och sedan sända meddelanden till alla klienter.

Klientgränssnittet för det här exemplet är en webbsida. Vi renderar webbsidan GetHomePage med hjälp av funktionen genom att läsa HTML-innehåll från fil content/index.html. Nu ska vi skapa den här index.html under underkatalogen content med 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>

Uppdatera din *.csproj för att skapa innehållssidan i utdatamappen för bygget.

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

Azure Functions kräver ett lagringskonto för att fungera. Du kan installera och köra Azure Storage-emulatorn. Eller så kan du uppdatera inställningen för att använda ditt riktiga lagringskonto med följande kommando:
```
func settings add AzureWebJobsStorage "<storage-connection-string>"
```
Det är nästan klart nu. Det sista steget är att ange en anslutningssträng för SignalR Service till Azure-funktionsinställningar.
1. Bekräfta att SignalR Service-instansen har skapats genom att söka efter dess namn i sökrutan överst 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äng och kör sedan följande kommando:
```
func settings add AzureSignalRConnectionString "<signalr-connection-string>"
```
Kör Azure-funktionen lokalt:
```
func start
```
När Azure-funktionen körs lokalt öppnar http://localhost:7071/api/indexdu , och du kan se det aktuella antalet stjärnor. Om du spelar eller tar bort stjärnor på GitHub får du ett stjärnantal som uppdateras med några sekunders mellanrum.

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:

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.
Markera resursgruppen i fönstret som öppnas och klicka sedan på Ta bort resursgrupp.
I det nya fönstret skriver du namnet på resursgruppen som ska tas bort. Klicka sedan på Ta bort.

Har du problem? Prova felsökningsguiden eller meddela oss.

Nästa steg

I den här snabbstarten skapade och körde du ett serverlöst realtidsprogram lokalt. Läs sedan mer om dubbelriktad kommunikation mellan klienter och Azure Functions med Azure SignalR Service.

SignalR Service-bindningar för Azure Functions

Exempel på dubbelriktad kommunikation i Azure Functions

Exempel på dubbelriktad kommunikation i Azure Functions för isolerad process

Distribuera till Azure-funktionsappen med Visual Studio

Dela via