Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
juanitomaille opened this issue Jan 15, 2020 · 2 comments
Open

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

juanitomaille opened this issue Jan 15, 2020 · 2 comments

Comments

@juanitomaille
Copy link

juanitomaille commented Jan 15, 2020

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 juanitomaille changed the title MQTT.js ok but vue-mqtt does'nt connect MQTT.js ok but vue-mqtt doesn't connect Jan 15, 2020
@juanitomaille
Copy link
Author

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
Copy link
Author

juanitomaille commented Jan 17, 2020

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 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant