Udostępnij za pośrednictwem


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#

Z tego artykułu dowiesz się, jak używać usług SignalR Service i Azure Functions do tworzenia bezserwerowej aplikacji w języku C# w celu emisji komunikatów do klientów.

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:

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.

  1. Zaloguj się w witrynie Azure Portal.
  2. W lewym górnym rogu strony wybierz pozycję + Utwórz zasób.
  3. Na stronie Tworzenie zasobu w polu tekstowym usługa wyszukiwania s i marketplace wprowadź signalr, a następnie wybierz pozycję SignalR Service z listy.
  4. Na stronie SignalR Service wybierz pozycję Utwórz.
  5. 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.

  1. Wybierz przycisk Przejrzyj i utwórz w dolnej części karty Podstawy.
  2. Na karcie Przeglądanie i tworzenie przejrzyj wartości, a następnie wybierz pozycję Utwórz. Ukończenie wdrożenia zajmuje kilka chwil.
  3. Po zakończeniu wdrażania wybierz przycisk Przejdź do zasobu .
  4. Na stronie zasobu usługi SignalR wybierz pozycję Klucze z menu po lewej stronie w obszarze Ustawienia.
  5. 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 są narzędzia Azure Functions Core Tools.

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

  2. Zainicjuj nowy projekt.

    # 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
    
  3. Za pomocą edytora kodu utwórz nowy plik o nazwie Function.cs. Dodaj następujący kod do Function.cs:

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

    Kod w 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.
  4. 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 tę 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>
    
  5. Zaktualizuj element *.csproj , aby strona zawartości w folderze wyjściowym kompilacji.

    <ItemGroup>
      <None Update="content/index.html">
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
      </None>
    </ItemGroup>
    
  6. 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>"
    
  7. 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ć.

      Wyszukiwanie wystąpienia usługi SignalR Service

    2. Wybierz pozycję Klucze, aby wyświetlić parametry połączenia dla wystąpienia usługi SignalR Service.

      Zrzut ekranu przedstawiający parametry połączenia podstawowe.

    3. Skopiuj parametry połączenia podstawową, a następnie uruchom następujące polecenie:

      func settings add AzureSignalRConnectionString "<signalr-connection-string>"
      
  8. 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:

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

  2. W otworzonym oknie wybierz grupę zasobów, a następnie kliknij pozycję Usuń grupę zasobów.

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