nik-zp / vue-mqtt Goto Github PK

I have an vue project that use vue-mqtt, but I do not know how to connet aws-iot mqtt , is there any option included for vue-mqtt?

Is this project still maintained? It not works with Vue 3.

Hi nik-zp,

I'd like to establish a connection to a mqtt broker via username and password.
Is there a way to create the client and afterwards seperately establish a connection via options parameter at a later point in future. Also is it feasible to handle a callback message, which tells you whether you are authorized or not.

Thanks in advance!

When I connect to my Mosquitto broker, the whole chrome process starts to lag like crazy, and will push my i7 over 80%. If I insert an invalid broker address, it will just show an error in console and the browser will work normally. The same happens in Firefox.

I was able to reproduce with the example project and in my own project when I call this line of code. If I comment it out or insert an invalid IP or port, the browser won't lag:
Vue.use(VueMqtt, 'ws://192.168.1.33:9001', {clientId: 'WebClient-' + parseInt(Math.random() * 100000)})

can't match topic with '/' start

Hi,
I have a mosquitto broker which the ssl certificate is not valid.
So I cannot connect to broker whereas I can with MQTT explorer which has this option to bypass the certficate validation,
is it possible to bypass/ignore the validation of ssl certificate for wss connection ?

Pleas update the mqtt.js dependency from 2.18.3 to 2.18.8 - they fixed some bugs.

Hello! I am trying to use vue-mqtt from within nuxt.

I tried to create a reproduction sandbox. But after adding the plugin, sandbox freezes:
https://codesandbox.io/s/codesandboxnuxt-h6ccq?fontsize=14

This is my plugin usage code:

import Vue from "vue";
import mqtt from "vue-mqtt";

Vue.use(mqtt, "ws://localhost:9001", {});

Is there a way to debug this?

Thanks in advance!

can't match the topic what like 'some/some/', at the end of topic has '/'

Hi :)

Thanks for a great library :)
Unfortunately, I'm unable to bind to + and # topics, subscribing works though.

this.$mqtt.subscribe('param/param/param/#') <- will subscribe

but...

mqtt: {
'param/param/param/#': function(val) {
console.log('this method ...')
},
},

does not log :(

i also tried :
"param/param/param/"
"param/param/param"

etc.

Can you advise please?

Thanks.

The MQTT.js exposes a mqtt.Client#reconnect() Function.
But as soon as I try to call this function withthis.$mqtt.reconnect();
I get a this.$mqtt.reconnect is not a function Message.

Any Ideas on how to get this to work?

The library works fine but when creating a build a get:

Object literal may only specify known properties, and 'mqtt' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.

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

In console error:
WebSocket connection to 'ws://10.0.0.110:8081/' failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT

At plugin install method, the mixing is creating a Proxy instance for components that does not declare mqtt

Vue.mixin({
created() {
let mqtt = this.$options['mqtt'];
if (mqtt) {
this.$options.mqtt = new Proxy({}, {
set: (target, key, value) => {
Emitter.addListener(key, value, this);
target[key] = value;
return true;
},
deleteProperty: (target, key) => {
Emitter.removeListener(key, this.$options.mqtt[key], this);
delete target.key;
return true;
}
});
Object.keys(mqtt).forEach((key) => {
this.$options.mqtt[key] = mqtt[key];
});
}
},`
code seems to work without extra instance.

Is there an example how to use the vue-mqtt in combination with the vuex ?

Maybe I don't get it right. But how do I show the actual mqtt-connection-status ?

I tried a watcher:

watch: { '$mqtt.connected': { function(value) { console.log("connection state updated") } } },

but the watcher never gets triggered...

Currently this project is source-available, but not open-source. Please add a LICENSE or COPYING file with a license, I recommend BSD-3-Clause, or MIT.

hi dear friend
i want to close my connection after finish jobs , what should i do for problem