mqtt-widget v4.1.1

MQTT Live Chart 📈

Installation

npm install bitbucket:simplinic/mqtt-widget#vX.X.X -S

Available versions see in CHANGELOG.

Usage

In order to use a chart you have to:

• Connect to a broker
• Observe beacons and gateways it sees
• Pass a name and a type (beacon/gateway) to a chart
• Disconnect from a broker when you're done

Connect to a broker

connectBroker returns a broker connection id.

import { connectBroker } from 'mqtt-widget'

const brokerConnectionId: string = connectBroker({
  host: '…',
  user: '…',
  password: '…',
  onConnect: event => {
    console.info(event)
  },
  onError: error => {
    console.error(error)
  },
})

Observe beacons and gateways it sees

Pass broker connection id to observeBroker method to see what beacons and gateways it sees. In a callback you select a name you can pass to <Widget /> component.

The third parameter is used to throttle callback. It's optional and by default callback is called everytime mqtt get the updates.

import { observeBroker } from 'mqtt-widget'

observeBroker(brokerConnectionId, ({ beacons, gateways }: GatewaysAndBeacons) => {
  // callback is called when beacons or gateways or both are updated (new ids scanned)
   console.log('new scanned gateways: ' + gateways.update.join(', '))
   console.log('new scanned beacons: ' + beacons.update.join(', '))

  // you can access the full list of entities
   console.log('all gateways: ' + gateways.all.join(', '))
   console.log('all beacons: ' + gateways.all.join(', '))
}, 1000)

Pass a name and a type to a chart

import Widget from 'mqtt-widget'

const MyBeaconChart = () => (
   <Widget
    broker={brokerConnectionId}
    type='beacon'
    name='kio:OGBm'
  />
)

const MyGatewayChart = () => (
   <Widget
    broker={brokerConnectionId}
    type='gateway'
    name='rp-00000000eb9452ad'
  />
)

Disconnect from a broker

import { disconnectBroker } from 'mqtt-widget'

disconnectBroker(brokerConnectionId)

Interfaces

connectBroker(options: BrokerCredentials)

{
  host: string
  user: string
  password: string
  portHttp?: number
  portWss?: number
  useSSL?: boolean
  raw?: boolean
  onConnect?(o: WithInvocationContext): void
  onError?(e: ErrorWithInvocationContext): void
}

Widget Component props

{
  broker: string
  name: string
  type: 'gateway' | 'widget'
  width?: number
  height?: number
}