MQTT.js ok but vue-mqtt doesn't connect

[juanitomaille]

Hi, Is anybody experienced this issue in using vue-mqtt from chrome (desktop and mobile) ?

using MQTT.js lib directly works, using vue-mqtt doesn't ?

here the simple main.js with examples code from each lib :

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import VueMqtt from 'vue-mqtt'
import mq from 'mqtt'

// toggle between MQTT.js lib and vue-mqtt plugin for Vuejs
var mqttjs = true

if (!mqttjs) {
  Vue.use(VueMqtt,
          'wss://myhost:8886',
          {
            path: '/mqtt',
            clientId: 'my-app',
            protocolId: 'MQTT',
            protocolVersion: 4,
            clean: true,
            reconnectPeriod: 1000,
            connectTimeout: 30 * 1000,
            will: {
              topic: 'WillMsg',
              payload: 'Connection Closed abnormally..!',
              qos: 0,
              retain: false
            },
            username: 'demo',
            password: 'demo',
            rejectUnauthorized: false
          })
}

Vue.config.productionTip = false

// valable pour le countdown
Vue.filter('two_digits', (value) => {
  if (value < 0) {
    return '00';
  }
  if (value.toString().length <= 1) {
    return `0${value}`;
  }
  return value;
});

new Vue({
  el: '#app',
  router,
  store,
  vuetify,
  render: h => h(App),

  data() {
      return {
          livingTemp: 99,
      }
  },

  mqtt:{
    '/home/living/temp'(data, topic) {
    window.console.log(topic + ': ' + data)
    this.livingTemp =  parseFloat(data).toFixed(1)
    },
  },

  mounted(){
    if (mqttjs){
      var clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8)
      var host = 'wss://myhost:8886/mqtt'

      var options = {
        clientId: clientId,
        protocolId: 'MQTT',
        protocolVersion: 4,
        clean: true,
        reconnectPeriod: 1000,
        connectTimeout: 30 * 1000,
        will: {
          topic: 'WillMsg',
          payload: 'Connection Closed abnormally..!',
          qos: 0,
          retain: false
        },
        username: 'demo',
        password: 'demo',
        rejectUnauthorized: false
      }

      var client = mq.connect(host, options)
      client.on('error', function (err) {
        window.console.log(err)
        client.end()
      })

      client.on('connect', function () {
        window.console.log('client connected:' + clientId)
      })

      client.subscribe('topic', { qos: 0 })

      client.publish('topic', 'wss secure connection demo...!', { qos: 0, retain: false })

      client.on('message', function (topic, message) {
        window.console.log('Received Message:= ' + message.toString() + '\nOn topic:= ' + topic)
      })

      client.on('close', function () {
        window.console.log(clientId + ' disconnected')
      })
    window.console.log('[main.js:Vue.mounted] app mounted with mqtt.js lib')
    }

    if (!mqttjs){
        this.clickSub()

        window.console.log('[main.js:Vue.mounted] app mounted with vue-mqtt')
    }
  },
methods: {
  clickPub: function() {
    this.$mqtt.publish('/home/heater/state', 'ON')
},

  clickSub: function() {
      this.$mqtt.subscribe('/home/living/temp')
  },
}
})

console for MQTT.js :

[HMR] Waiting for update signal from WDS...
main.js?56d7:118 [main.js:Vue.mounted] app mounted with mqtt.js lib
main.js?56d7:104 client connected:mqttjs_1b3a28f4
main.js?56d7:112 Received Message:= wss secure connection demo...!
On topic:= topic

console for vue-mqtt after toggling my var mqttjs

[HMR] Waiting for update signal from WDS...
main.js?56d7:124 [main.js:Vue.mounted] app mounted with vue-mqtt
[Violation] Forced reflow while executing JavaScript took 35ms

thanks for help

[juanitomaille]

ok, retried with a blank project, I think that the pattern

mqtt: {
}

inserted in vue constructor doesn't work anymore with vue 2.6, somebody can confirm ?

[juanitomaille]

OK ! found it ! I'm used to construct my topic like that :

/my/great/topic

or the first slash (/) breaks the eq() method in/src/Emitter.js maybe it's a bad habit because official docs doesn't put this first slash but i never experienced problems with other clients... Maybe it could be useful to permit this first slash in accordance to broker comportements ?