В этом посте я расскажу о том, как подключить Nuxt.js к MQTT.
MQTT стал де-факто IoT. Согласно статистике, после HTTP это наиболее часто используемый протокол для уровня подключения устройств IoT. В этом сообщении блога вы узнаете, как объединить этот удивительный протокол с Nuxt.js.
Предпосылки
В этом руководстве предполагается, что вы уже знаете, что такое Vue.js. Если нет, то можете прочитать об этом здесь.
Установка Nuxt.js
Сначала установите Nuxt.js:
Как указано в документах, установка довольно проста.
Затем просто установите зависимости.
Теперь вы должны иметь возможность просматривать сайт на http://localhost:3000.
Плагины Nuxt
Nuxt.js позволяет определить подключаемые модули JavaScript, которые будут запускаться перед созданием экземпляра корневого приложения vue.js. Это особенно полезно при использовании ваших собственных библиотек или внешних модулей. —Nuxtjs.org
Для получения дополнительной информации о плагинах Nuxt.js вы можете прочитать здесь.
Так давайте использовать его!
Добавьте необходимые зависимости
Это плагин vue, который глобально регистрирует mqtt в экземпляре Vue. Позже мы увидим, как его использовать.
Создайте плагин nuxt
Создайте новый плагин nuxt, добавив vue-mqttsocket plugin в plugins/mqtt.js .
Для этого поместите в него следующее содержимое.
Обязательно замените uri на адрес вашего MQTT-брокера.
Кроме того, добавьте раздел ниже в конце nuxt.config.js.
Это зарегистрирует плагин в файле nuxt.
использование
Теперь вы можете очень просто зарегистрировать его на каждой странице, где вам нужен MQTT. Все, что вам нужно сделать, это поместить приведенный ниже код в смонтированный раздел вашей страницы:
В случае успеха вы сможете увидеть сообщение MQTT connected! в журнале вашего браузера.
Теперь публиковать и подписываться очень просто.
Чтобы публиковать:
Подписываться:
Не забудьте запустить npm run dev, чтобы увидеть результат.
Вы можете увидеть готовый пример в здесь.
Первоначально опубликовано наhttps://imantabrizian.me/blog/nuxt-mqtt/.
