MQTT Board

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.

Features

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

Prerequisites:

• Node.js (>=6.x)
• Quasar
• npm version 3+ and Git.

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: [
    'QLayout',
    'QHeader',
    'QFooter',
    'QDrawer',
    'QPageContainer',
    'QPage',
    'QToolbar',
    'QToolbarTitle',
    'QDialog',
    'QList',
    'QItem',
    'QItemLabel',
    'QItemSection',
    'QSeparator',
    'QBtn',
    'QIcon',
    'QInput',
    'QCheckbox',
    'QToggle',
    'QSelect',
    'QCard',
    'QCardSection',
    'QCardActions',
    'QExpansionItem',
    'QTooltip',
    'QBtnToggle',
    'QMenu',
    'QChip',
    'QInnerLoading',
    'QSpinnerGears'
  ],
  directives: [
    'Ripple',
    'ClosePopup',
    'TouchSwipe'
  ],
  plugins: [
    'Notify',
    'Dialog',
    'LocalStorage',
    'SessionStorage'
  ]
},

import MqttClient from 'mqtt-board'

export default {
  components: { MqttClient }
}

<mqtt-client :initSettings="settings" whiteLabel="My MQTT"/>

Props:

Name	Description	Default
initSettings	Init settings for clients	undefined
configuredClients	Full configured clients	[]
whiteLabel	Label in component	''
useLocalStorage	local storage usage flag	true
clientsCloseable	can clients close to clients page	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'

Events:

Name	Description	Payload
change	Any change in clients	[]

Use like iframe integration

You must integrate it on /integration route

Component

Wrapper

Methods:

Name	Description	Params
SetSettings	Init app
SetActive	Activate client	clientIndex
AddPublisher	Add configured or empty new publisher
AddSubscriber	Add configured or empty new subscriber

SetSettings params:

Name	Description	Default
settings	Init settings for clients	undefined
configuredClients	Full configured clients	[]
whiteLabel	Label in component	''
useLocalStorage	local storage usage flag	true
clientsCloseable	can clients close to clients page	true
secure	Need validate by security host	true
entities	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'

Events:

Name	Description	Payload
updateSettings	Any change in clients	{configuredClients: []}
ready	Iframe mounted	Empty

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
    }
  }
}

init entity structure:

let initEntity = {
    type: 'subscriber', // publisher || subscriber required
    rendered: true, // need show flag
    settings: {<publisher> or <subscriber>}
  }

entities structure:

/* linked entity for sorting all entities */
let entity = {
  type: '', // publisher || subscriber required,
  index: 1, // array index of current entity (subscriber, publisher) in array of full configured client
  id: 's3rdsf' // unique generated id of entity
}

client structure:

let client = {
  config: <settings>, // settings like structure
  publishers: [<publisher>], // array of publisher like structures
  subscribers: [<subscriber>], // array of subscriber like structures
  entities: [<entity>] // array of entity like structure
}

In-app routes

/mode/:mode/token/:token used for init empty state board to flespi by token. Modes for now: onetime - make client to flespi w/o saving to local storage.

License

MIT license.