Szybki start: tworzenie aplikacji przedstawiającej liczbę gwiazd usługi GitHub za pomocą usług Azure Functions i SignalR Service za pośrednictwem języka C#

Artykuł
11/16/2023

W tym artykule dowiesz się, jak używać usług SignalR Service i Azure Functions do tworzenia aplikacji bezserwerowej za pomocą języka C# w celu emisji komunikatów do klientów.

Proces
Proces izolowany

Uwaga

Kod wymieniony w tym artykule można pobrać z witryny GitHub.

Wymagania wstępne

W tym przewodniku Szybki start są wymagane następujące wymagania wstępne:

Visual Studio Code lub inny edytor kodu. Jeśli nie masz jeszcze zainstalowanego programu Visual Studio Code, pobierz program Visual Studio Code tutaj.
Subskrypcja Azure. Jeśli nie masz subskrypcji platformy Azure, przed rozpoczęciem utwórz je bezpłatnie .
Azure Functions Core Tools
Zestaw SDK dla platformy .NET Core

Tworzenie wystąpienia usługi Azure SignalR Service

W tej sekcji utworzysz podstawowe wystąpienie usługi Azure SignalR do użycia dla aplikacji. Poniższe kroki umożliwiają utworzenie nowego wystąpienia za pomocą witryny Azure Portal, ale można również użyć interfejsu wiersza polecenia platformy Azure. Aby uzyskać więcej informacji, zobacz polecenie az signalr create w dokumentacji interfejsu wiersza polecenia usługi Azure SignalR Service.

Zaloguj się w witrynie Azure Portal.
W lewym górnym rogu strony wybierz pozycję + Utwórz zasób.
Na stronie Tworzenie zasobu w polu tekstowym usługa wyszukiwania s i marketplace wprowadź signalr, a następnie wybierz pozycję SignalR Service z listy.
Na stronie SignalR Service wybierz pozycję Utwórz.
Na karcie Podstawy wprowadź podstawowe informacje dotyczące nowego wystąpienia usługi SignalR Service. Wprowadź następujące wartości:

Pole	Sugerowana wartość	opis
Subskrypcja	Wybierz swoją subskrypcję	Wybierz subskrypcję, której chcesz użyć, aby utworzyć nowe wystąpienie usługi SignalR Service.
Grupa zasobów:	Tworzenie grupy zasobów o nazwie SignalRTestResources	Wybierz lub utwórz grupę zasobów dla zasobu usługi SignalR. Warto utworzyć nową grupę zasobów na potrzeby tego samouczka zamiast używać istniejącej grupy zasobów. Aby zwolnić zasoby po ukończeniu samouczka, usuń grupę zasobów. Usunięcie grupy zasobów powoduje również usunięcie wszystkich zasobów należących do grupy. Tej akcji nie można cofnąć. Przed usunięciem grupy zasobów upewnij się, że nie zawiera ona zasobów, które chcesz zachować. Więcej informacji można znaleźć w temacie Using resource groups to manage your Azure resources (Używanie grup zasobów do zarządzania zasobami platformy Azure).
Nazwa zasobu	testsignalr	Podaj unikatową nazwę zasobu do użycia dla zasobu usługi SignalR. Jeśli testsignalr jest już wykonany w Twoim regionie, dodaj cyfrę lub znak, dopóki nazwa nie będzie unikatowa. Nazwa musi być ciągiem od 1 do 63 znaków i zawierać tylko cyfry, litery i znak łącznika (`-`). Nazwa nie może zaczynać ani kończyć się znakiem łącznika, a kolejne znaki łącznika są nieprawidłowe.
Region	Wybierz region	Wybierz odpowiedni region dla nowego wystąpienia usługi SignalR Service. Usługa Azure SignalR Service nie jest obecnie dostępna we wszystkich regionach. Aby uzyskać więcej informacji, zobacz Dostępność regionów usługi Azure SignalR Service
Warstwa cenowa	Wybierz pozycję Zmień , a następnie wybierz pozycję Bezpłatna (tylko tworzenie i testowanie). Wybierz pozycję Wybierz , aby potwierdzić wybór warstwy cenowej.	Usługa Azure SignalR Service ma trzy warstwy cenowe: Bezpłatna, Standardowa i Premium. Samouczki korzystają z warstwy Bezpłatna, chyba że określono inaczej w wymaganiach wstępnych. Aby uzyskać więcej informacji o różnicach funkcjonalności między warstwami i cenami, zobacz Cennik usługi Azure SignalR Service
Tryb usługi	Wybieranie odpowiedniego trybu usługi	Użyj wartości Domyślnej podczas hostowania logiki centrum SignalR w aplikacjach internetowych i używania usługi SignalR jako serwera proxy. Używaj technologii bezserwerowych , takich jak Azure Functions, do hostowania logiki centrum SignalR. Tryb klasyczny jest przeznaczony tylko dla zgodności z poprzednimi wersjami i nie jest zalecany do użycia. Aby uzyskać więcej informacji, zobacz Tryb usługi w usłudze Azure SignalR Service.

Nie musisz zmieniać ustawień na kartach Sieć i tagi samouczków usługi SignalR.

Wybierz przycisk Przejrzyj i utwórz w dolnej części karty Podstawy.
Na karcie Przeglądanie i tworzenie przejrzyj wartości, a następnie wybierz pozycję Utwórz. Ukończenie wdrożenia zajmuje kilka chwil.
Po zakończeniu wdrażania wybierz przycisk Przejdź do zasobu .
Na stronie zasobu usługi SignalR wybierz pozycję Klucze z menu po lewej stronie w obszarze Ustawienia.
Skopiuj ciąg Połączenie ion dla klucza podstawowego. Ta parametry połączenia jest potrzebna do skonfigurowania aplikacji w dalszej części tego samouczka.

Konfigurowanie i uruchamianie funkcji platformy Azure lokalnie

Do wykonania tego kroku potrzebne będą narzędzia Azure Functions Core Tools.

Utwórz pusty katalog i przejdź do katalogu przy użyciu wiersza polecenia.

Zainicjuj nowy projekt.

Proces
Proces izolowany

# 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

Za pomocą edytora kodu utwórz nowy plik o nazwie Function.cs. Dodaj następujący kod do pliku Function.cs:

Proces
Proces izolowany

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

Kod w pliku Function.cs ma trzy funkcje:

GetHomePage służy do pobierania witryny internetowej jako klienta.
Negotiate program jest używany przez klienta do uzyskiwania tokenu dostępu.
Broadcast Jest okresowo wywoływany w celu pobrania liczby gwiazdek z usługi GitHub, a następnie emisji komunikatów do wszystkich klientów.

Interfejs klienta dla tego przykładu jest stroną internetową. Renderujemy stronę internetową przy użyciu GetHomePage funkcji, odczytując zawartość HTML z content/index.html pliku. Teraz utwórzmy ten plik index.html w podkatalogu content z następującą zawartością:

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

Zaktualizuj element *.csproj , aby strona zawartości w folderze wyjściowym kompilacji.

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

Usługa Azure Functions wymaga, aby konto magazynu działało. Możesz zainstalować i uruchomić emulator usługi Azure Storage. Możesz też zaktualizować ustawienie tak, aby używało rzeczywistego konta magazynu za pomocą następującego polecenia:
```
func settings add AzureWebJobsStorage "<storage-connection-string>"
```
To prawie gotowe teraz. Ostatnim krokiem jest ustawienie parametry połączenia usługi SignalR Service na ustawienia funkcji platformy Azure.
1. Upewnij się, że wystąpienie usługi SignalR Service zostało pomyślnie utworzone, wyszukując jego nazwę w polu wyszukiwania w górnej części portalu. Wybierz wystąpienie, aby je otworzyć.
2. Wybierz pozycję Klucze, aby wyświetlić parametry połączenia dla wystąpienia usługi SignalR Service.
3. Skopiuj parametry połączenia podstawową, a następnie uruchom następujące polecenie:
```
func settings add AzureSignalRConnectionString "<signalr-connection-string>"
```
Uruchom funkcję platformy Azure lokalnie:
```
func start
```
Po uruchomieniu funkcji platformy Azure lokalnie otwórz plik http://localhost:7071/api/indexi zobaczysz bieżącą liczbę gwiazdek. Jeśli gwiazda lub gwiazda w usłudze GitHub, co kilka sekund zostanie odświeżona liczba gwiazdek.

Czyszczenie zasobów

Jeśli nie zamierzasz w przyszłości korzystać z tej aplikacji i nie chcesz, aby zostały naliczone jakiekolwiek opłaty, wykonaj następujące czynności w celu usunięcia wszystkich zasobów w ramach tego przewodnika Szybki start:

W witrynie Azure Portal wybierz grupy zasobów daleko po lewej stronie, a następnie wybierz utworzoną grupę zasobów. Możesz też użyć pola wyszukiwania, aby odnaleźć grupę zasobów po nazwie.
W otworzonym oknie wybierz grupę zasobów, a następnie kliknij pozycję Usuń grupę zasobów.
W nowym oknie wpisz nazwę grupy zasobów, która ma zostać usunięta, a następnie kliknij pozycję Usuń.

Masz problemy? Wypróbuj przewodnik rozwiązywania problemów lub daj nam znać.

Następne kroki

W tym przewodniku Szybki start utworzono i uruchomiono lokalnie aplikację bezserwerową w czasie rzeczywistym. Następnie dowiedz się więcej na temat dwukierunkowej komunikacji między klientami i usługą Azure Functions za pomocą usługi Azure SignalR Service.

Powiązania usługi SignalR Service dla usługi Azure Functions

Przykład komunikacji dwukierunkowej w usłudze Azure Functions

Przykład dwukierunkowej komunikacji usługi Azure Functions dla izolowanego procesu

Wdrażanie w aplikacji funkcji platformy Azure przy użyciu programu Visual Studio

Share via