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

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

Предварительные требования

Пример веб-приложения для этого руководства написан в Node.js. Действия, описанные в этой статье, предполагают компьютер для разработки Windows; Однако эти действия также можно выполнить в системе Linux в предпочтительной оболочке.

• Подписка Azure. Если у вас еще нет подписки Azure, создайте бесплатную учетную запись, прежде чем начинать работу.

• Центр Интернета вещей в подписке Azure. Если у вас еще нет центра, выполните действия, описанные в разделе Создание центра Интернета вещей.

• Устройство, зарегистрированное в центре Интернета вещей. Если у вас нет устройства в Центре Интернета вещей, выполните действия, описанные в разделе "Регистрация устройства".

• Имитированное устройство, которое отправляет сообщения телеметрии в Центр Интернета вещей. Используйте симулятор Raspberry Pi в Интернете, чтобы получить имитированное устройство, которое отправляет данные температуры в Центр Интернета вещей.

• Node.js версии 14 или более поздней. Чтобы проверить версию Node.js, выполните node --version.

• Git.

• Используйте среду Bash в Azure Cloud Shell. Дополнительные сведения см. в статье "Начало работы с Azure Cloud Shell".

  

• Если вы предпочитаете выполнять справочные команды CLI локально, установите Azure CLI. Если вы работаете в Windows или macOS, Azure CLI можно запустить в контейнере Docker. Дополнительные сведения см. в статье Как запустить Azure CLI в контейнере Docker.

  • Если вы используете локальную установку, выполните вход в Azure CLI с помощью команды az login. Чтобы выполнить аутентификацию, следуйте инструкциям в окне терминала. Сведения о других параметрах входа см. в статье "Проверка подлинности в Azure с помощью Azure CLI".

  • Установите расширение Azure CLI при первом использовании, когда появится соответствующий запрос. Дополнительные сведения о расширениях см. в статье Использование расширений и управление ими с помощью Azure CLI.

  • Выполните команду az version, чтобы узнать установленную версию и зависимые библиотеки. Чтобы обновиться до последней версии, выполните команду az upgrade.

Добавление группы потребителей в Центр Интернета вещей

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

Выполните следующую команду, чтобы добавить группу потребителей во встроенную конечную точку центра Интернета вещей:

az iot hub consumer-group create --hub-name YOUR_IOT_HUB_NAME --name YOUR_CONSUMER_GROUP_NAME

Запишите выбранное имя, оно вам понадобится позже в этом руководстве.

Получите строку подключения для вашего IoT-хаба

Центры Интернета вещей создаются с использованием нескольких политик доступа по умолчанию. Одной из таких политик является политика службы, которая предоставляет достаточные разрешения на чтение и запись конечных точек центра Интернета вещей для службы. Выполните следующую команду, чтобы получить строку подключения для центра Интернета вещей, которая соответствует политике службы:

az iot hub connection-string show --hub-name YOUR_IOT_HUB_NAME --policy-name service

Строка подключения службы должна выглядеть примерно так:

"HostName=YOUR_IOT_HUB_NAME.azure-devices.net;SharedAccessKeyName=service;SharedAccessKey=YOUR_SHARED_ACCESS_KEY"

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

Загрузка веб-приложения с GitHub

Скачайте или клонируйте пример веб-приложения из GitHub: web-apps-node-iot-hub-data-visualization.

Изучение кода веб-приложения

На машине для разработки перейдите к каталогу web-apps-node-iot-hub-data-visualization, а затем откройте веб-приложение в избранном редакторе. Ниже показана структура файлов, просматриваемая в Visual Studio Code:

Изучите следующие файлы:

• server.js — это скрипт на стороне службы, который инициализирует веб-сокет и класс оболочки Центров событий. Он предоставляет метод обратного вызова для класса-оболочки Event Hubs, который этот класс использует для передачи входящих сообщений через веб-сокет.

• scripts/event-hub-reader.js — это скрипт на стороне службы, который подключается к встроенной конечной точке IoT-хаба с помощью указанной строки подключения и группы потребителей. Он извлекает DeviceId и EnqueuedTimeUtc из метаданных во входящих сообщениях, а затем передает сообщение с помощью метода обратного вызова, зарегистрированного server.js.

• public/js/chart-device-data.js — это клиентский скрипт, который прослушивает веб-сокет, отслеживает каждый Идентификатор устройства и сохраняет последние 50 точек входящих данных для каждого устройства. Затем он привязывает выбранные данные устройства к объекту диаграммы.

• public/index.html обрабатывает макет пользовательского интерфейса для веб-страницы и ссылается на необходимые скрипты для клиентской логики.

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

Для чтения данных из центра Интернета вещей веб-приложению требуется строка подключения центра Интернета вещей и имя группы потребителей, данные которой оно будет считывать. Оно получает эти строки из среды процесса в следующих строках в server.js:

const iotHubConnectionString = process.env.IotHubConnectionString;
if (!iotHubConnectionString) {
  console.error(`Environment variable IotHubConnectionString must be specified.`);
  return;
}
console.log(`Using IoT Hub connection string [${iotHubConnectionString}]`);

const eventHubConsumerGroup = process.env.EventHubConsumerGroup;
console.log(eventHubConsumerGroup);
if (!eventHubConsumerGroup) {
  console.error(`Environment variable EventHubConsumerGroup must be specified.`);
  return;
}
console.log(`Using event hub consumer group [${eventHubConsumerGroup}]`);

Задайте переменные среды в окне командной строки с помощью следующих команд. Замените значения заполнителей строкой подключения службы для центра Интернета вещей и именем созданной ранее группы потребителей. Не заключайте строки в кавычки.

set IotHubConnectionString=YOUR_IOT_HUB_CONNECTION_STRING
set EventHubConsumerGroup=YOUR_CONSUMER_GROUP_NAME

Запустите веб-приложение.

1. Убедитесь, что устройство работает и отправляет данные.

2. В окне команд выполните следующие строки, чтобы скачать и установить указанные пакеты и запустить веб-сайт:

   npm install
   npm start
   

3. В консоли должны появиться выходные данные, указывающие, что веб-приложение успешно подключено к центру Интернета вещей и прослушивает порт 3000:

   

Открытие веб-страницы для просмотра данных из центра Интернета вещей

Откройте в браузере страницу http://localhost:3000.

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

Кроме того, в консоли отображаются выходные данные, которые показывают сообщения, передаваемые веб-приложением клиенту браузера:

Размещение веб-приложения в Службе приложений Azure

Служба приложений Azure предоставляет платформу как услугу (PAAS) для размещения веб-приложений. Веб-приложения, размещенные в службе приложений, могут воспользоваться такими функциями Azure, как безопасность, балансировка нагрузки и масштабируемость. Веб-приложения также могут воспользоваться решениями Azure и партнерами DevOps, такими как непрерывное развертывание, управление пакетами и т. д. Служба приложений поддерживает веб-приложения, разработанные на многих популярных языках и развернутых в инфраструктуре Windows или Linux.

В этом разделе вы подготавливаете веб-приложение в Службе приложений и развертываете в него свой код с помощью команд Azure CLI. Подробные сведения об используемых командах см. в документации по az webapp.

1. План службы приложений определяет набор вычислительных ресурсов, на которых выполняется приложение, размещенное в Службе приложений. В этом руководстве мы используем уровень "Разработка" и "Бесплатный" для размещения веб-приложения. На уровне "Бесплатный" веб-приложение делит ресурсы Windows с другими приложениями Службы приложений, включая приложения других клиентов. Azure также предлагает планы Службы приложений для развертывания веб-приложений на базе вычислительных ресурсов Linux. Если у вас уже есть план службы приложений, который вы хотите использовать, этот шаг можно пропустить.

   Чтобы создать план службы приложений, используя бесплатный тарифный план для Windows, используйте команду az appservice plan create. Выберите группу ресурсов, в которой находится центр Интернета вещей. Имя плана службы может содержать буквы верхнего и нижнего регистра, цифры и дефисы.

   az appservice plan create --name NEW_NAME_FOR_YOUR_APP_SERVICE_PLAN --resource-group YOUR_RESOURCE_GROUP_NAME --sku FREE
   

2. Используйте команду az webapp create для подготовки веб-приложения в плане Служба приложений. Параметр --deployment-local-git позволяет отправлять и развертывать код веб-приложения из репозитория Git на локальном компьютере. Имя веб-приложения должно быть глобально уникальным и может содержать буквы верхнего и нижнего регистра, цифры и дефисы. Обязательно укажите Node.js версии 16 или более поздней для --runtime параметра в зависимости от используемой версии среды выполнения Node.js. Для получения списка поддерживаемых сред выполнения можно использовать команду az webapp list-runtimes.

   az webapp create -n NEW_NAME_FOR_YOUR_WEB_APP -g YOUR_RESOURCE_GROUP_NAME -p YOUR_APP_SERVICE_PLAN_NAME --runtime "NODE:16LTS" --deployment-local-git
   

3. Используйте команду az webapp config appsettings set, чтобы добавить параметры приложения для переменных среды, которые указывают строки подключения концентратора IoT и группу потребителей Event Hub. Отдельные параметры разделены пробелами в параметре -settings . Используйте строку подключения службы для узла Интернета вещей и группу получателей данных, которую вы создали ранее в этом руководстве.

   az webapp config appsettings set -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --settings EventHubConsumerGroup=YOUR_CONSUMER_GROUP_NAME IotHubConnectionString="YOUR_IOT_HUB_CONNECTION_STRING"
   

4. Включите протокол веб-сокетов для веб-приложения и настройте веб-приложение на получение только запросов HTTPS (HTTP-запросы перенаправляются к HTTPS).

   az webapp config set -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --web-sockets-enabled true
   az webapp update -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --https-only true
   

5. Чтобы развернуть код в Службе приложений, используйте учетные данные для развертывания на уровне пользователя. Учетные данные развертывания на уровне пользователя отличаются от учетных данных Azure и используются для локальных и FTP-развертываний Git в веб-приложении. После настройки они будут действительны во всех приложениях службы приложений во всех подписках в учетной записи Azure. Если вы ранее настроили учетные данные развертывания на уровне пользователя, их можно использовать.

   Если вы ранее не установили учетные данные развертывания на уровне пользователя или не помните пароль, выполните команду az webapp deployment user set . Имя пользователя развертывания должно быть уникальным в Azure и не должно содержать символ @ для отправки в локальный репозиторий Git. При появлении запроса введите и подтвердите новый пароль. Пароль должен содержать не менее восьми символов и включать два из трех следующих элементов: буквы, цифры и символы.

   az webapp deployment user set --user-name NAME_FOR_YOUR_USER_CREDENTIALS
   

6. Получите URL-адрес Git, который будет использоваться для отправки кода в службу приложений.

   az webapp deployment source config-local-git -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME
   

7. Добавьте удаленный репозиторий в клонированный репозиторий, который ссылается на репозиторий Git для веб-приложения в сервисе приложений. Замените заполнитель URL-адресом GIT_ENDPOINT_URL , возвращенным на предыдущем шаге. Убедитесь в том, что вы находитесь в каталоге примера web-apps-code-iot-hub-data-visualization, а затем выполните приведенную ниже команду в окне команд.

   git remote add webapp GIT_ENDPOINT_URL
   

8. Чтобы развернуть код в службе приложений, введите в командном окне следующую команду. Убедитесь в том, что вы находитесь в директории с образцом web-apps-code-iot-hub-data-visualization. Если вам будет предложено указать учетные данные, введите учетные данные развертывания на уровне пользователя, созданные на шаге 5. Отправьте код в главную ветвь удаленного репозитория Службы приложений.

   git push webapp master:master
   

9. Ход выполнения обновлений развертывания в командном окне. Успешное развертывание заканчивается строками, похожими на следующие выходные данные:

   remote:
   remote: Finished successfully.
   remote: Running post deployment command(s)...
   remote: Deployment successful.
   To https://contoso-web-app-3.scm.azurewebsites.net/contoso-web-app-3.git
   6b132dd..7cbc994  master -> master
   

10. Выполните следующую команду, чтобы запросить состояние веб-приложения и убедиться, что она запущена:

    az webapp show -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --query state
    

11. Откройте браузер и перейдите по адресу https://<your web app name>.azurewebsites.net. Откроется веб-страница, похожая на ту, которую вы видели при локальном запуске веб-приложения. При условии, что устройство работает и отправляет данные, вы увидите график с 50 последними показателями температуры и влажности с устройства.

Устранение неполадок

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

Проблемы с клиентом

• Если устройство не отображается в списке или не отображается граф, убедитесь, что код устройства запущен на устройстве.

• В браузере откройте средства разработчика (во многих браузерах открывается ключ F12) и найдите консоль. Обратите внимание на указанные предупреждения и ошибки.

• Вы можете выполнить отладку клиентского скрипта в /js/chart-device-data.js.

Проблемы с локальным веб-сайтом

• Посмотрите выходные данные в окне, где вы запустили Node.js для консольного вывода.

• Отладка кода сервера, в частности кода в server.js и /scripts/event-hub-reader.js.

Неполадки со Службой приложений Azure

• Откройте портал Azure и перейдите к своему веб-приложению. В разделе Мониторинг на левой панели выберите Журналы службы приложений. Включите Ведение журнала приложений (файловая система), установите для параметра Уровень значение "Ошибка" и нажмите Сохранить. Затем откройте Поток журнала (в разделе Мониторинг).

• На портале Azure в разделе "Средства разработки " выберите консоль и проверьте Node.js и версии npm с помощью node -v и npm -v.

• Если вы видите ошибку о ненахождении пакета, возможно, вы выполнили шаги не в том порядке. При развертывании сайта (с git push) запускается служба приложений, которая выполняется npm installна основе текущей настроенной версии Node.js. Если это будет изменено в конфигурации позже, необходимо внести незначительное изменение в код и снова отправить изменения.

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

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

Другой способ взаимодействия с данными из Azure IoT Hub см. в следующем руководстве.