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

Архитектура

В этом случае «вещь» - это Raspberry Pi с датчиками температуры и влажности, который предоставляет свои данные через сокеты через свой IP-адрес.

Эти вещи регистрируются в серверной части NodeJS, которая будет хранить свою информацию в базе данных и публиковать свои измерения в брокере MQTT. Кроме того, бэкэнд даст возможность подключаться к объекту через сокеты, что мы увидим более подробно.

Наконец, есть интерфейс ReactJS, который будет отвечать за запрос на подключение к объекту и отображение его данных на диаграмме в реальном времени.

Проводка вещей

Начнем с настройки оборудования. Для этого варианта использования нам понадобятся:

  • Малина Pi 3
  • DHT11: Датчик температуры и влажности.
  • DS18B20: Водонепроницаемый датчик температуры. Мы будем использовать его для наружной температуры.
  • 4 резистора 220 Ом
  • 3 светодиода (зеленый = OK, красный = KO, желтый = работа в процессе)

Мы подключаем эти аппаратные компоненты к контактам GPIO RPi, следуя схеме ниже:

Аппаратные абстракции @ Thing

Абстракция - это концепция CS, которая заключается в сокрытии деталей объекта, чтобы сосредоточиться на решении проблемы. В нашем случае объектами будут аппаратные компоненты, и проблема, которую необходимо решить, будет заключаться в получении данных датчика и предоставлении обратной связи пользователю путем включения светодиодов.

Мы будем использовать классы ES6 для упаковки сторонних библиотек, которые обращаются к оборудованию с использованием собственных модулей NodeJS. В случае DHT11 мы можем реализовать что-то вроде этого:

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

Socket.io сервер @ Thing

Как упоминалось ранее, вещи будут открывать свои данные через сокет. Для этого мы запустим в них сервер Socket.io.

Основная идея Socket.io заключается в асинхронном взаимодействии двух машин с помощью API, основанного на событиях, которые используют веб-сокеты внизу. SocketHandler позаботится об отправке этих событий в заданный интервал времени. Обратите внимание, что их содержимое будет результатом вызова SensorHandler.read():

Сервер Socket.io @ Backend

Бэкэнд также будет иметь сервер Socket.io, который будет действовать как промежуточное программное обеспечение между клиентом и объектом. Для этого мы настроим промежуточное ПО в нашем экземпляре Socket.io, на которое будут возложены следующие обязанности:

  • Проверьте аутентификацию, подтвердив JWT.
  • Подтвердите и получите имя объекта, к которому клиент запросил подключение.
  • Подтвердите и получите тип измерения, запрошенный клиентом.

Если все в порядке, следующим шагом будет фактическое открытие сокета для объекта и пересылка полученных данных обратно клиенту. Этот процесс выполняется в классе SocketController, который очень похож на класс объекта SocketHandler.

График в реальном времени @ Frontend

И последнее, но не менее важное: интерфейс позволит пользователю выбрать объект и один из поддерживаемых им типов измерений для отображения диаграммы в реальном времени.

Компонент RealTime будет отвечать за отправку соответствующих действий Redux для достижения такого поведения. В частности, мы будем использовать Redux Thunk, чтобы упростить эту задачу:

В этот момент вы можете подумать ... но откуда мы на самом деле получаем данные от вещей? Это происходит под капотом в наших панелях:

Наконец, помните, что важно закрыть текущее соединение сокета при отключении компонента:

useEffect(() => () => store.dispatch(finishRealTimeData()), []);

Заключение

Мы создали полнофункциональное JavaScript-решение, которое позволяет пользователю визуализировать информацию о своих вещах в реальном времени. Может быть, классная функция может запускать действия, например, путем реализации воркера, который подписывается на тему MQTT и отправляет сообщение с помощью бота Telegram, если полученное значение достигает порогового значения. Угадай, что ? Это уже сделано и доступно на GitHub. Скоро еще одна статья… наверное.

Кроме того, интересным реактивом может стать замена Socket.io на gRPC, который также позволяет нам иметь двунаправленную потоковую передачу данных. Угадай, что? Нет, это не реализовано… пока.

Есть мысли по этому поводу?

Репозитории GitHub

Живой пример

Https://iot.mmontes-dev.duckdns.org/real-time (Демо-пользователь)

Ресурсы