Блог

Я пытаюсь подключить мое приложение VueJS к библиотеке MQTT JS (https://github.com/mqttjs ) к брокеру MQTT, который не поддерживает websocket.

Для этой мотивации мне нужен сервер NodeJS между Vue и брокером, который может обрабатывать соединение с брокером напрямую, без веб-сокета.

Я считаю, что Nuxt JS может быть решением, потому что это в основном VueJS, интегрированный с сервером NodeJS….

Если я правильно понял, я могу использовать функцию плагина Nuxt для создания соединения с брокером таким образом:

 import Vue from 'vue';
import mqtt from 'mqtt';

const client  = mqtt.connect('mqtt://broker.hivemq.com')

client.on('connect', function () {

  console.log("CONNECTED!");

  client.subscribe("mytopic", function(err){
    if(err)
      console.error("Error on topic subscribe: ", err);
    else
      console.info("Correctly subscribed to topic");
  });

})

Vue.prototype.$clientMqtt = client;
 

И тогда я могу использовать хук выборки для компонента Vue таким образом, чтобы прослушивать изменения темы:

 export default {
  data () {
    return {
      mqttData:{
        topic: undefined,
        message: undefined
      }
    }
  },
  async fetch() {

    let vm = this;

    this.$clientMqtt.on('message', function (topic, message) {

      vm.mqttData.topic = topic;
      vm.mqttData.message = message.toString();

    });

  }
}
 

Но объект «mqttData», который я показываю в своем шаблоне Vue, никогда не обновляется…