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.

License

Notifications You must be signed in to change notification settings

flespi-software/MQTT-Board

Repository files navigation

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

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages