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

Статья
08/21/2024

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

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

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

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

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

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

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

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

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

Создание экземпляра Azure SignalR

Затем создайте экземпляр Azure SignalR для использования в этой статье, следуя инструкциям в статье "Создание экземпляра Служба Azure SignalR" (на данный момент выполните действия, описанные в этом разделе.

Не закрывайте окно браузера с порталом 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.14.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 (+ Подписка на события).

Снимок экрана: создание подписки на события на портале Azure.

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

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

Снимок экрана: форма для создания подписки на события на портале Azure.

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

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

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

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

Снимок экрана: пример клиентского веб-приложения с визуальным элементом датчика температуры. Значение температуры — 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-main.zip и их распаковки).

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

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

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

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

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

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

Поделиться через