Skip to content
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.
Vue JavaScript HTML CSS
Branch: master
Clone or download
scarry1992 v.2.0.13
[fix] unsubscribe
Latest commit c723c24 Feb 14, 2020
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.2.0.0 Nov 4, 2019
src v.2.0.13 Feb 14, 2020
.editorconfig init Oct 8, 2018
.eslintignore init Oct 8, 2018
.eslintrc.js init Oct 8, 2018
.gitignore v.1.6.2 Apr 4, 2019
.postcssrc.js init Oct 8, 2018
.stylintrc init Oct 8, 2018
CHANGELOG.md v.2.0.13 Feb 14, 2020
LICENSE v.1.0.0 Oct 16, 2018
README.md v.2.0.5 Nov 29, 2019
babel.config.js v.2.0.3 Nov 14, 2019
index.js v.2.0.3 Nov 14, 2019
package-lock.json v.2.0.10 Dec 18, 2019
package.json v.2.0.13 Feb 14, 2020
quasar.conf.js v.2.0.12 Feb 4, 2020

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: [
    '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
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 []

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

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.

You can’t perform that action at this time.