Awesome

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:

Events:

Use like iframe integration

You must integrate it on /integration route

Component

Wrapper

Methods:

SetSettings params:

Events:

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.