Руководство. Визуализация данных датчика в режиме реального времени из Центра Интернета вещей Azure в веб-приложении
В этой статье приведены сведения о том, как визуализировать данные датчиков, полученные в реальном времени и отправленные в центр Интернета вещей, с помощью веб-приложения Node.js, размещенного на локальном компьютере. После локального запуска веб-приложения можно разместить веб-приложение в службе приложение Azure.
Необходимые компоненты
Пример веб-приложения для этого руководства написан в Node.js. Действия, описанные в этой статье, предполагают компьютер для разработки Windows; Однако эти действия также можно выполнить в системе Linux в предпочтительной оболочке.
Подписка Azure. Если у вас еще нет подписки Azure, создайте бесплатную учетную запись, прежде чем начинать работу.
Центр Интернета вещей в подписке Azure. Если у вас еще нет центра, вы можете выполнить действия по созданию центра Интернета вещей с помощью интерфейса командной строки или портал Azure.
Устройство, зарегистрированное в центре Интернета вещей. Если вы еще не зарегистрировали устройство, зарегистрируйте его в портал Azure.
Имитированное устройство, которое отправляет сообщения телеметрии в Центр Интернета вещей. Используйте симулятор Raspberry Pi в Интернете, чтобы получить имитированное устройство, которое отправляет данные температуры в Центр Интернета вещей.
Node.js версии 14 или более поздней. Для проверки версии узла выполните
node --version.Git.
Используйте среду Bash в Azure Cloud Shell. Дополнительные сведения см . в кратком руководстве по Bash в Azure Cloud Shell.
Если вы предпочитаете выполнять справочные команды CLI локально, установите Azure CLI. Если вы работаете в Windows или macOS, Azure CLI можно запустить в контейнере Docker. Дополнительные сведения см. в статье Как запустить Azure CLI в контейнере Docker.
Если вы используете локальную установку, выполните вход в Azure CLI с помощью команды az login. Чтобы выполнить аутентификацию, следуйте инструкциям в окне терминала. Сведения о других возможностях, доступных при входе, см. в статье Вход с помощью Azure CLI.
Установите расширение Azure CLI при первом использовании, когда появится соответствующий запрос. Дополнительные сведения о расширениях см. в статье Использование расширений с Azure CLI.
Выполните команду az version, чтобы узнать установленную версию и зависимые библиотеки. Чтобы обновиться до последней версии, выполните команду az upgrade.
Добавление группы потребителей в Центр Интернета вещей
Группы потребителей предоставляют независимые представления в поток событий, который позволяет приложениям и службам Azure независимо использовать данные из той же конечной точки Центров событий. В этом разделе описано, как добавить группу потребителей в встроенную конечную точку Центра Интернета вещей, которую веб-приложение использует для чтения данных.
Выполните следующую команду, чтобы добавить группу потребителей во встроенную конечную точку центра Интернета вещей:
az iot hub consumer-group create --hub-name YOUR_IOT_HUB_NAME --name YOUR_CONSUMER_GROUP_NAME
Запишите выбранное имя, вам потребуется позже в этом руководстве.
Получение строки подключения к службе для центра Интернета вещей
Центры Интернета вещей создаются с использованием нескольких политик доступа по умолчанию. Одной из таких политик является политика службы, которая предоставляет достаточные разрешения на чтение и запись конечных точек центра Интернета вещей для службы. Выполните следующую команду, чтобы получить строку подключения для центра Интернета вещей, которая соответствует политике службы:
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.
Изучение кода веб-приложения
На компьютере разработки перейдите к каталогу веб-apps-node-iot-hub-data-visual , а затем откройте веб-приложение в избранном редакторе. Ниже показана структура файлов, просматриваемая в Visual Studio Code:
Изучите следующие файлы:
server.js — это скрипт на стороне службы, который инициализирует веб-сокет и класс оболочки Центров событий. Он предоставляет обратный вызов к классу оболочки Центров событий, который класс использует для трансляции входящих сообщений в веб-сокет.
scripts/event-hub-reader.js — это скрипт на стороне службы, который подключается к встроенной конечной точке Центра Интернета вещей с помощью указанной строка подключения и группы потребителей. Он извлекает 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
Запустите веб-приложение.
Убедитесь, что устройство работает и отправляет данные.
В окне команд выполните следующие строки, чтобы скачать и установить указанные пакеты и запустить веб-сайт:
npm install npm startВ консоли должны отобразиться выходные данные, указывающие, что веб-приложение успешно подключено к центру Интернета вещей и ожидает передачи данных через порт 3000:
Открытие веб-страницы для просмотра данных из центра Интернета вещей
Откройте в браузере страницу http://localhost:3000.
В списке Выбрать устройство выберите устройство, чтобы просмотреть выполняющийся график последних 50 точек данных о температуре и влажности, отправленных устройством в центр Интернета вещей.
Кроме того, в консоли отображаются выходные данные, которые показывают сообщения, передаваемые веб-приложением клиенту браузера:
Размещение веб-приложения в Службе приложений Azure
Служба приложение Azure предоставляет платформу как службу (PAAS) для размещения веб-приложений. Веб-приложения, размещенные в Служба приложений, могут воспользоваться мощными функциями Azure, такими как безопасность, балансировка нагрузки и масштабируемость, а также решения Azure и партнеров DevOps, такие как непрерывное развертывание, управление пакетами и т. д. Служба приложений поддерживает веб-приложения, разработанные на многих популярных языках и развернутых в инфраструктуре Windows или Linux.
В этом разделе вы подготавливаете веб-приложение в Службе приложений и развертываете в него свой код с помощью команд Azure CLI. Подробные сведения об используемых командах см. в документации по az webapp.
План службы приложений определяет набор вычислительных ресурсов, на которых выполняется приложение, размещенное в Службе приложений. В этом руководстве мы используем уровень "Разработка" и "Бесплатный" для размещения веб-приложения. На уровне "Бесплатный" веб-приложение делит ресурсы 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Используйте команду az webapp create для подготовки веб-приложения в плане Служба приложений. Параметр
--deployment-local-gitпозволяет отправлять и развертывать код веб-приложения из репозитория Git на локальном компьютере. Имя веб-приложения должно быть глобально уникальным и может содержать буквы верхнего и нижнего регистра, цифры и дефисы. Обязательно укажите узел версии 14 или более поздней для--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:14LTS" --deployment-local-gitИспользуйте команду az webapp config appsettings set, чтобы добавить параметры приложения для переменных среды, которые указывают строка подключения Центра Интернета вещей и группу потребителей концентратора событий. Отдельные параметры разделены пробелами в параметре
-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"Включите протокол веб-сокетов для веб-приложения и настройте веб-приложение на получение только запросов 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Чтобы развернуть код в Служба приложений, используйте учетные данные развертывания на уровне пользователя. Учетные данные развертывания на уровне пользователя отличаются от учетных данных Azure и используются для локальных и FTP-развертываний Git в веб-приложении. После настройки они будут действительны во всех приложениях службы приложений во всех подписках в учетной записи Azure. Если вы ранее настроили учетные данные развертывания на уровне пользователя, используйте их.
Если вы ранее не установили учетные данные развертывания на уровне пользователя или не помните пароль, выполните команду az webapp deployment user set . Имя пользователя развертывания должно быть уникальным в Azure и не должно содержать символ @ для отправки в локальный репозиторий Git. При появлении запроса введите и подтвердите новый пароль. Пароль должен содержать не менее восьми символов и включать два из трех следующих элементов: буквы, цифры и символы.
az webapp deployment user set --user-name NAME_FOR_YOUR_USER_CREDENTIALSПолучите URL-адрес Git, который будет использоваться для отправки кода в службу приложений.
az webapp deployment source config-local-git -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAMEДобавьте удаленный репозиторий в клон, который ссылается на репозиторий Git для веб-приложения в службе приложений. Замените заполнитель URL-адресом
GIT_ENDPOINT_URL, возвращенным на предыдущем шаге. Убедитесь в том, что вы находитесь в каталоге примера web-apps-code-iot-hub-data-visualization, а затем выполните приведенную ниже команду в окне команд.git remote add webapp GIT_ENDPOINT_URLЧтобы развернуть код в службе приложений, введите в командном окне следующую команду. Убедитесь в том, что вы находитесь в каталоге примера web-apps-code-iot-hub-data-visualization. Если вам будет предложено указать учетные данные, введите учетные данные развертывания на уровне пользователя, созданные на шаге 5. Отправьте код в главную ветвь удаленного репозитория Службы приложений.
git push webapp master:masterХод выполнения обновлений развертывания в командном окне. Успешное развертывание заканчивается строками, похожими на следующие выходные данные:
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Выполните следующую команду, чтобы запросить состояние веб-приложения и убедиться, что она запущена:
az webapp show -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --query stateОткройте браузер и перейдите по адресу
https://<your web app name>.azurewebsites.net. Откроется веб-страница, похожая на ту, которую вы видели при локальном запуске веб-приложения. При условии, что устройство работает и отправляет данные, вы увидите график с 50 последними показателями температуры и влажности с устройства.
Устранение неполадок
Если с примером возникли проблемы, выполните действия, описанные в следующих разделах. Если у вас по-прежнему возникли проблемы, отправьте нам отзыв в нижней части этой статьи.
Проблемы с клиентом
Если устройство не отображается в списке или не отображается граф, убедитесь, что код устройства запущен на устройстве.
В браузере откройте средства разработчика (во многих браузерах открывается ключ F12) и найдите консоль. Обратите внимание на указанные предупреждения и ошибки.
Сценарий на стороне клиента можно отладить /js/chat-device-data.js.
Проблемы с локальным веб-сайтом
Просмотрите выходные данные в окне, в котором был запущен узел для вывода консоли.
Выполните отладку серверного кода, в частности файлы server.js и /scripts/event-hub-reader.js.
Неполадки со Службой приложений Azure
Откройте портал Azure и перейдите к своему веб-приложению. В разделе Мониторинг на левой панели выберите Журналы службы приложений. Включите Ведение журнала приложений (файловая система), установите для параметра Уровень значение "Ошибка" и нажмите Сохранить. Затем откройте Поток журнала (в разделе Мониторинг).
Из веб-приложения на портале Azure в разделе Средства разработки выберите Консоль и проверьте версии узла и npm с помощью
node -vиnpm -v.Если появится сообщение о том, что не удается найти пакет, возможно, вы выполнили шаги не в том порядке. При развертывании сайта (с
git push) служба приложений запускаетnpm install, который выполняется на основе настроенной текущей версии узла. Если это изменение в конфигурации позже, необходимо внести бессмысленное изменение в код и снова отправить его.
Следующие шаги
Вы успешно использовали веб-приложение для визуализации данных датчика, полученных в реальном времени, из Центра Интернета вещей.
Другой способ взаимодействия с данными из Центр Интернета вещей Azure см. в следующем руководстве.