Интеграция Azure Digital Twins со службой Azure SignalR

Статья
03/31/2023

Эта статья содержит сведения о том, как интегрировать Azure Digital Twins со службой Azure SignalR.

Решение, описанное в этой статье, позволяет отправлять данные телеметрии цифрового двойника в подключенные клиенты, например на веб-страницу или в мобильное приложение. В результате клиенты обновляются с учетом метрик и состояния в режиме реального времени с устройств Интернета вещей без необходимости опроса сервера или отправки новых HTTP-запросов на обновления.

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

Ниже приведены предварительные требования, которые необходимо выполнить перед продолжением.

Перед интеграцией решения со службой Azure SignalR, как описано в этой статье, изучите документ Подключение комплексного решения для Azure Digital Twins, поскольку эта статья основана именно на этом учебнике. В этом руководстве описано, как настроить экземпляр Azure Digital Twins, который работает с виртуальным устройством IoT, чтобы активировать обновление цифрового двойника. В этой статье описывается, как подключить эти обновления к примеру веб-приложения с помощью службы Azure SignalR.
Потребуются следующие значения из учебника:
- Раздел сетки событий
- Группа ресурсов
- Имя службы приложений или приложения-функции
Кроме того, на компьютер необходимо установить платформу Node.js.

Обязательно войдите на портал Azure со своей учетной записью Azure, так как она понадобится вам в этом руководстве.

Архитектура решения

Ниже представлена схема подключения службы Azure SignalR к Azure Digital Twins. Разделы A, B и C на схеме основаны на схеме архитектуры комплексного решения из учебника. В этой статье с практическими рекомендациями вы создадите раздел D на основе существующей архитектуры, которая включает две новые функции Azure, которые взаимодействуют с SignalR и клиентскими приложениями.

Загрузка примеров приложений

Сначала скачайте необходимые примеры приложений. Вам понадобятся оба следующих образца.

Комплексные примеры Azure Digital Twins. Этот пример содержит AdtSampleApp, в котором содержатся две функции Azure для перемещения данных в экземпляре Azure Digital Twins (дополнительные сведения об этом сценарии см. в статье Подключение комплексного решения). Он также содержит пример приложения DeviceSimulator, которое имитирует устройство IoT, создавая новое значение температуры каждую секунду.
- Если вы еще не скачали пример в рамках учебника в разделе Предварительные требования, перейдите по ссылке на пример и нажмите кнопку Просмотреть код под заголовком. Вы попадете в репозиторий GitHub с примерами, которые вы можете загрузить в виде ZIP-архива, нажав кнопку Код и Загрузить ZIP.
Эта кнопка скачивает копию примера репозитория на компьютере, как digital-twins-samples-main.zip. Распакуйте папку.
Пример веб-приложения интеграции SignalR: этот образец веб-приложения React будет использовать данные телеметрии Azure Digital Twins из службы Azure SignalR.
- Перейдите по ссылке на пример и используйте тот же процесс загрузки, чтобы скачать копию примера на свой компьютер (digitaltwins-signalr-webapp-sample-main.zip). Распакуйте папку.

В этом разделе описано, как создать базовый экземпляр 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

В этом разделе вы настроите две функции Azure.

negotiate — функция для триггеров HTTP. Она использует входную привязку SignalRConnectionInfo для создания и возврата сведений о допустимом подключении.
broadcast — функция для триггеров Сетки событий. Она получает данные телеметрии Azure Digital Twins через сетку событий и использует выходную привязку экземпляра SignalR, созданного в предыдущем шаге, для передачи сообщения во все подключенные клиентские приложения.

Запустите Visual Studio или другой редактор кода и откройте решение кода в папке digital-twins-samples-main\ADTSampleApp . Выполните следующие действия, чтобы создать функции.

В проекте SampleFunctionsApp создайте новый класс C# с именем SignalRFunctions.cs.

Замените содержимое файла класса следующим кодом:

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.Azure.WebJobs.Extensions.EventGrid;
using Microsoft.Azure.WebJobs.Extensions.SignalRService;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using Azure.Messaging.EventGrid;

namespace SignalRFunction
{
    public static class SignalRFunctions
    {
        public static double temperature;

        [FunctionName("negotiate")]
        public static SignalRConnectionInfo GetSignalRInfo(
            [HttpTrigger(AuthorizationLevel.Anonymous, "post")] HttpRequest req,
            [SignalRConnectionInfo(HubName = "dttelemetry")] SignalRConnectionInfo connectionInfo)
        {
            return connectionInfo;
        }

        [FunctionName("broadcast")]
        public static Task SendMessage(
            [EventGridTrigger] EventGridEvent eventGridEvent,
            [SignalR(HubName = "dttelemetry")] IAsyncCollector<SignalRMessage> signalRMessages,
            ILogger log)
        {
            JObject eventGridData = (JObject)JsonConvert.DeserializeObject(eventGridEvent.Data.ToString());

            log.LogInformation($"Event grid message: {eventGridData}");

            var patch = (JObject)eventGridData["data"]["patch"][0];
            if (patch["path"].ToString().Contains("/Temperature"))
            {
                temperature = Math.Round(patch["value"].ToObject<double>(), 2);
            }

            var message = new Dictionary<object, object>
            {
                { "temperatureInFahrenheit", temperature},
            };

            return signalRMessages.AddAsync(
                new SignalRMessage
                {
                    Target = "newMessage",
                    Arguments = new[] { message }
                });
        }
    }
}

В окне консоли диспетчер пакетов Visual Studio или любом окне командной строки на компьютере перейдите к папке digital-twins-samples-main\AdtSampleApp\SampleFunctionsApp и выполните следующую команду, чтобы установить SignalRService пакет NuGet в проект:
```
dotnet add package Microsoft.Azure.WebJobs.Extensions.SignalRService --version 1.2.0
```
Выполнение этой команды должно разрешить любые проблемы с зависимостями в классе.
Опубликуйте функцию в Azure с помощью предпочтительного метода.

Инструкции по публикации функции с помощью Visual Studio см. в статье "Разработка Функции Azure с помощью Visual Studio". Инструкции по публикации функции с помощью Visual Studio Code см. в статье "Создание функции C# в Azure с помощью Visual Studio Code". Инструкции по публикации функции с помощью Azure CLI см. в статье "Создание функции C# в Azure из командной строки".

Настройка функции

Затем настройте функцию для взаимодействия с вашим экземпляром Azure SignalR. Сначала необходимо собрать строку подключения экземпляра SignalR, а затем добавить ее в параметры приложения-функции.

Перейдите на портал Azure и найдите имя своего экземпляра SignalR в строке поиска в верхней части портала. Выберите экземпляр, чтобы открыть его.
В меню экземпляра выберите Ключи, чтобы просмотреть строки подключения для экземпляра службы SignalR.
Щелкните значок "Копировать", чтобы скопировать первичную СТРОКУ ПОДКЛЮЧЕНИЯ.
Наконец, добавьте строку подключения Azure SignalR в параметры приложения функции, используя следующую команду Azure CLI. Кроме того, замените заполнители на имя группы ресурсов и службы приложений или приложения-функции из предварительных требований в учебнике. Команду можно выполнить в Azure Cloud Shell или локально, если на компьютере установлен Azure CLI.
```
az functionapp config appsettings set --resource-group <your-resource-group> --name <your-function-app-name> --settings "AzureSignalRConnectionString=<your-Azure-SignalR-ConnectionString>"
```
В выходных данных этой команды находятся все параметры приложения, настроенные для функции Azure. Найдите AzureSignalRConnectionString в нижней части списка, чтобы убедиться, что он добавлен.

Подключение функции к Сетке событий

Затем подпишитесь на широковещательную функцию Azure в разделе "Сетка событий", созданном во время предварительного требования руководства. Это действие позволит данным телеметрии передавать данные из двойника термостат67 через раздел "Сетка событий" и функцию. Отсюда функция может транслировать данные на все клиенты.

Чтобы транслировать данные, вы создадите подписку на события из раздела "Сетка событий" в вещательную функцию Azure в качестве конечной точки.

В портал Azure перейдите к разделу "Сетка событий", найдите его имя в верхней строке поиска. Выберите + Event Subscription (+ Подписка на события).

Screenshot of how to create an event subscription in the Azure portal.

На странице Создание подписки на событие заполните поля следующим образом (поля, заполненные по умолчанию, не указываются):

Имя ПОДПИСКИ>НА СОБЫТИЕ. Присвойте подписке имя.
Тип конечной точки ENDPOINT DETAILS>: выберите функцию Azure из параметров меню.
Конечная точка ENDPOINT DETAILS>: выберите ссылку "Выбрать конечную точку", которая откроет окно "Выбор функции Azure":
- Заполните поля Подписка, Группа ресурсов, Приложение-функция и Функция (трансляция). Некоторые из этих полей могут автоматически заполняться после выбора подписки.
- Выберите Подтвердить выбор.

Screenshot of the form for creating an event subscription in the Azure portal.

Вернитесь на страницу Создать подписку на событие и выберите Создать.

На этом этапе вы должны увидеть две подписки на события на странице Раздел Сетки событий.

Настройка и запуск веб-приложения

В этом разделе вы увидите результат в действии. Сначала настройте пример клиентского веб-приложения для подключения к настроенному потоку Azure SignalR. Затем вы запустите пример приложения для имитации устройства, которое отправляет данные телеметрии устройства через экземпляр Azure Digital Twins. После этого вы просмотрите образец веб-приложения, чтобы увидеть смоделированные данные устройства, обновляющие образец веб-приложения в режиме реального времени.

Настройка примера клиентского веб-приложения

Далее вы настроите пример клиентского веб-приложения. Сначала собирайте URL-адрес конечной точки HTTP функции согласования , а затем используйте ее для настройки кода приложения на компьютере.

Перейдите на страницу Приложения-функции на портале Azure и выберите приложение-функцию из списка. В меню приложения-функции выберите Функции и выберите функцию negotiate.
Выберите "Получить URL-адрес функции" и скопируйте значение вверх по /api (не включайте последний /negotiate?). Это значение потребуются вам на следующем шаге.
Используя Visual Studio или любой другой редактор кода, откройте папку архива digitaltwins-signalr-webapp-sample-main, скачанную в разделе Загрузка примеров приложений.
Откройте файл src/App.js и замените URL-адрес функции в HubConnectionBuilder URL-адресом конечной точки HTTP функции negotiate, сохраненным на предыдущем шаге.
```
    const hubConnection = new HubConnectionBuilder()
        .withUrl('<Function-URL>')
        .build();
```
В командной строке разработчика Visual Studio или любом командном окне на компьютере перейдите в папку digitaltwins-signalr-webapp-sample-main\src. Выполните следующую команду, чтобы установить зависимые пакеты узлов:
```
npm install
```

Затем задайте разрешения в приложении-функции на портале Azure:

На странице Приложения-функции на портале Azure выберите экземпляр приложения-функции.
Прокрутите меню экземпляра вниз и выберите CORS. На странице CORS добавьте в http://localhost:3000 качестве разрешенного источника, введя его в пустое поле. Установите флажок Включить Access-Control-Allow-Credentials и нажмите кнопку Сохранить.

Запуск симулятора устройства

Во время выполнения предварительных требований для комплексного требования вы настроили симулятор устройства для отправки данных через Центр Интернета вещей в ваш экземпляр Azure Digital Twins.

Теперь запустите проект симулятора, расположенный в digital-twins-samples-main\DeviceSimulator\DeviceSimulator.sln. Если вы используете Visual Studio, можно открыть проект, а затем запустить его с помощью этой кнопки на панели инструментов:

Откроется окно консоли и отображается имитированные сообщения телеметрии температуры устройства. Эти сообщения отправляются через ваш экземпляр Azure Digital Twins, где они затем принимаются функциями Azure и SignalR.

В этой консоли больше ничего делать не нужно, однако не закрывайте ее, поскольку она потребуется для выполнения следующего шага.

Просмотр результатов

Чтобы увидеть результаты в действии, запустите пример веб-приложения интеграции со службой SignalR. Вы можете сделать это из любого окна консоли в расположении digitaltwins-signalr-webapp-sample-main\src, выполнив следующую команду:

npm start

Выполнение этой команды откроет окно браузера, в котором запущено примерное приложение, в котором отображается визуальный датчик температуры. После запуска приложения должны отобразиться значения телеметрии температуры из симулятора устройств, распространяемые через Azure Digital Twins, которые веб-приложение отражает в режиме реального времени.

Screenshot of the sample client web app, showing a visual temperature gauge. The temperature reflected is 67.52.

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

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

В Azure Cloud Shell или локальном интерфейсе Azure CLI можно удалить все ресурсы Azure в группе ресурсов с помощью команды az group delete. Удаление группы ресурсов также приведет к удалению:

Экземпляр Azure Digital Twins (из комплексного руководства)
Центр Интернета вещей и регистрация центральных устройств (из комплексного руководства)
Раздел "Сетка событий" и связанные подписки
Приложение Функции Azure, включая все три функции и связанные ресурсы, такие как хранилище
Экземпляр Azure SignalR

Важно!

Удаление группы ресурсов — процесс необратимый. Группа ресурсов и все содержащиеся в ней ресурсы удаляются без возможности восстановления. Будьте внимательны, чтобы случайно не удалить не ту группу ресурсов или не те ресурсы.

az group delete --name <your-resource-group>

Наконец, удалите папки примера проекта, скачанные на локальный компьютер (digital-twins-samples-main.zip, digitaltwins-signalr-webapp-sample.zip и их распакованными аналогами).

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

В этой статье вы настроили функции Azure с помощью SignalR для широковещательной передачи событий телеметрии Azure Digital Twins в пример клиентского приложения.

Далее узнайте подробнее о службе Azure SignalR:

Что такое Служба Azure SignalR?

Или узнайте подробнее о проверке подлинности в службе Azure SignalR с помощью Функций Azure:

Проверка подлинности в службе Azure SignalR