Quickstart: Een app maken met het aantal GitHub-sterren met Azure Functions en SignalR Service via C#

Artikel
11/16/2023

In dit artikel leert u hoe u SignalR Service en Azure Functions gebruikt om een serverloze toepassing te bouwen met C# om berichten naar clients uit te zenden.

In-proces
Geïsoleerd proces

Notitie

U kunt de code ophalen die in dit artikel wordt vermeld in GitHub.

Vereisten

Voor deze quickstart zijn de volgende vereisten vereist:

Visual Studio Code of andere code-editor. Als u Visual Studio Code nog niet hebt geïnstalleerd, downloadt u Visual Studio Code hier.
Een Azure-abonnement. Als u geen Azure-abonnement hebt, kunt u er gratis een maken voordat u begint.
Azure Functions Core Tools
.NET Core-SDK

Een Azure SignalR Service-exemplaar maken

In deze sectie maakt u een azure SignalR-basisexemplaren die u voor uw app kunt gebruiken. In de volgende stappen wordt Azure Portal gebruikt om een nieuw exemplaar te maken, maar u kunt ook de Azure CLI gebruiken. Zie de opdracht az signalr create in de Naslaginformatie over azure SignalR Service CLI voor meer informatie.

Meld u aan bij de Azure-portal.
Selecteer in de linkerbovenhoek van de pagina + Een resource maken.
Voer op de pagina Een resource maken in het tekstvak Search-service s en Marketplace signalr in en selecteer vervolgens SignalR Service in de lijst.
Selecteer Maken op de pagina SignalR Service.
Voer op het tabblad Basisinformatie de essentiële informatie in voor uw nieuwe SignalR Service-exemplaar. Voer de volgende waarden in:

Veld	Voorgestelde waarde	Beschrijving
Abonnement	Kies uw abonnement	Selecteer het abonnement dat u wilt gebruiken om een nieuw SignalR Service-exemplaar te maken.
Resourcegroep	Maak een resourcegroep met de naam SignalRTestResources	Selecteer of maak een resourcegroep voor uw SignalR-resource. Het is handig om een nieuwe resourcegroep te maken voor deze zelfstudie in plaats van een bestaande resourcegroep te gebruiken. Als u resources wilt vrijmaken nadat u de zelfstudie hebt voltooid, verwijdert u de resourcegroep. Als u een resourcegroep verwijdert, worden ook alle resources verwijderd die deel uitmaken van de groep. Deze actie kan niet ongedaan worden gemaakt. Voordat u een resourcegroep verwijdert, moet u ervoor zorgen dat deze geen resources bevat die u wilt behouden. Zie Resourcegroepen gebruiken om Azure-resources te beheren voor meer informatie.
Resourcenaam	testsignalr	Voer een unieke resourcenaam in voor de SignalR-resource. Als testsignalr al in uw regio wordt gebruikt, voegt u een cijfer of teken toe totdat de naam uniek is. De naam moet een tekenreeks zijn van 1 tot 63 tekens die alleen cijfers, letters en het koppelteken (`-`) mag bevatten. De naam kan niet beginnen of eindigen met het afbreekstreepje en opeenvolgende afbreekstreepjes zijn niet geldig.
Regio	Uw regio kiezen	Selecteer de juiste regio voor uw nieuwe SignalR Service-exemplaar. Azure SignalR Service is momenteel niet beschikbaar in alle regio's. Zie beschikbaarheid van azure SignalR-serviceregio's voor meer informatie
Prijscategorie	Selecteer Wijzigen en kies vervolgens Gratis (alleen dev/test). Kies Selecteren om uw keuze in de prijscategorie te bevestigen.	Azure SignalR Service heeft drie prijscategorieën: Gratis, Standard en Premium. Zelfstudies gebruiken de gratis laag, tenzij anders vermeld in de vereisten. Zie prijzen voor Azure SignalR Service voor meer informatie over de verschillen in functionaliteit tussen lagen en prijzen
Servicemodus	De juiste servicemodus kiezen	Gebruik standaard wanneer u de Logica van de SignalR-hub in uw web-apps host en SignalR-service als proxy gebruikt. Gebruik serverloos wanneer u serverloze technologieën zoals Azure Functions gebruikt om de SignalR-hublogica te hosten. Klassieke modus is alleen bedoeld voor compatibiliteit met eerdere versies en wordt niet aanbevolen om te gebruiken. Zie de servicemodus in Azure SignalR Service voor meer informatie.

U hoeft de instellingen niet te wijzigen op de tabbladen Netwerken en tags voor de SignalR-zelfstudies.

Selecteer de knop Beoordelen en maken onder aan het tabblad Basisbeginselen .
Controleer op het tabblad Beoordelen en maken de waarden en selecteer Vervolgens Maken. Het duurt even voordat de implementatie is voltooid.
Wanneer de implementatie is voltooid, selecteert u de knop Ga naar resource .
Selecteer op de pagina SignalR-resource sleutels in het menu aan de linkerkant, onder Instellingen.
Kopieer de Verbinding maken iontekenreeks voor de primaire sleutel. U hebt deze verbindingsreeks nodig om uw app verderop in deze zelfstudie te configureren.

De Azure-functie lokaal instellen en uitvoeren

Voor deze stap hebt u de Azure Functions Core Tools nodig.

Maak een lege map en ga met de opdrachtregel naar de map.

Initialiseer een nieuw project.

In-proces
Geïsoleerd 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

Maak met de code-editor een nieuw bestand met de naam Function.cs. Voeg de volgende code toe aan Function.cs:

In-proces
Geïsoleerd 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; }
    }
}

De code in Function.cs heeft drie functies:

GetHomePage wordt gebruikt om een website als client op te halen.
Negotiate wordt door de client gebruikt om een toegangstoken op te halen.
Broadcast wordt periodiek aangeroepen om het aantal sterren op te halen van GitHub en vervolgens berichten naar alle clients uit te zenden.

De clientinterface voor dit voorbeeld is een webpagina. We geven de webpagina weer met behulp van de GetHomePage functie door HTML-inhoud uit bestand content/index.html te lezen. Nu gaan we deze index.html maken onder de content submap met de volgende inhoud:

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

Werk de *.csproj pagina bij om de inhoudspagina in de uitvoermap van de build te maken.

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

Azure Functions vereist dat een opslagaccount werkt. U kunt de Azure Storage Emulator installeren en uitvoeren. U kunt de instelling ook bijwerken om uw echte opslagaccount te gebruiken met de volgende opdracht:
```
func settings add AzureWebJobsStorage "<storage-connection-string>"
```
Het is bijna klaar. De laatste stap is het instellen van een verbindingsreeks van de SignalR-service op Azure Function-instellingen.
1. Controleer of het SignalR Service-exemplaar is gemaakt door te zoeken naar de naam ervan in het zoekvak boven aan de portal. Selecteer het exemplaar om het te openen.
2. Selecteer Sleutels om de verbindingsreeksen voor het service-exemplaar van SignalR weer te geven.
3. Kopieer de primaire verbindingsreeks en voer vervolgens de volgende opdracht uit:
```
func settings add AzureSignalRConnectionString "<signalr-connection-string>"
```
Voer de Azure-functie lokaal uit:
```
func start
```
Nadat de Azure-functie lokaal wordt uitgevoerd, opent http://localhost:7071/api/indexu deze en ziet u het huidige aantal sterren. Als u in GitHub star of unstar gebruikt, krijgt u elke paar seconden een steraantal dat wordt vernieuwd.

Resources opschonen

Als u deze app niet verder gaat gebruiken, kunt u alle resources verwijderen die door deze Quick Start zijn aangemaakt door de onderstaande stappen te volgen, zodat u geen kosten in rekening worden gebracht:

Selecteer links in de Azure-portal de optie Resourcegroepen en selecteer vervolgens de resourcegroep die u hebt gemaakt. U kunt ook het zoekvak gebruiken om de resourcegroep op de naam te zoeken.
Selecteer in het venster dat wordt geopend, de resourcegroep en klik op Resourcegroep verwijderen.
Voer in het nieuwe venster de naam in van de resourcegroep die u wilt verwijderen en klik vervolgens op Verwijderen.

Ondervindt u problemen? Probeer de gids voor probleemoplossing of laat het ons weten.

Volgende stappen

In deze quickstart hebt u lokaal een serverloze toepassing zonder realtime gemaakt en uitgevoerd. Lees vervolgens meer over bidirectionele communicatie tussen clients en Azure Functions met Azure SignalR Service.

SignalR Service-bindingen voor Azure Functions

Voorbeeld van bidirectionele communicatie in Azure Functions

Voorbeeld van bidirectionele communicatie in Azure Functions voor geïsoleerd proces

Implementeren in Azure Function-app met Visual Studio