Diagnostic-oriented MQTT client tool. Supports MQTT 5.0 and 3.1.X protocols, connections to multiple brokers, MQTT operations logs and multiple subscribe widgets with unique/history topic filtering mode. Saves configuration in browser's local cache.
Clone or download
scarry1992 v.1.2.3
[fix] unresolved messages logic
Latest commit 1076f48 Dec 6, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
misc v.1.0.0 Oct 16, 2018
src-pwa v.1.0.1 Oct 17, 2018
src v.1.2.3 Dec 6, 2018
.babelrc
.editorconfig init Oct 8, 2018
.eslintignore init Oct 8, 2018
.eslintrc.js init Oct 8, 2018
.gitignore init Oct 8, 2018
.postcssrc.js init Oct 8, 2018
.stylintrc init Oct 8, 2018
CHANGELOG.md v.1.2.3 Dec 6, 2018
LICENSE v.1.0.0 Oct 16, 2018
README.md v.1.1.14 Nov 15, 2018
index.js v.1.0.0 Oct 16, 2018
package-lock.json v.1.1.10 Nov 9, 2018
package.json v.1.2.3 Dec 6, 2018
quasar.conf.js v.1.1.6 Nov 2, 2018

README.md

MQTT Board

Logo

Diagnostic-oriented MQTT client tool. Supports MQTT 5.0 and 3.1.X protocols, connections to multiple brokers, MQTT operations logs and multiple subscribe widgets with unique/history topic filtering mode. Saves configuration in browser's local cache.

Live version available here: MQTT-Board.

Screenshot

Features

  • ES6 Javascript
  • Vue.js (Quasar)
  • Writing .vue files
  • Vuex
  • Webpack
  • Responsive layout
  • NPM ecosystems
  • Material theme
  • Dev Hot Reload
  • and many more!

Prerequisites:

Build Setup

# clone the repo
$ git clone https://github.com/flespi-software/mqtt-board.git mqttboard

# go into app's directory and install dependencies
$ cd mqttboard
$ npm install

# serve with hot reload at localhost:8080
$ quasar dev

# build for production with minification for flespi.io
$ quasar build

Use like component

You must have a Quasar-based app.

# install like repo
$ npm install git+https://github.com/flespi-software/mqtt-board.git

in quasar.conf.js

framework: {
  components: [
    'QToolbar',
    'QToolbarTitle',
    'QModal',
    'QModalLayout',
    'QList',
    'QListHeader',
    'QItem',
    'QItemMain',
    'QItemSide',
    'QItemTile',
    'QItemSeparator',
    'QBtn',
    'QIcon',
    'QInput',
    'QCheckbox',
    'QToggle',
    'QSelect',
    'QCard',
    'QCardTitle',
    'QCardMain',
    'QCardSeparator',
    'QCardActions',
    'QCollapsible',
    'QTooltip',
    'QBtnToggle',
    'QPopover'
  ],
  directives: [
    'CloseOverlay',
    'TouchSwipe'
  ],
  plugins: [
    'Notify',
    'Dialog',
    'LocalStorage'
  ]
},
import MqttClient from 'mqtt-board'

export default {
  components: { MqttClient }
}
<mqtt-client :initSettings="settings" whiteLabel="My MQTT"/>
Name Description Default
initSettings Init settings for clients undefined
whiteLabel Label in component ''
useLocalStorage local storage usage flag true
needInitNewClient Need create and init new client with default settings false
secure Need validate by security host true
initEntities Start-pack entities in new clients [SUBSCRIBER, PUBLISHER]
color Color of bars by quasar color palette 'dark'
accentColor Secondary color by quasar color palette 'light-blue-7'

settings structure:

let settings = {
  clientId: `mqtt-board-${Math.random().toString(16).substr(2, 8)}`,
  host: 'wss://mqtt.flespi.io',
  keepalive: 60,
  protocolVersion: 5,
  clean: true,
  username: 'FlespiToken XXXXXXXXXXXXXXXXXXX',
  password: '',
  properties: {
    sessionExpiryInterval: undefined,
    receiveMaximum: undefined,
    maximumPacketSize: undefined,
    topicAliasMaximum: undefined,
    requestResponseInformation: false,
    requestProblemInformation: false,
    userProperties: undefined,
    authenticationMethod: undefined,
    authenticationData: undefined
  },
  will: {
    topic: undefined,
    payload: undefined,
    qos: 0,
    retain: false,
    properties: {
      willDelayInterval: undefined,
      payloadFormatIndicator: false,
      messageExpiryInterval: undefined,
      contentType: undefined,
      responseTopic: undefined,
      correlationData: undefined,
      userProperties: undefined
    }
  }
}

subscriber structure:

let subscriber = {
  topic: '#',
  mode: 0,
  options: {
    qos: 0,
    nl: false,
    rap: false,
    rh: 0,
    properties: {
      subscriptionIdentifier: undefined,
      userProperties: undefined
    }
  }
}

publisher structure:

let publisher = {
  topic: 'my/topic',
  payload: '{"hello": "world"}',
  options: {
    qos: 0,
    retain: false,
    dup: false,
    properties: {
      payloadFormatIndicator: undefined,
      messageExpiryInterval: undefined,
      topicAlias: undefined,
      responseTopic: undefined,
      correlationData: undefined,
      userProperties: undefined,
      contentType: undefined
    }
  }
}

License

MIT license.