Краткое руководство. Создание приложения с числом звезд GitHub с Функции Azure и Служба SignalR через C#

Статья
11/16/2023

В этой статье вы узнаете, как использовать Служба SignalR и Функции Azure для создания бессерверного приложения с помощью C# для трансляции сообщений клиентам.

Внутрипроцессный процесс
Изолированный процесс

Примечание.

Код можно получить упоминание в этой статье из GitHub.

Необходимые компоненты

Для работы с этим кратким руководством необходимы следующие предварительные требования.

Visual Studio Code или другой редактор кода. Если вы еще не установили Visual Studio Code, скачайте Visual Studio Code здесь.
Подписка Azure. Если у вас еще нет подписки Azure, создайте бесплатную учетную запись Azure, прежде чем начинать работу.
Azure Functions Core Tools
Базовый пакет SDK для .NET

Создание экземпляра службы Azure SignalR

В этом разделе описано, как создать базовый экземпляр Azure SignalR, используемый для приложения. Следующие действия используют портал Azure для создания нового экземпляра, но также можно использовать Azure CLI. Дополнительные сведения см. в статье az signalr create command in the Служба Azure SignalR CLI Reference.

Войдите на портал Azure.
Щелкните + Создать ресурс в левом верхнем углу страницы.
На странице "Создание ресурса" в текстовом поле служба и Marketplace введите сигнализатор и выберите Служба SignalR из списка.
На странице Служба SignalR нажмите кнопку "Создать".
На вкладке "Основные сведения" введите необходимые сведения для нового экземпляра Служба SignalR. Введите следующие значения:

Поле	Рекомендуемое значение	Description
Подписка	Выберите свою подписку	Выберите подписку, которую вы хотите использовать для создания нового экземпляра Служба SignalR.
Группа ресурсов	Создайте группу ресурсов с именем SignalRTestResources	Выберите или создайте группу ресурсов для ресурса SignalR. Для этого руководства рекомендуется создать новую группу ресурсов вместо использования существующей группы ресурсов. Чтобы освободить ресурсы после завершения работы с руководством, удалите группу ресурсов. При удалении группы ресурсов также удаляются все ресурсы, принадлежащие группе. Это действие невозможно отменить. Перед удалением группы ресурсов убедитесь, что она не содержит ресурсов, которые вы хотите сохранить. Дополнительные сведения см. в статье Управление ресурсами Azure через портал.
Имя ресурса	testsignalr	Введите уникальное имя для ресурса SignalR. Если testsignalr уже взят в регионе, добавьте цифру или символ, пока имя не будет уникальным. Имя должно быть строкой длиной от 1 до 63 символов и содержать только цифры, буквы и символ `-`. Имя не может начинаться или заканчиваться символом дефиса, а последовательные символы дефиса недопустимы.
Регион	Выберите регион	Выберите соответствующий регион для нового экземпляра Служба SignalR. Служба Azure SignalR сейчас недоступен во всех регионах. Дополнительные сведения см. в разделе Служба Azure SignalR доступности региона
Ценовая категория	Выберите "Изменить", а затем выберите "Только для разработки и тестирования". Выберите "Выбрать ", чтобы подтвердить выбор ценовой категории.	Служба Azure SignalR имеет три ценовых категории: "Бесплатный", "Стандартный" и "Премиум". Учебники используют уровень "Бесплатный " , если не указано иное в предварительных требованиях. Дополнительные сведения о различиях функций между уровнями и ценами см. в Служба Azure SignalR ценах
Режим службы	Выбор соответствующего режима службы	Используйте Значение по умолчанию при размещении логики Концентратора SignalR в веб-приложениях и использовании службы SignalR в качестве прокси-сервера. Используйте бессерверные технологии, такие как Функции Azure для размещения логики концентратора SignalR. Классический режим предназначен только для обратной совместимости и не рекомендуется использовать. Дополнительные сведения см. в разделе "Режим службы" в Служба Azure SignalR.

Вам не нужно изменять параметры на вкладках "Сеть и теги " для учебников SignalR.

Нажмите кнопку "Просмотр и создание " в нижней части вкладки "Основные сведения".
На вкладке "Просмотр и создание" просмотрите значения и нажмите кнопку "Создать". Для завершения развертывания потребуется несколько минут.
По завершении развертывания нажмите кнопку "Перейти к ресурсу ".
На странице ресурсов SignalR выберите "Ключи" в меню слева в разделе Параметры.
Скопируйте строку Подключение ion для первичного ключа. Это строка подключения вам потребуется, чтобы настроить приложение позже в этом руководстве.

Настройка и запуск экземпляра Функций Azure на локальном компьютере

Для этого шага потребуется Функции Azure Core Tools.

Создайте пустой каталог и перейдите в каталог с помощью командной строки.

Инициализация нового проекта.

Внутрипроцессный процесс
Изолированный процесс

# 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

С помощью редактора кода создайте файл с именем Function.cs. Добавьте следующий код в 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; }
        }
    }
}

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

Код в Function.cs имеет три функции:

GetHomePage используется для получения веб-сайта в качестве клиента.
Negotiate используется клиентом для получения маркера доступа.
Broadcast периодически вызывается для получения количества звезд из GitHub, а затем передает сообщения всем клиентам.

Клиентский интерфейс для этого примера — это веб-страница. Мы отрисовывем веб-страницу с помощью GetHomePage функции, считывая HTML-содержимое из файла content/index.html. Теперь создадим этот index.html подкаталог content со следующим содержимым:

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

*.csproj Обновите страницу содержимого в выходной папке сборки.

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

Функции Azure требуется, чтобы учетная запись хранения работала. Вы можете установить и запустить эмулятор служба хранилища Azure. Вы также можете обновить параметр, чтобы использовать реальную учетную запись хранения с помощью следующей команды:
```
func settings add AzureWebJobsStorage "<storage-connection-string>"
```
Все почти готово. Нам осталось определить строку подключения Службы SignalR в параметрах экземпляра Функций Azure.
1. Убедитесь, что экземпляр Служба SignalR был успешно создан путем поиска его имени в поле поиска в верхней части портала. Выберите экземпляр, чтобы открыть его.
2. Выберите ключи для просмотра строк подключения экземпляра службы SignalR.
3. Скопируйте основной строка подключения и выполните следующую команду:
```
func settings add AzureSignalRConnectionString "<signalr-connection-string>"
```
Запустите функцию Azure локально:
```
func start
```
После локальной работы функции Azure откройте http://localhost:7071/api/indexи увидите текущее число звездочек. Если вы звезда или незвезда на GitHub, вы получите количество звезд, обновляющихся каждые несколько секунд.

Очистка ресурсов

Если вы не собираетесь использовать это приложение дальше, удалите все ресурсы, созданные в ходе работы с этим кратким руководством, чтобы не оплачивать их.

На портале Azure выберите Группа ресурсов слева, а затем созданную группу ресурсов. Также можно использовать поле поиска для поиска ресурса по его имени.
В открывшемся окне выберите группу ресурсов и щелкните Удалить группу ресурсов.
В новом окне введите имя группы ресурсов, которую требуется удалить, и щелкните Удалить.

Возникли проблемы? См. руководство по устранению неполадок или сообщите о проблеме нам.

Следующие шаги

В этом кратком руководстве вы создали и запустили бессерверное приложение в режиме реального времени локально. Далее узнайте больше о двунаправленном взаимодействии между клиентами и Функции Azure с помощью Служба Azure SignalR.

привязки Служба SignalR для Функции Azure

Функции Azure пример двунаправленного обмена данными

Функции Azure пример двунаправленного обмена данными для изолированного процесса

Развертывание в приложении-функции Azure с помощью Visual Studio