Polymer elements to establish a MQTT connection to a MQTT broker.
bower install --save mqtt-elements <link rel="import" href="../mqtt-elements/mqtt-elements.html"> <mqtt-connection auto url="ws://HOST:PORT"> <mqtt-subscription topic="foo/bar" number-of-messages="Infinity" last-message="{{lastMessage}}" messages="{{messages}}" subscribed="{{subscribed}}"></mqtt-subscription> <mqtt-publish auto retained topic="foo/bar" payload="Hello world!" qos="1"></mqtt-publish> </mqtt-connection> <mqtt-connection url="ws://HOST:PORT"></mqtt-connection> The method <mqtt-connection>#connect has to be called manually to establish the MQTT connection to the MQTT broker. Set <mqtt-connection>#auto flag to make the MQTT connection as soon as possible.
<mqtt-connection url="ws://HOST:PORT" options='{"username": "USERNAME", "password": "PASSWORD"}' with-credentials auto> </mqtt-connection> OR
<mqtt-connection url="ws://HOST:PORT" username="USERNAME" password="PASSWORD" with-credentials auto> </mqtt-connection> The flag <mqtt-connection>#withCredentials indecates the MQTT connection to wait until a username and password for the connection is supplied.
The following example will publish on the topic »mqtt/elements« with the payload »Publishing via a HTML element«. Every time when <mqtt-publish>#payload changes the element will publish a new MQTT message to the topic »mqtt/elements«. If the <mqtt-publish>#auto flag is not set - <mqtt-publish>#publish has to be called to publish a MQTT message to the topic
<mqtt-connection url="ws://HOST:PORT" auto> <mqtt-publish topic="mqtt/elements" payload="Publishing via a HTML element" auto></mqtt-publish> </mqtt-connection> A <mqtt-connection> element can hold any number of <mqtt-publish> elements to publish to different topics.
<mqtt-connection url="ws://HOST:PORT" auto> <mqtt-publish topic="foo/bar" payload="this is easy" auto></mqtt-publish> <mqtt-publish topic="client/status" payload="online" qos="1" auto></mqtt-publish> <mqtt-publish topic="client/location" payload="{'foo': 'bar'}" auto></mqtt-publish> </mqtt-connection> To publish a message with the RETAINED flag set to true add the <mqtt-publish>#retained flag.
<mqtt-connection url="ws://HOST:PORT" auto> <mqtt-publish topic="foo/bar" payload="this is easy" retained auto></mqtt-publish> </mqtt-connection> <mqtt-connection url="ws://HOST:PORT" auto> <mqtt-subscription topic="foo/bar"></mqtt-subscription> </mqtt-connection> The last message to the topic will be save in <mqtt-subscription>#lastMessage. The <mqtt-subscription> stores the last n messages within the <mqtt-subscription>#messages array. Set <mqtt-subscription>#numberOfMessages to the number of messages that should be saved in <mqtt-subscription>#messages. To save every message received on the topic set <mqtt-subscription>#numberOfMessages to Infinity.
mkdir mqtt-wrapper && cd mqtt-wrapper git clone https://github.com/mqttjs/mqtt-elements.git cd mqtt-elements cp debug.bowerrc .bowerrc npm install bower install grunt serve browserify -r ./node_modules/mqtt/lib/store.js:Store -r mqtt -r MQEmitter > dist/mqtt-elements-bundle.js