Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/flespi-software/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.
https://github.com/flespi-software/MQTT-Board

flespi mqtt mqtt-5 mqtt-5-client mqtt-5-ui mqtt-board mqtt-client mqtt-protocol mqtt-ui quasar

Last synced: about 1 month ago
JSON representation

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.

Lists

README 

        
# MQTT Board

![Logo](/misc/logo.png?raw=true "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](https://mqttboard.flespi.io).



![Screenshot](/misc/screenshot.png?raw=true "MQTT Board")



## Features

* ES6 Javascript

* Vue.js ([Quasar](http://quasar-framework.org))

* Writing .vue files

* Vuex

* Webpack

* Responsive layout

* NPM ecosystems

* Material theme

* Dev Hot Reload

* and many more!



## Prerequisites:



- [Node.js](https://nodejs.org/en/) (>=6.x)

- [Quasar](http://quasar-framework.org)

- npm version 3+ and [Git](https://git-scm.com/).



## Build Setup



``` bash

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

```bash

# install like repo

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

```

in quasar.conf.js

```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'

  ]

},

```

```js

import MqttClient from 'mqtt-board'



export default {

  components: { MqttClient }

}

```

```html



```

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](/src/components/Integration.vue)



[Wrapper](/docs/IntegrationTest.vue)



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:

```js

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:

```js

let subscriber = {

  topic: '#',

  mode: 0,

  options: {

    qos: 0,

    nl: false,

    rap: false,

    rh: 0,

    properties: {

      subscriptionIdentifier: undefined,

      userProperties: undefined

    }

  }

}

```

publisher structure:

```js

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:

```js

let initEntity = {

    type: 'subscriber', // publisher || subscriber required

    rendered: true, // need show flag

    settings: { or }

  }

```

entities structure:

```js

/* 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:

```js

let client = {

  config: , // settings like structure

  publishers: [], // array of publisher like structures

  subscribers: [], // array of subscriber like structures

  entities: [] // 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](https://github.com/flespi-software/mqtt-board/blob/master/LICENSE) license.