├── debug.bowerrc
├── mqemitter.html
├── mqttjs.html
├── .jscsrc
├── .npmrc
├── CHANGELOG.md
├── mqtt-elements.html
├── .jshintrc
├── .gitignore
├── demo
    ├── index.html
    ├── elements
    │   ├── demo.css
    │   └── demo-element.html
    └── injecting-mqtt-connection.html
├── index.html
├── test
    ├── index.html
    ├── mqtt-connection-clientId.html
    ├── mqtt-subscription-spec.html
    ├── mqtt-connection-read-only.html
    ├── mqtt-connection-change-properties.html
    ├── mqtt-connection-private-methods.html
    ├── mqtt-publish-test.html
    ├── mqtt-connection-and-subscription.html
    ├── mqtt-connection-max-listeners.html
    ├── mqtt-connection-events.html
    ├── mqtt-publish-spec.html
    ├── mqtt-elements-full-stack.html
    └── mqtt-connection-spec.html
├── package.json
├── LICENSE
├── bower.json
├── mqtt-publish-regestration-behaviour.html
├── mqtt-subscription-regestration-behaviour.html
├── Gruntfile.js
├── mqtt-publish.html
├── README.md
├── dist
    └── setImmediate.js
├── mqtt-subscription.html
└── mqtt-connection.html


/debug.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |   "directory": ".."
3 | }


--------------------------------------------------------------------------------
/mqemitter.html:
--------------------------------------------------------------------------------
1 | <script src="dist/mqemitter.js"></script>


--------------------------------------------------------------------------------
/mqttjs.html:
--------------------------------------------------------------------------------
1 | <script src="dist/mqtt-elements-bundle.js"></script>


--------------------------------------------------------------------------------
/.jscsrc:
--------------------------------------------------------------------------------
1 | {
2 |   "preset": "google",
3 |   "disallowSpacesInAnonymousFunctionExpression": null,
4 |   "excludeFiles": ["node_modules/**"]
5 | }


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | chromedriver_cdnurl=http://localhost:9001/node_modules/web-component-tester/node_modules/wct-local/node_modules/selenium-standalone/.selenium/chromedriver


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | 0.0.2-beta (09/29/2015)
2 | 
3 | 0.0.1-beta (09/02/2015)
4 | Implemented enhancements:
5 | Fixed bugs:
6 | Closed issues:
7 | Merged pull requests:


--------------------------------------------------------------------------------
/mqtt-elements.html:
--------------------------------------------------------------------------------
1 | <link rel="import" href="mqtt-connection.html"/>
2 | <link rel="import" href="mqtt-subscription.html"/>
3 | <link rel="import" href="mqtt-publish.html"/>


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "node": true,
 3 |   "browser": true,
 4 |   "bitwise": true,
 5 |   "camelcase": true,
 6 |   "curly": true,
 7 |   "eqeqeq": true,
 8 |   "immed": true,
 9 |   "indent": 2,
10 |   "latedef": true,
11 |   "noarg": true,
12 |   "quotmark": "single",
13 |   "undef": true,
14 |   "unused": true,
15 |   "newcap": false,
16 |   "globals": {
17 |     "wrap": true,
18 |     "unwrap": true,
19 |     "Polymer": true,
20 |     "Platform": true,
21 |     "page": true,
22 |     "app": true
23 |   }
24 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # node-waf configuration
20 | .lock-wscript
21 | 
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 | 
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 | .idea
29 | bower_components
30 | selenium-standalone/
31 | chromedriver/
32 | 
33 | #bower
34 | .bowerrc
35 | tmp
36 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 6 |   <title>inject &lt;mqtt-connection&gt; Demo</title>
 7 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
 8 |   <link rel="import" href="../mqtt-elements.html">
 9 |   <link rel="import" href="elements/demo-element.html">
10 |   <link rel="import" href="../../paper-button/paper-button.html">
11 |   <link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
12 |   <link rel="import" href="../../paper-input/paper-input.html">
13 |   <link rel="import" href="../../paper-styles/demo-pages.html">
14 | </head>
15 | 
16 | <body unresolved>
17 | <demo-element url="ws://iot.eclipse.org:80/ws"></demo-element>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
10 | -->
11 | <html>
12 | <head>
13 | 
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 | 
17 |   <script src="../webcomponentsjs/webcomponents-lite.js"></script>
18 |   <link rel="import" href="../iron-component-page/iron-component-page.html">
19 | 
20 | </head>
21 | <body>
22 | 
23 | <iron-component-page></iron-component-page>
24 | 
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 6 |   <title>Elements Test Runner</title>
 7 |   <meta charset="UTF-8">
 8 | 
 9 |   <script src="../../webcomponentsjs/webcomponents.min.js"></script>
10 |   <script src="../../web-component-tester/browser.js"></script>
11 | </head>
12 | 
13 | <body>
14 | 
15 | <script>
16 |   // Each test within the test folder should be included here 
17 |   WCT.loadSuites([
18 |     'mqtt-connection-spec.html',
19 |     'mqtt-connection-read-only.html',
20 |     'mqtt-connection-change-properties.html',
21 |     'mqtt-connection-private-methods.html',
22 |     'mqtt-connection-events.html',
23 |     'mqtt-subscription-spec.html',
24 |     'mqtt-connection-and-subscription.html',
25 |     'mqtt-connection-max-listeners.html',
26 |     'mqtt-publish-spec.html',
27 |     'mqtt-publish-test.html',
28 |     'mqtt-connection-clientId.html'
29 |   ]);
30 | </script>
31 | 
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mqtt-elements",
 3 |   "version": "0.0.6-beta",
 4 |   "description": "Polymer elements for MQTT",
 5 |   "main": "mqtt-elements.html",
 6 |   "directories": {
 7 |     "test": "tests"
 8 |   },
 9 |   "scripts": {
10 |     "test": "grunt test"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/mqttjs/mqtt-elements.git"
15 |   },
16 |   "keywords": [
17 |     "mqtt",
18 |     "polymer",
19 |     "websockets"
20 |   ],
21 |   "author": "Sandro Kock <sandro.kock@gmail.com> (https://github.com/sandro-k)",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/mqttjs/mqtt-elements/issues"
25 |   },
26 |   "homepage": "https://github.com/mqttjs/mqtt-elements#readme",
27 |   "devDependencies": {
28 |     "grunt": "^0.4.5",
29 |     "grunt-contrib-connect": "^0.10.1",
30 |     "grunt-contrib-watch": "^0.6.1",
31 |     "jscs": "^2.4.0",
32 |     "mqtt": "^1.3.0",
33 |     "web-component-tester": "git+https://github.com/sandro-k/web-component-tester.git"
34 |   },
35 |   "dependencies": {
36 |     "mqemitter": "^0.4.0"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 MQTT.js
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mqtt-elements",
 3 |   "version": "0.0.6-beta",
 4 |   "homepage": "https://github.com/mqttjs/mqtt-elements",
 5 |   "description": "Polymer elements for MQTT",
 6 |   "main": "mqtt-elements.html",
 7 |   "keywords": [
 8 |     "mqtt",
 9 |     "polymer",
10 |     "websockets"
11 |   ],
12 |   "authors": [
13 |     "Sandro Kock <sandro.kock@gmail.com> (https://github.com/sandro-k)"
14 |   ],
15 |   "license": "MIT",
16 |   "ignore": [
17 |     "**/.*",
18 |     "node_modules",
19 |     "bower_components",
20 |     "test",
21 |     "tests"
22 |   ],
23 |   "dependencies": {
24 |     "polymer": "~1.2.1"
25 |   },
26 |   "devDependencies": {
27 |     "iron-component-page": "PolymerElements/iron-component-page#~1.0.5",
28 |     "paper-button": "PolymerElements/paper-button#~1.0.7",
29 |     "paper-icon-button": "PolymerElements/paper-icon-button#~1.0.3",
30 |     "paper-input": "PolymerElements/paper-input#~1.0.14",
31 |     "paper-slider": "PolymerElements/paper-slider#~1.0.6",
32 |     "paper-toggle-button": "PolymerElements/paper-toggle-button#~1.0.8",
33 |     "paper-tooltip": "PolymerElements/paper-tooltip#~1.1.0",
34 |     "test-fixture": "PolymerElements/test-fixture#^1.0.0",
35 |     "web-component-tester": "~3.3.22"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/mqtt-publish-regestration-behaviour.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <link rel="import" href="../polymer/polymer.html">
 3 | 
 4 | <!--
 5 | Enables a custom element to be included as an `mqtt-subscription` in an `mqtt-connection`.
 6 | -->
 7 | 
 8 | <script>
 9 |   (function(scope) {
10 |     var MqttElements = scope.MqttElements = scope.MqttElements || {};
11 | 
12 |     /**
13 |      @demo demo/index.html
14 |      @polymerBehavior
15 |      */
16 |     MqttElements.MqttPublishRegestrationBehaviour = {
17 | 
18 |       properties: {
19 |         /**
20 |          * Fired when the element is added to an `mqtt-connection`.
21 |          *
22 |          * @event mqtt-publish-register
23 |          */
24 | 
25 |         /**
26 |          * Fired when the element is removed from an `mqtt-connection`.
27 |          *
28 |          * @event mqtt-publish-register-unregister
29 |          */
30 | 
31 |         /**
32 |          * The `mqtt-connection` that the element is registered to.
33 |          */
34 |         _parentConnection: {
35 |           type: Object,
36 |         },
37 |       },
38 | 
39 |       attached: function() {
40 |         // Note: the `mqtt-connection` that this element belongs to will set this
41 |         // element's _parentConnection property when handling this event.
42 |         this.fire('mqtt-publish-register', {topic: this.topic, qos: this.qos});
43 |       },
44 | 
45 |       detached: function() {
46 |         if (this._parentConnection) {
47 |           this._parentConnection.fire('mqtt-publish-unregister', {target: this});
48 |         }
49 |       },
50 |     }
51 | 
52 |   })(window)
53 | </script>


--------------------------------------------------------------------------------
/mqtt-subscription-regestration-behaviour.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <link rel="import" href="../polymer/polymer.html">
 3 | 
 4 | <!--
 5 | Enables a custom element to be included as an `mqtt-subscription` in an `mqtt-connection`.
 6 | -->
 7 | <script>
 8 |   (function(scope) {
 9 |     var MqttElements = scope.MqttElements = scope.MqttElements || {};
10 | 
11 |     /**
12 |      @demo demo/index.html
13 |      @polymerBehavior
14 |      */
15 |     MqttElements.MqttSubscriptionRegestrationBehaviour = {
16 | 
17 |       properties: {
18 |         /**
19 |          * Fired when the element is added to an `mqtt-connection`.
20 |          *
21 |          * @event mqtt-subscription-register
22 |          */
23 | 
24 |         /**
25 |          * Fired when the element is removed from an `mqtt-connection`.
26 |          *
27 |          * @event 'mqtt-subscription-unregister
28 |          */
29 | 
30 |         /**
31 |          * The `mqtt-connection` that the element is registered to.
32 |          */
33 |         _parentConnection: {
34 |           type: Object,
35 |         },
36 |       },
37 | 
38 |       attached: function() {
39 |         // Note: the `mqtt-connection` that this element belongs to will set this
40 |         // element's _parentConnection property when handling this event.
41 |         this.fire('mqtt-subscription-register', {topic: this.topic, qos: this.qos});
42 |       },
43 | 
44 |       detached: function() {
45 |         if (this._parentConnection) {
46 |           this._parentConnection.fire('mqtt-subscription-unregister', {target: this});
47 |         }
48 |       },
49 |     }
50 | 
51 |   })(window)
52 | </script>


--------------------------------------------------------------------------------
/test/mqtt-connection-clientId.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 5 |   <title>mqtt-message-spec</title>
 6 | 
 7 | 
 8 |   <script src="../../webcomponentsjs/webcomponents.min.js"></script>
 9 |   <script src="../../web-component-tester/browser.js"></script>
10 |   <script src="../../test-fixture/test-fixture-mocha.js"></script>
11 | 
12 | 
13 |   <!-- Step 1: import the element to test -->
14 | 
15 |   <link rel="import" href="../../polymer/polymer.html">
16 |   <link rel="import" href="../../promise-polyfill/promise-polyfill-lite.html">
17 |   <link rel="import" href="../../test-fixture/test-fixture.html">
18 | 
19 | 
20 |   <link rel="import" href="../mqtt-elements.html">
21 | 
22 | </head>
23 | <body>
24 | 
25 | <test-fixture id="clientId">
26 |   <template>
27 |     <mqtt-connection>
28 |     </mqtt-connection>
29 |   </template>
30 | </test-fixture>
31 | 
32 | 
33 | <script>
34 |   var mqttConnection;
35 | 
36 |   suite('<mqtt-connection>', function () {
37 |     suite('mqtt-connection-clientId', function () {
38 |       setup(function () {
39 |         mqttConnection = fixture('clientId');
40 |         mqttConnection.options.clientId = "mqtt_elements";
41 |       });
42 | 
43 | 
44 |       test('mqtt-connection that has a static clientId', function () {
45 |         expect(mqttConnection.options.clientId).to.equal("mqtt_elements");
46 |         mqttConnection.connect();
47 |         expect(mqttConnection.options.clientId).to.equal("mqtt_elements");
48 |       });
49 | 
50 |     });
51 |   });
52 | </script>
53 | 
54 | </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | /* global module:false */
 2 | module.exports = function (grunt) {
 3 | 
 4 |     // Project configuration.
 5 |     grunt.initConfig({
 6 |         pkg: grunt.file.readJSON('package.json'),
 7 | 
 8 |         'wct-test': {
 9 |             local: {
10 |                 options: {remote: false},
11 |             },
12 |             remote: {
13 |                 options: {remote: true},
14 |             },
15 |             chrome: {
16 |                 options: {browsers: ['chrome']},
17 |             },
18 |             firefox: {
19 |                 options: {browsers: ['firefox']},
20 |             }
21 |         },
22 | 
23 |         watch: {
24 |             test: {
25 |                 files: ['test/*.html', 'test/*.js'],
26 |                 tasks: ['test']
27 |             },
28 |             html: {
29 |                 files: ['*.html'],
30 |                 tasks: ['test']
31 |             }
32 |         },
33 | 
34 |         connect: {
35 |             server: {
36 |                 options: {
37 |                     port: 9001,
38 |                     base: '..'
39 |                 }
40 |             }
41 |         }
42 |     });
43 | 
44 |     // watch
45 |     grunt.loadNpmTasks('grunt-contrib-watch');
46 | 
47 |     // connect
48 |     grunt.loadNpmTasks('grunt-contrib-connect');
49 | 
50 |     //load the wct grunt plugin
51 |     grunt.loadNpmTasks('web-component-tester');
52 | 
53 |     // a task that builds the overall app
54 |     grunt.registerTask('build', []);
55 | 
56 |     // define a serve task that will start a web server and watch for changes
57 |     grunt.registerTask('serve', ['connect', 'watch']);
58 | 
59 |     // Default task(s).
60 |     grunt.registerTask('default', ['build']);
61 | 
62 |     // define the test task to run wct tests
63 |     grunt.registerTask('test', ['wct-test:chrome']);
64 | 
65 | };
66 | 


--------------------------------------------------------------------------------
/test/mqtt-subscription-spec.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 5 |   <title>mqtt-subscription-spec</title>
 6 | 
 7 |   <script src="../../webcomponentsjs/webcomponents.min.js"></script>
 8 | 
 9 |   <script src="../../web-component-tester/browser.js"></script>
10 | 
11 |   <!-- Step 1: import the element to test -->
12 |   <link rel="import" href="../mqtt-elements.html">
13 | 
14 | </head>
15 | <body>
16 | 
17 | <mqtt-subscription></mqtt-subscription>
18 | 
19 | <script>
20 |   //  Setp 2: get the element
21 |   var mqttSubscription =  document.querySelector('mqtt-subscription');
22 | 
23 | 
24 |   suite('mqtt-subscription-spec', function() {
25 |     //  Setp 3: Test the element
26 |     test('Element is not null', function() {
27 |       assert.isNotNull(mqttSubscription);
28 |       assert.typeOf(mqttSubscription, 'object');
29 |     });
30 | 
31 |     test('mqtt-subscription.qos is a number', function() {
32 |       assert.isNumber(mqttSubscription.qos);
33 |       assert.strictEqual(mqttSubscription.qos, 0)
34 |     });
35 | 
36 |     test('mqtt-subscription.topic', function() {
37 |       assert.isUndefined(mqttSubscription.topic);
38 |     });
39 | 
40 |     test('mqtt-subscription.lastMessage', function() {
41 |       assert.isUndefined(mqttSubscription.lastMessage);
42 |     });
43 | 
44 |     test('mqtt-subscription.messages is a array', function() {
45 |       assert.typeOf(mqttSubscription.messages, 'array');
46 |       assert.deepEqual(mqttSubscription.messages, [])
47 |     });
48 | 
49 |     test('mqtt-subscription.subscribed is a boolean', function() {
50 |       assert.isBoolean(mqttSubscription.subscribed);
51 |       assert.isFalse(mqttSubscription.subscribed)
52 |     });
53 | 
54 |   });
55 | </script>
56 | 
57 | </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/test/mqtt-connection-read-only.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 5 |   <title>mqtt-connection-basic</title>
 6 | 
 7 |   <script src="../../webcomponentsjs/webcomponents.min.js"></script>
 8 |   <script src="../../web-component-tester/browser.js"></script>
 9 |   <script src="../../test-fixture/test-fixture-mocha.js"></script>
10 | 
11 |   <!-- Step 1: import the element to test -->
12 | 
13 |   <link rel="import" href="../../polymer/polymer.html">
14 |   <link rel="import" href="../../promise-polyfill/promise-polyfill-lite.html">
15 |   <link rel="import" href="../../test-fixture/test-fixture.html">
16 | 
17 |   <link rel="import" href="../mqtt-elements.html">
18 | 
19 | </head>
20 | <body>
21 | 
22 | <test-fixture id="Connection">
23 |   <template>
24 |     <mqtt-connection></mqtt-connection>
25 |   </template>
26 | </test-fixture>
27 | 
28 | <script>
29 |   //  Setp 2: get the element
30 |   var mqttElement;
31 | 
32 |   suite('<mqtt-connection>', function () {
33 |     suite('mqtt-connection-read-only', function () {
34 |       setup(function () {
35 |         mqttElement = fixture('Connection');
36 |       });
37 | 
38 |       //  Setp 3: Test the element
39 |       test('It should not be possible to change <mqtt-connection>.connected', function () {
40 |         assert.isFalse(mqttElement.connected);
41 |         mqttElement.connecting = true;
42 |         assert.isFalse(mqttElement.connected);
43 |       });
44 | 
45 |       test('It should not be possible to change <mqtt-connection>.disconnecting', function () {
46 |         assert.isFalse(mqttElement.disconnecting);
47 |         mqttElement.disconnecting = true;
48 |         assert.isFalse(mqttElement.disconnecting);
49 |       });
50 | 
51 |     });
52 | 
53 |   });
54 | </script>
55 | 
56 | </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/test/mqtt-connection-change-properties.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 5 |   <title>mqtt-connection-basic</title>
 6 | 
 7 | 
 8 |   <script src="../../webcomponentsjs/webcomponents.min.js"></script>
 9 |   <script src="../../web-component-tester/browser.js"></script>
10 |   <script src="../../test-fixture/test-fixture-mocha.js"></script>
11 | 
12 | 
13 |   <!-- Step 1: import the element to test -->
14 | 
15 |   <link rel="import" href="../../polymer/polymer.html">
16 |   <link rel="import" href="../../promise-polyfill/promise-polyfill-lite.html">
17 |   <link rel="import" href="../../test-fixture/test-fixture.html">
18 | 
19 | 
20 |   <link rel="import" href="../mqtt-elements.html">
21 | 
22 | </head>
23 | <body>
24 | 
25 | <test-fixture id="Connection">
26 |   <template>
27 |     <mqtt-connection></mqtt-connection>
28 |   </template>
29 | </test-fixture>
30 | 
31 | <script>
32 |   var mqttElement;
33 |   suite('<mqtt-connection>', function () {
34 | 
35 | 
36 |     suite('mqtt-connection-change-properties', function () {
37 |       setup(function () {
38 |         mqttElement = fixture('Connection');
39 |       });
40 | 
41 |       //  Setp 3: Test the element
42 |       test('It should be possible to change <mqtt-connection>.auto', function () {
43 |         assert.isFalse(mqttElement.auto);
44 |         mqttElement.auto = true;
45 |         assert.isTrue(mqttElement.auto);
46 |       });
47 | 
48 |       test('It should be possible to change <mqtt-connection>.clean', function () {
49 |         assert.isTrue(mqttElement.clean);
50 |         mqttElement.clean = false;
51 |         assert.isFalse(mqttElement.clean);
52 |       });
53 | 
54 |       test('It should be possible to change <mqtt-connection>.url', function () {
55 |         assert.strictEqual(mqttElement.url, "");
56 |         mqttElement.url = "ws://localhost";
57 |         assert.strictEqual(mqttElement.url, "ws://localhost");
58 |       });
59 | 
60 |     });
61 |   });
62 | </script>
63 | 
64 | </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/demo/elements/demo.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | --status-icon: {
  3 |      width: 20px;
  4 |      height: 20px;
  5 |      border-radius: 50%;
  6 |      overflow: hidden;
  7 |  };
  8 | 
  9 | --paper-icon-button: {
 10 |     margin-right: -8px;
 11 |  };
 12 | }
 13 | 
 14 | body {
 15 |     font-family: 'Roboto', 'Noto', sans-serif;
 16 |     font-size: 14px;
 17 |     margin: 0;
 18 |     padding: 24px;
 19 |     background-color: var(--paper-grey-50);
 20 | }
 21 | 
 22 | 
 23 | .horizontal-section {
 24 |     background-color: white;
 25 |     padding: 24px;
 26 |     margin-right: 24px;
 27 |     min-width: 200px;
 28 | @apply(--shadow-elevation-2dp);
 29 | }
 30 | 
 31 | .vertical-section {
 32 |     background-color: white;
 33 |     padding: 24px;
 34 |     margin: 0 24px 24px 24px;
 35 | @apply(--shadow-elevation-2dp);
 36 | }
 37 | 
 38 | .vertical-section table {
 39 |     width: 100%;
 40 | }
 41 | 
 42 | .vertical-section thead {
 43 |     font-weight: 600;
 44 | }
 45 | 
 46 | .vertical-section .full {
 47 |     width: 100%;
 48 | }
 49 | 
 50 | paper-slider {
 51 |     width:100px;
 52 | }
 53 | 
 54 | .sub-header {
 55 | @apply(--layout);
 56 | @apply(--layout-center);
 57 | @apply(--layout-wrap);
 58 | }
 59 | 
 60 | .sub-header .title {
 61 | @apply(--layout-flex);
 62 |     min-width: 248px;
 63 | }
 64 | 
 65 | .sub-header .qos {
 66 |     display: block;
 67 | }
 68 | 
 69 | .line {
 70 |     margin-right: 24px;
 71 | }
 72 | 
 73 | .horizontal-section-container-end {
 74 |     margin-top: 16px;
 75 | @apply(--layout-horizontal);
 76 | @apply(--layout-center);
 77 | @apply(--layout-end-justified);
 78 | @apply(--layout-wrap);
 79 | }
 80 | 
 81 | td, th {
 82 |     border: 1px solid #999;
 83 |     padding: 0.5rem;
 84 | }
 85 | 
 86 | tbody tr:nth-child(odd) {
 87 |     background-color: #fafafa;
 88 | }
 89 | 
 90 | .connected {
 91 | @apply(--status-icon);
 92 |     background: darkseagreen;
 93 | }
 94 | 
 95 | .disconnected {
 96 | @apply(--status-icon);
 97 |     background: indianred;
 98 | }
 99 | 
100 | .status {
101 | @apply(--layout);
102 | @apply(--layout-center);
103 |     margin-left: 1rem;
104 | }
105 | 
106 | .status h3 {
107 | @apply(--layout-flex);
108 |     margin-right: 0.25rem;
109 | }
110 | 
111 | .layout.wrap.center-center {
112 |     max-width: 800px;
113 | }
114 | 
115 | 
116 | .settings > h3 {
117 |     margin-bottom: 0;
118 | }
119 | 


--------------------------------------------------------------------------------
/test/mqtt-connection-private-methods.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 5 |   <title>mqtt-connection-basic</title>
 6 | 
 7 |   <script src="../../webcomponentsjs/webcomponents.min.js"></script>
 8 |   <script src="../../web-component-tester/browser.js"></script>
 9 |   <script src="../../test-fixture/test-fixture-mocha.js"></script>
10 | 
11 |   <link rel="import" href="../../polymer/polymer.html">
12 |   <link rel="import" href="../../promise-polyfill/promise-polyfill-lite.html">
13 |   <link rel="import" href="../../test-fixture/test-fixture.html">
14 | 
15 |   <!-- Step 1: import the element to test -->
16 |   <link rel="import" href="../mqtt-elements.html">
17 | </head>
18 | <body>
19 | 
20 | <test-fixture id="Connection">
21 |   <template>
22 |     <mqtt-connection></mqtt-connection>
23 |   </template>
24 | </test-fixture>
25 | 
26 | <test-fixture id="ConnectionWithCustomClientIDPrefix">
27 |   <template is="dom-template">
28 |     <mqtt-connection client-id-prefix="{{prefix}}"></mqtt-connection>
29 |   </template>
30 | </test-fixture>
31 | 
32 | <script>
33 |   var mqttElement;
34 |   suite('<mqtt-connection>', function () {
35 | 
36 |     suite('mqtt-connection-private-methods', function () {
37 |       setup(function () {
38 |         mqttElement = fixture('Connection');
39 |       });
40 | 
41 |       //  Setup 3: Test the element
42 |       test('_generateClientId returns a string', function () {
43 |         var id = mqttElement._generateClientId();
44 |         assert.typeOf(id, 'string', 'mqtt-connection._generateClientId should be a String');
45 |       });
46 | 
47 |     });
48 | 
49 |     suite('mqtt-connection-private-methods', function () {
50 |       var clientIdPrefix = {prefix: "mqttlens_"}
51 |       setup(function () {
52 |         mqttElement = fixture('ConnectionWithCustomClientIDPrefix', clientIdPrefix);
53 |       });
54 | 
55 |       test('Setting clientIdPrefix should return the prefix within the clientId', function () {
56 |         var id = mqttElement._generateClientId();
57 |         assert.typeOf(id, 'string', 'mqtt-connection._generateClientId should be a String');
58 |         expect(id).to.contain(clientIdPrefix.prefix);
59 |       });
60 | 
61 |     });
62 | 
63 |   });
64 | 
65 | 
66 | </script>
67 | 
68 | </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/test/mqtt-publish-test.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 5 |   <title>mqtt-subscription-spec</title>
 6 | 
 7 |   <script src="../../webcomponentsjs/webcomponents.min.js"></script>
 8 |   <script src="../../web-component-tester/browser.js"></script>
 9 |   <script src="../../test-fixture/test-fixture-mocha.js"></script>
10 | 
11 |   <link rel="import" href="../../polymer/polymer.html">
12 |   <link rel="import" href="../../promise-polyfill/promise-polyfill-lite.html">
13 |   <link rel="import" href="../../test-fixture/test-fixture.html">
14 | 
15 |   <!-- Step 1: import the element to test -->
16 |   <link rel="import" href="../mqtt-elements.html">
17 | 
18 | </head>
19 | <body>
20 | 
21 | <test-fixture id="AutoMqttPublish">
22 |   <template>
23 |     <mqtt-connection>
24 |       <mqtt-publish topic="mqtt/js" payload="mqtt/elements" auto></mqtt-publish>
25 |     </mqtt-connection>
26 |   </template>
27 | </test-fixture>
28 | 
29 | <script>
30 |   //  Setp 2: get the element
31 |   var mqttConnection;
32 |   var mqttPublish;
33 |   var sandbox;
34 | 
35 |   suite('<mqtt-publish>', function () {
36 |     suite('mqtt-publish with stub for mqtt-publish#publish', function () {
37 |       setup(function () {
38 |         sandbox = sinon.sandbox.create();
39 |         sandbox.stub(MqttElements.MqttPublish.prototype, "publish");
40 |         mqttConnection = fixture('AutoMqttPublish');
41 |       });
42 | 
43 |       //  Setp 3: Test the element
44 |       test('that mqtt-publish#publish is called once', function () {
45 |         sinon.assert.calledOnce(MqttElements.MqttPublish.prototype.publish);
46 |       });
47 | 
48 |       teardown(function () {
49 |         sandbox.restore();
50 |       });
51 |     });
52 | 
53 |     suite('mqtt-publish with stub for mqtt-connection#publish', function () {
54 |       setup(function () {
55 |         sandbox = sinon.sandbox.create();
56 |         sandbox.stub(MqttElements.MqttConnection.prototype, "publish");
57 |         mqttConnection = fixture('AutoMqttPublish');
58 |       });
59 | 
60 |       //  Setp 3: Test the element
61 |       test('that mqtt-connection#publish is called once', function () {
62 |         sinon.assert.calledOnce(MqttElements.MqttConnection.prototype.publish);
63 |       });
64 | 
65 |       teardown(function () {
66 |         sandbox.restore();
67 |       });
68 |     });
69 |   });
70 | </script>
71 | 
72 | </body>
73 | </html>
74 | 


--------------------------------------------------------------------------------
/test/mqtt-connection-and-subscription.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 5 |   <title>mqtt-message-spec</title>
 6 | 
 7 | 
 8 |   <script src="../../webcomponentsjs/webcomponents.min.js"></script>
 9 |   <script src="../../web-component-tester/browser.js"></script>
10 |   <script src="../../test-fixture/test-fixture-mocha.js"></script>
11 | 
12 | 
13 |   <!-- Step 1: import the element to test -->
14 | 
15 |   <link rel="import" href="../../polymer/polymer.html">
16 |   <link rel="import" href="../../promise-polyfill/promise-polyfill-lite.html">
17 |   <link rel="import" href="../../test-fixture/test-fixture.html">
18 | 
19 | 
20 |   <link rel="import" href="../mqtt-elements.html">
21 | 
22 | </head>
23 | <body>
24 | 
25 | <test-fixture id="Connection">
26 |   <template>
27 |     <mqtt-connection url="ws://127.0.0.1:3000">
28 |       <mqtt-subscription topic="mqttjs/test"></mqtt-subscription>
29 |     </mqtt-connection>
30 |   </template>
31 | </test-fixture>
32 | 
33 | <test-fixture id="Multiple">
34 |   <template>
35 |     <mqtt-connection url="ws://127.0.0.1:3000">
36 |       <mqtt-subscription topic="mqttjs/test1"></mqtt-subscription>
37 |       <mqtt-subscription topic="mqttjs/test2" qos="1"></mqtt-subscription>
38 |       <mqtt-subscription topic="mqttjs/test3" qos="2"></mqtt-subscription>
39 |     </mqtt-connection>
40 |   </template>
41 | </test-fixture>
42 | 
43 | 
44 | <script>
45 |   //  Setp 2: get the element
46 |   var mqttConnection;
47 |   var mqttConnectionMulti;
48 | 
49 |   suite('<mqtt-connection>', function () {
50 |     suite('mqtt-connection-subscription', function () {
51 |       setup(function () {
52 |         mqttConnection = fixture('Connection');
53 |       });
54 | 
55 |       //  Setp 3: Test the element
56 |       test('Element is not null', function () {
57 |         assert.isNotNull(mqttConnection);
58 |         assert.typeOf(mqttConnection, 'object');
59 |       });
60 | 
61 |       test('mqtt-connection has one subscriptions', function () {
62 |         assert.typeOf(mqttConnection.subscriptions, 'array');
63 |         expect(mqttConnection.subscriptions).to.have.length.of(1);
64 |       });
65 |     });
66 | 
67 |     suite('mqtt-connection-subscription', function () {
68 |       setup(function () {
69 |         mqttConnectionMulti = fixture('Multiple');
70 |       });
71 | 
72 |       test('mqtt-connection#multiple has three subscriptions', function () {
73 |         assert.typeOf(mqttConnectionMulti.subscriptions, 'array');
74 |         expect(mqttConnectionMulti.subscriptions).to.have.length.of(3);
75 |       });
76 |     });
77 | 
78 |   });
79 | </script>
80 | 
81 | </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------
/test/mqtt-connection-max-listeners.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 5 |   <title>mqtt-connection-max-listeners</title>
 6 | 
 7 |   <script src="../../webcomponentsjs/webcomponents.min.js"></script>
 8 |   <script src="../../web-component-tester/browser.js"></script>
 9 |   <script src="../../test-fixture/test-fixture-mocha.js"></script>
10 | 
11 |   <link rel="import" href="../../polymer/polymer.html">
12 |   <link rel="import" href="../../promise-polyfill/promise-polyfill-lite.html">
13 |   <link rel="import" href="../../test-fixture/test-fixture.html">
14 | 
15 |   <!-- Step 1: import the element to test -->
16 |   <link rel="import" href="../mqtt-elements.html">
17 | </head>
18 | <body>
19 | 
20 | <template id="AutoConnection" is="dom-bind">
21 |   <!--real mqtt element-->
22 |   <mqtt-connection auto url="ws://localhost:3005" client="{{mqttClient}}"></mqtt-connection>
23 | 
24 |   <!--injected mqtt elements-->
25 |   <mqtt-connection client="[[mqttClient]]"></mqtt-connection>
26 |   <mqtt-connection client="[[mqttClient]]"></mqtt-connection>
27 |   <mqtt-connection client="[[mqttClient]]"></mqtt-connection>
28 |   <mqtt-connection client="[[mqttClient]]"></mqtt-connection>
29 |   <mqtt-connection client="[[mqttClient]]"></mqtt-connection>
30 |   <mqtt-connection client="[[mqttClient]]"></mqtt-connection>
31 |   <div>
32 |     <mqtt-connection></mqtt-connection>
33 |     <mqtt-connection></mqtt-connection>
34 |   </div>
35 | </template>
36 | 
37 | 
38 | <script>
39 |   //  Setp 2: get the element
40 |   var mqttElement;
41 |   var mqttConnection;
42 |   var otherConnections;
43 | 
44 | 
45 |   suite('<mqtt-connection>', function () {
46 | 
47 | 
48 |     suite('mqtt-connection-max-listeners', function () {
49 |       setup(function () {
50 |         mqttElement = document.querySelector("#AutoConnection");
51 |         sandbox = sinon.sandbox.create();
52 |         sandbox.stub(console, "error");
53 |       });
54 | 
55 |       //  Setup 3: Test the element
56 |       test('mqtt-connection.client will throw an error if more than 7 mqtt-connection elements are registered ' +
57 |           'on the same client object ', function (done) {
58 |         mqttConnection = document.querySelector("mqtt-connection");
59 |         otherConnections = document.querySelectorAll("div > mqtt-connection");
60 |         otherConnections[0].client = mqttConnection.client;
61 |         sinon.assert.calledTwice(console.error);
62 |         done();
63 |       });
64 | 
65 |       //  Setup 3: Test the element
66 |       test('mqtt-connection.client will not throw an error if more than 7 mqtt-connection elements are registered ' +
67 |           'on the same client object ', function (done) {
68 |         mqttConnection = document.querySelector("mqtt-connection");
69 |         mqttConnection.maxListeners = 12;
70 |         otherConnections = document.querySelectorAll("div > mqtt-connection");
71 |         otherConnections[0].client = mqttConnection.client;
72 |         sinon.assert.notCalled(console.error);
73 |         // clean up as we have to use dom-bind as template to simulate the actual use case
74 |         mqttConnection.disconnect();
75 |         done();
76 |       });
77 | 
78 |       teardown(function () {
79 | 
80 |         sandbox.restore();
81 |       });
82 | 
83 |     });
84 | 
85 |   });
86 | </script>
87 | 
88 | </body>
89 | </html>
90 | 


--------------------------------------------------------------------------------
/test/mqtt-connection-events.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <!doctype html>
12 | <html>
13 | <head>
14 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15 |   <title>mqtt-connection-events</title>
16 | 
17 |   <script src="../../webcomponentsjs/webcomponents.min.js"></script>
18 |   <script src="../../web-component-tester/browser.js"></script>
19 |   <script src="../../test-fixture/test-fixture-mocha.js"></script>
20 | 
21 |   <!-- Step 1: import the element to test -->
22 |   <link rel="import" href="../../polymer/polymer.html">
23 |   <link rel="import" href="../../promise-polyfill/promise-polyfill-lite.html">
24 |   <link rel="import" href="../../test-fixture/test-fixture.html">
25 | 
26 |   <link rel="import" href="../mqtt-elements.html">
27 | 
28 | </head>
29 | <body>
30 | 
31 | <test-fixture id="Connection">
32 |   <template>
33 |     <mqtt-connection></mqtt-connection>
34 |   </template>
35 | </test-fixture>
36 | 
37 | <script>
38 |   var mqttElement;
39 |   suite('<mqtt-connection>', function () {
40 |     suite('mqtt-connection-events', function () {
41 |       setup(function () {
42 |         mqttElement = fixture('Connection');
43 |       });
44 | 
45 |       //  Setp 3: Test the element
46 |       test('calling _handelConnected should fire a `mqtt-connection-connected` event', function (done) {
47 |         mqttElement.addEventListener('mqtt-connection-connected', function () {
48 |           done();
49 |         });
50 |         mqttElement._handelConnected();
51 |       });
52 | 
53 |       test('calling _handelReconnect should fire a `mqtt-connection-reconnect` event', function (done) {
54 |         mqttElement.addEventListener('mqtt-connection-reconnect', function () {
55 |           done();
56 |         });
57 |         mqttElement._handelReconnect();
58 |       });
59 | 
60 |       test('calling _handelClose should fire a `mqtt-connection-close` event', function (done) {
61 |         mqttElement.addEventListener('mqtt-connection-close', function () {
62 |           done();
63 |         });
64 |         mqttElement._handelClose();
65 |       });
66 | 
67 |       test('calling _handelOffline should fire a `mqtt-connection-offline` event', function (done) {
68 |         mqttElement.addEventListener('mqtt-connection-offline', function () {
69 |           done();
70 |         });
71 |         mqttElement._handelOffline();
72 |       });
73 | 
74 |       test('calling _handelError should fire a `mqtt-connection-error` event', function (done) {
75 |         mqttElement.addEventListener('mqtt-connection-error', function () {
76 |           done();
77 |         });
78 |         mqttElement._handelError();
79 |       });
80 | 
81 |       test('calling _handelMessage should fire a `mqtt-message` event', function (done) {
82 |         mqttElement.addEventListener('mqtt-message', function () {
83 |           done();
84 |         });
85 |         // Generating a test message/ packet
86 |         var message = {};
87 |         var packet = {};
88 |         mqttElement._handelMessage("mqttjs/test/message", message, packet);
89 |       });
90 | 
91 |     });
92 |   });
93 | </script>
94 | 
95 | </body>
96 | </html>
97 | 


--------------------------------------------------------------------------------
/demo/injecting-mqtt-connection.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  6 |   <title>inject &lt;mqtt-connection&gt; Demo</title>
  7 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  8 |   <link rel="import" href="../mqtt-elements.html">
  9 |   <link rel="import" href="../../paper-button/paper-button.html">
 10 |   <link rel="import" href="../../paper-input/paper-input.html">
 11 | </head>
 12 | 
 13 | <body>
 14 | <template is="dom-bind">
 15 | 
 16 |   <!--
 17 |     First we create a mqtt-connection that actually makes a mqtt-connection over websockets to an MQTT broker.
 18 |     That connection will create {{client}} and populates the variable
 19 |   -->
 20 |   <mqtt-connection auto
 21 |                    id="connection"
 22 |                    url="ws://127.0.0.1:3005"
 23 |                    connected="{{connected}}"
 24 |                    client="{{client}}">
 25 |   </mqtt-connection>
 26 | 
 27 | 
 28 |   <!--
 29 |     The second mqtt-connection has not set the auto attribute nor the url property and therefor will not create the
 30 |     MQTT client, but will get connected as soon the client property will be set.
 31 |   -->
 32 | 
 33 |   <mqtt-connection id="connection2"
 34 |                    connected="{{connected2}}"
 35 |                    client="[[client]]"
 36 |                    subscriptions="{{subscriptions}}">
 37 | 
 38 |     <!--
 39 |       for every item (topic) in subs the dom-repeat element will create on mqtt-subscription element within the
 40 |       mqtt-connection element, resulting in an mqtt subscription for every topic.
 41 |      -->
 42 |     <template is="dom-repeat" items="{{subs}}">
 43 |       <mqtt-subscription topic="[[item]]"
 44 |                          number-of-messages="10"></mqtt-subscription>
 45 |     </template>
 46 | 
 47 |   </mqtt-connection>
 48 | 
 49 |   <!--showing the status of both mqtt-connection elements-->
 50 |   <h1>Status of #connection: <span>[[_connectionStatusToString(connected)]]</span></h1>
 51 |   <h1>Status of #connection2: <span>[[_connectionStatusToString(connected2)]]</span></h1>
 52 | 
 53 |   <!--a simple input field to set the mqtt-topic-->
 54 |   <paper-input label="topic" value="{{topic}}"></paper-input>
 55 | 
 56 |   <!--a simple input field to set the mqtt-message-->
 57 |   <paper-input label="message" value="{{message}}"></paper-input>
 58 | 
 59 |   <!--a button to add a subscription-->
 60 |   <paper-button raised on-tap="_addSub">Add Sub</paper-button>
 61 | 
 62 |   <!--a button to send a mqtt message-->
 63 |   <paper-button raised on-tap="_sendMessage">Send Message</paper-button>
 64 | 
 65 |   <div id="content">
 66 |     <h1>Subscriptions:</h1>
 67 |     <hr/>
 68 |     <template is="dom-repeat" items="{{subscriptions}}">
 69 |       <div>Topic: <span>{{item.topic}}</span></div>
 70 |       <div>Subscribed: <span>{{item.subscribed}}</span></div>
 71 |       <h4>Messages:</h4>
 72 |       <template is="dom-repeat" items="{{item.messages}}" as="message">
 73 |         <div>
 74 |           <span>{{message.topic}}</span>:<span>{{message.parsedPayload}}</span>
 75 |         </div>
 76 |       </template>
 77 |       <hr/>
 78 |     </template>
 79 |   </div>
 80 | </template>
 81 | 
 82 | <script>
 83 | 
 84 |   var demo = document.querySelector('template[is="dom-bind"]');
 85 |   var connection = document.querySelector('#connection');
 86 | 
 87 |   demo.subs = ["foo/bar", "mqttjs/elements"];
 88 | 
 89 |   demo._sendMessage = function () {
 90 |     this.$.connection.publish(this.topic, this.message);
 91 |   };
 92 | 
 93 |   demo._addSub = function () {
 94 |     this.push("subs", demo.topic);
 95 |   };
 96 | 
 97 |   demo._connectionStatusToString = function(condition){
 98 |     if (condition){
 99 |       return "connected";
100 |     } else {
101 |       return "disconnected";
102 |     }
103 |   };
104 | 
105 | 
106 | </script>
107 | </body>
108 | </html>
109 | 


--------------------------------------------------------------------------------
/test/mqtt-publish-spec.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | <head>
  4 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  5 |   <title>mqtt-subscription-spec</title>
  6 | 
  7 |   <script src="../../webcomponentsjs/webcomponents.min.js"></script>
  8 |   <script src="../../web-component-tester/browser.js"></script>
  9 |   <script src="../../test-fixture/test-fixture-mocha.js"></script>
 10 | 
 11 |   <link rel="import" href="../../polymer/polymer.html">
 12 |   <link rel="import" href="../../promise-polyfill/promise-polyfill-lite.html">
 13 |   <link rel="import" href="../../test-fixture/test-fixture.html">
 14 | 
 15 |   <!-- Step 1: import the element to test -->
 16 |   <link rel="import" href="../mqtt-elements.html">
 17 | 
 18 | </head>
 19 | <body>
 20 | 
 21 | <test-fixture id="StanaloneMqttPublish">
 22 |   <template>
 23 |     <mqtt-publish></mqtt-publish>
 24 |   </template>
 25 | </test-fixture>
 26 | 
 27 | <script>
 28 |   //  Setp 2: get the element
 29 |   var mqttPublish;
 30 | 
 31 | 
 32 |   suite('<mqtt-publish>', function () {
 33 |     suite('mqtt-publish-spec', function () {
 34 |       setup(function () {
 35 |         mqttPublish = fixture('StanaloneMqttPublish');
 36 |       });
 37 | 
 38 |       //  Setp 3: Test the element
 39 |       test('Element is not null', function () {
 40 |         assert.isNotNull(mqttPublish);
 41 |         assert.notTypeOf(mqttPublish, 'undefined');
 42 |       });
 43 | 
 44 |       test("mqtt.property is an object that defines the attributes of mqtt-publish", function(){
 45 | 
 46 |         expect(mqttPublish.properties).to.have.a.property("auto")
 47 |             .that.is.an('object')
 48 |             .that.deep.equals({type: Boolean, value: false});
 49 | 
 50 |         expect(mqttPublish.properties).to.have.a.property("qos")
 51 |             .that.is.an('object')
 52 |             .that.deep.equals({type: Number, value: 0, defined: true});
 53 | 
 54 |         expect(mqttPublish.properties).to.have.a.property("topic")
 55 |             .that.is.an('object')
 56 |             .that.deep.equals({type: String, defined: true});
 57 | 
 58 |         expect(mqttPublish.properties).to.have.a.property("payload")
 59 |             .that.is.an('object')
 60 |             .that.deep.equals({type: Object, value: {}, defined: true});
 61 | 
 62 |         expect(mqttPublish.properties).to.have.a.property("retained")
 63 |             .that.is.an('object')
 64 |             .that.deep.equals({type: Boolean, value: false, defined: true});
 65 | 
 66 |         expect(mqttPublish.properties).to.have.a.property("published")
 67 |             .that.is.an('object')
 68 |             .that.deep.equals({type: Boolean, value: false, readOnly: true, defined: true});
 69 | 
 70 |       });
 71 | 
 72 |       test('mqttPublish.auto is boolean and false by default', function () {
 73 |         //noinspection BadExpressionStatementJS
 74 |         expect(mqttPublish).to.have.a.property("auto").that.is.false;
 75 |       });
 76 | 
 77 |       test('mqttPublish.qos is a number and 0 by default', function () {
 78 |         //noinspection BadExpressionStatementJS
 79 |         expect(mqttPublish).to.have.a.property("qos").that.is.equal(0);
 80 |       });
 81 | 
 82 |       test('mqttPublish.topic is a undefined by default', function () {
 83 |         //noinspection BadExpressionStatementJS
 84 |         expect(mqttPublish.toipc).to.be.an('undefined');
 85 |       });
 86 | 
 87 |       test('mqttPublish.payload should be an empty object by default', function () {
 88 |         //noinspection BadExpressionStatementJS
 89 |         expect(mqttPublish.payload).to.be.an('object').that.deep.equals({});
 90 |       });
 91 | 
 92 |       test('mqttPublish.retained is boolean and false by default', function () {
 93 |         //noinspection BadExpressionStatementJS
 94 |         expect(mqttPublish).to.have.a.property("retained").that.is.false;
 95 |       });
 96 | 
 97 |       test('mqttPublish.published is boolean and false by default', function () {
 98 |         //noinspection BadExpressionStatementJS
 99 |         expect(mqttPublish).to.have.a.property("published").that.is.false;
100 |       });
101 | 
102 |     });
103 |   });
104 | </script>
105 | 
106 | </body>
107 | </html>
108 | 


--------------------------------------------------------------------------------
/mqtt-publish.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="mqtt-publish-regestration-behaviour.html">
  3 | 
  4 | <!--
  5 | The `mqtt-publish` element publishes MQTT messages to an MQTT topic. Place the element within a `<mqtt-connection>`
  6 | to create the binding between the connection and the element. The following example
  7 | 
  8 |     <mqtt-connection >
  9 |         <mqtt-publish
 10 |             auto
 11 |             retained
 12 |             qos="1"
 13 |             topic="foo/bar"
 14 |             payload="Hello world!"></mqtt-publish>
 15 |     </mqtt-connection>
 16 | 
 17 | publishes a retained message to the topic "foo/bar".
 18 | 
 19 | @demo demo/index.html
 20 | -->
 21 | 
 22 | <dom-module id="mqtt-publish">
 23 |   <template>
 24 |   </template>
 25 | </dom-module>
 26 | 
 27 | <script>
 28 |   'use strict';
 29 |   (function (scope) {
 30 | 
 31 |     var MqttElements = scope.MqttElements = scope.MqttElements || {};
 32 | 
 33 |     MqttElements.MqttPublish = Polymer({
 34 |       is: 'mqtt-publish',
 35 | 
 36 |       /**
 37 |        * Fired when a publication is published.
 38 |        *
 39 |        * @event mqtt-publication-published
 40 |        * @param {{
 41 |      *   topic:  string,
 42 |      *   qos: number,
 43 |      *   payload: string | Object
 44 |      *   retained: boolean
 45 |      * }}
 46 |        */
 47 | 
 48 |       properties: {
 49 | 
 50 |         /**
 51 |          * If auto is set to true `<mqtt-publish auto>` then an MQTT message is send each time
 52 |          * the payload is changed.
 53 |          */
 54 |         auto: {
 55 |           type: Boolean,
 56 |           value: false,
 57 |         },
 58 | 
 59 |         /**
 60 |          * The quality of service the MQTT publication is send to the MQTT broker
 61 |          */
 62 |         qos: {
 63 |           type: Number,
 64 |           value: 0,
 65 |         },
 66 | 
 67 |         /**
 68 |          * The topic the publication is made to
 69 |          */
 70 |         topic: {
 71 |           type: String,
 72 |         },
 73 | 
 74 |         /**
 75 |          * The payload that is send to the topic
 76 |          */
 77 |         payload: {
 78 |           type: Object,
 79 |           value: {},
 80 |         },
 81 | 
 82 |         /**
 83 |          * Set retained to true if the message should be saved at the MQTT broker an should "stick" on it.
 84 |          */
 85 |         retained: {
 86 |           type: Boolean,
 87 |           value: false,
 88 |         },
 89 | 
 90 |         /**
 91 |          * True if the publication was successful
 92 |          */
 93 |         published: {
 94 |           type: Boolean,
 95 |           value: false,
 96 |           readOnly: true,
 97 |         },
 98 |       },
 99 | 
100 |       behaviors: [MqttElements.MqttPublishRegestrationBehaviour],
101 | 
102 |       observers: [
103 |         '_propertiesChanged(topic, payload, qos, retained, _parentConnection)'
104 |       ],
105 | 
106 |       /**
107 |        * A property observer to send messages if `auto` is set to true and values change
108 |        * @param topic
109 |        * @param payload
110 |        * @param qos
111 |        * @param retained
112 |        * @private
113 |        */
114 |       _propertiesChanged: function (topic, payload, qos, retained, _parentConnection) {
115 |         if(this.auto && topic && payload && this._parentConnection) {
116 |           this.publish();
117 |         }
118 |       },
119 | 
120 |       /**
121 |        * Manually publishes the <mqtt-publish> element to the <mqtt-connection> it is bound to. Use the attributes on the
122 |        * Element to set the topic, payload, QoS an retained flag for the MQTT message.
123 |        */
124 |       publish: function () {
125 |         if(this.topic && this.topic.length > 0 && this.payload && this.payload.length > 0 && this._parentConnection) {
126 |           this._setPublished(false);
127 |           this._parentConnection.publish(this.topic, this.payload, this.qos, this.retained, this._handelPublicationPublished.bind(this));
128 |         }
129 |       },
130 | 
131 |       /**
132 |        * Callback handel to notify the element that the payload has been published
133 |        * @private
134 |        */
135 |       _handelPublicationPublished: function () {
136 |         this._setPublished(true);
137 | 
138 |         this.fire(
139 |             "mqtt-publication-published",
140 |             {
141 |               qos: this.qos,
142 |               topic: this.topic,
143 |               payload: this.payload,
144 |               retained: this.retained
145 |             }
146 |         );
147 |       },
148 | 
149 |     })
150 |   })(window);
151 | </script>
152 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![mqtt-elements](https://raw.githubusercontent.com/mqttjs/mqtt-elements/67266290fe6a0b6b3ff51418efb7c1c0662c78c5/assets/mqtt-elements.png)
  2 | =======
  3 | 
  4 | Polymer elements to establish a MQTT connection to a MQTT broker.
  5 |  
  6 | ## API
  7 | 
  8 | [API documentation](http://mqttjs.github.io/mqtt-elements/bower_components/mqtt-elements/)
  9 | 
 10 | ## Install
 11 | 
 12 | ```
 13 | bower install --save mqtt-elements
 14 | ```
 15 | 
 16 | ## Import
 17 | 
 18 | ```
 19 | <link rel="import" href="../mqtt-elements/mqtt-elements.html">
 20 | ```
 21 | 
 22 | ## Usage
 23 | 
 24 | ```
 25 |     <mqtt-connection auto url="ws://HOST:PORT">
 26 |         <mqtt-subscription
 27 |             topic="foo/bar"
 28 |             number-of-messages="Infinity"
 29 |             last-message="{{lastMessage}}"
 30 |             messages="{{messages}}"
 31 |             subscribed="{{subscribed}}"></mqtt-subscription>
 32 |         <mqtt-publish 
 33 |             auto
 34 |             retained
 35 |             topic="foo/bar"
 36 |             payload="Hello world!"
 37 |             qos="1"></mqtt-publish>        
 38 |     </mqtt-connection>
 39 | ```
 40 | 
 41 | ### Connect 
 42 | 
 43 | ```
 44 | <mqtt-connection url="ws://HOST:PORT"></mqtt-connection>
 45 | ```
 46 | 
 47 | The method `<mqtt-connection>#connect` has to be called manually to establish the MQTT connection to the MQTT broker. 
 48 | Set `<mqtt-connection>#auto` flag to make the MQTT connection as soon as possible.   
 49 | 
 50 | 
 51 | ### Connect with Username / Password
 52 | 
 53 | ```
 54 |     <mqtt-connection
 55 |         url="ws://HOST:PORT"
 56 |         options='{"username": "USERNAME", "password": "PASSWORD"}'
 57 |         with-credentials
 58 |         auto>
 59 |     </mqtt-connection>
 60 | ```
 61 | 
 62 | OR
 63 | 
 64 | ```
 65 |     <mqtt-connection
 66 |         url="ws://HOST:PORT"
 67 |         username="USERNAME"
 68 |         password="PASSWORD"
 69 |         with-credentials
 70 |         auto>
 71 |     </mqtt-connection>
 72 | ```
 73 | 
 74 | The flag `<mqtt-connection>#withCredentials` indecates the MQTT connection to wait until a username and password for 
 75 | the connection is supplied.
 76 | 
 77 | ### Publish
 78 | 
 79 | The following example will publish on the topic »mqtt/elements« with the payload »Publishing via a HTML element«.
 80 | Every time when `<mqtt-publish>#payload` changes the element will publish a new MQTT message to the topic »mqtt/elements«.
 81 | If the `<mqtt-publish>#auto` flag is not set - `<mqtt-publish>#publish` has to be called to publish a MQTT message to the topic 
 82 | 
 83 | ```
 84 | <mqtt-connection
 85 |     url="ws://HOST:PORT"
 86 |     auto>
 87 |   <mqtt-publish topic="mqtt/elements" payload="Publishing via a HTML element" auto></mqtt-publish>
 88 | </mqtt-connection>
 89 | ```
 90 | 
 91 | #### Publish on multiple topic
 92 | 
 93 | A `<mqtt-connection>` element can hold any number of `<mqtt-publish>` elements to publish to different topics.
 94 |  
 95 | ```
 96 | <mqtt-connection
 97 |     url="ws://HOST:PORT"
 98 |     auto>
 99 |   <mqtt-publish topic="foo/bar" payload="this is easy" auto></mqtt-publish>
100 |   <mqtt-publish topic="client/status" payload="online" qos="1" auto></mqtt-publish>
101 |   <mqtt-publish topic="client/location" payload="{'foo': 'bar'}" auto></mqtt-publish>
102 | </mqtt-connection>
103 | ```
104 | 
105 | #### Publish a retained message
106 | 
107 | To publish a message with the RETAINED flag set to true add the `<mqtt-publish>#retained` flag.
108 | 
109 | ```
110 | <mqtt-connection
111 |     url="ws://HOST:PORT"
112 |     auto>
113 |     <mqtt-publish topic="foo/bar" payload="this is easy" retained auto></mqtt-publish>
114 | </mqtt-connection>
115 | ```
116 | 
117 | ### Subscribe
118 | 
119 | ```
120 |  <mqtt-connection
121 |      url="ws://HOST:PORT"
122 |      auto>
123 |    <mqtt-subscription topic="foo/bar"></mqtt-subscription>
124 |  </mqtt-connection>
125 | ```
126 | 
127 | The last message to the topic will be save in `<mqtt-subscription>#lastMessage`. The `<mqtt-subscription>` stores the 
128 | last `n` messages within the `<mqtt-subscription>#messages` array. Set `<mqtt-subscription>#numberOfMessages` to the 
129 | number of messages that should be saved in `<mqtt-subscription>#messages`. To save every message received on the topic 
130 | set `<mqtt-subscription>#numberOfMessages` to `Infinity`. 
131 |       
132 | ## Media
133 |     
134 | * [MQTT Client Library Encyclopedia](http://www.hivemq.com/blog/mqtt-client-library-encyclopedia-mqttelements?utm_medium=social&utm_source=github-mqttjs)
135 | 
136 | ## Development
137 |  
138 | ```
139 | mkdir mqtt-wrapper && cd mqtt-wrapper 
140 | git clone https://github.com/mqttjs/mqtt-elements.git
141 | cd mqtt-elements
142 | cp debug.bowerrc .bowerrc
143 | npm install
144 | bower install
145 | grunt serve
146 | ```
147 | 
148 | 
149 | #### Bundel MQTT.js, MQEmitter and Store
150 | 
151 | ```
152 | browserify -r ./node_modules/mqtt/lib/store.js:Store -r mqtt -r MQEmitter > dist/mqtt-elements-bundle.js
153 | 
154 | ```
155 | 
156 | 


--------------------------------------------------------------------------------
/dist/setImmediate.js:
--------------------------------------------------------------------------------
  1 | (function (global, undefined) {
  2 |     "use strict";
  3 | 
  4 |     if (global.setImmediate) {
  5 |         return;
  6 |     }
  7 | 
  8 |     var nextHandle = 1; // Spec says greater than zero
  9 |     var tasksByHandle = {};
 10 |     var currentlyRunningATask = false;
 11 |     var doc = global.document;
 12 |     var setImmediate;
 13 | 
 14 |     function addFromSetImmediateArguments(args) {
 15 |         tasksByHandle[nextHandle] = partiallyApplied.apply(undefined, args);
 16 |         return nextHandle++;
 17 |     }
 18 | 
 19 |     // This function accepts the same arguments as setImmediate, but
 20 |     // returns a function that requires no arguments.
 21 |     function partiallyApplied(handler) {
 22 |         var args = [].slice.call(arguments, 1);
 23 |         return function() {
 24 |             if (typeof handler === "function") {
 25 |                 handler.apply(undefined, args);
 26 |             } else {
 27 |                 (new Function("" + handler))();
 28 |             }
 29 |         };
 30 |     }
 31 | 
 32 |     function runIfPresent(handle) {
 33 |         // From the spec: "Wait until any invocations of this algorithm started before this one have completed."
 34 |         // So if we're currently running a task, we'll need to delay this invocation.
 35 |         if (currentlyRunningATask) {
 36 |             // Delay by doing a setTimeout. setImmediate was tried instead, but in Firefox 7 it generated a
 37 |             // "too much recursion" error.
 38 |             setTimeout(partiallyApplied(runIfPresent, handle), 0);
 39 |         } else {
 40 |             var task = tasksByHandle[handle];
 41 |             if (task) {
 42 |                 currentlyRunningATask = true;
 43 |                 try {
 44 |                     task();
 45 |                 } finally {
 46 |                     clearImmediate(handle);
 47 |                     currentlyRunningATask = false;
 48 |                 }
 49 |             }
 50 |         }
 51 |     }
 52 | 
 53 |     function clearImmediate(handle) {
 54 |         delete tasksByHandle[handle];
 55 |     }
 56 | 
 57 |     function installNextTickImplementation() {
 58 |         setImmediate = function() {
 59 |             var handle = addFromSetImmediateArguments(arguments);
 60 |             process.nextTick(partiallyApplied(runIfPresent, handle));
 61 |             return handle;
 62 |         };
 63 |     }
 64 | 
 65 |     function canUsePostMessage() {
 66 |         // The test against `importScripts` prevents this implementation from being installed inside a web worker,
 67 |         // where `global.postMessage` means something completely different and can't be used for this purpose.
 68 |         if (global.postMessage && !global.importScripts) {
 69 |             var postMessageIsAsynchronous = true;
 70 |             var oldOnMessage = global.onmessage;
 71 |             global.onmessage = function() {
 72 |                 postMessageIsAsynchronous = false;
 73 |             };
 74 |             global.postMessage("", "*");
 75 |             global.onmessage = oldOnMessage;
 76 |             return postMessageIsAsynchronous;
 77 |         }
 78 |     }
 79 | 
 80 |     function installPostMessageImplementation() {
 81 |         // Installs an event handler on `global` for the `message` event: see
 82 |         // * https://developer.mozilla.org/en/DOM/window.postMessage
 83 |         // * http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
 84 | 
 85 |         var messagePrefix = "setImmediate$" + Math.random() + "$";
 86 |         var onGlobalMessage = function(event) {
 87 |             if (event.source === global &&
 88 |                 typeof event.data === "string" &&
 89 |                 event.data.indexOf(messagePrefix) === 0) {
 90 |                 runIfPresent(+event.data.slice(messagePrefix.length));
 91 |             }
 92 |         };
 93 | 
 94 |         if (global.addEventListener) {
 95 |             global.addEventListener("message", onGlobalMessage, false);
 96 |         } else {
 97 |             global.attachEvent("onmessage", onGlobalMessage);
 98 |         }
 99 | 
100 |         setImmediate = function() {
101 |             var handle = addFromSetImmediateArguments(arguments);
102 |             global.postMessage(messagePrefix + handle, "*");
103 |             return handle;
104 |         };
105 |     }
106 | 
107 |     function installMessageChannelImplementation() {
108 |         var channel = new MessageChannel();
109 |         channel.port1.onmessage = function(event) {
110 |             var handle = event.data;
111 |             runIfPresent(handle);
112 |         };
113 | 
114 |         setImmediate = function() {
115 |             var handle = addFromSetImmediateArguments(arguments);
116 |             channel.port2.postMessage(handle);
117 |             return handle;
118 |         };
119 |     }
120 | 
121 |     function installReadyStateChangeImplementation() {
122 |         var html = doc.documentElement;
123 |         setImmediate = function() {
124 |             var handle = addFromSetImmediateArguments(arguments);
125 |             // Create a <script> element; its readystatechange event will be fired asynchronously once it is inserted
126 |             // into the document. Do so, thus queuing up the task. Remember to clean up once it's been called.
127 |             var script = doc.createElement("script");
128 |             script.onreadystatechange = function () {
129 |                 runIfPresent(handle);
130 |                 script.onreadystatechange = null;
131 |                 html.removeChild(script);
132 |                 script = null;
133 |             };
134 |             html.appendChild(script);
135 |             return handle;
136 |         };
137 |     }
138 | 
139 |     function installSetTimeoutImplementation() {
140 |         setImmediate = function() {
141 |             var handle = addFromSetImmediateArguments(arguments);
142 |             setTimeout(partiallyApplied(runIfPresent, handle), 0);
143 |             return handle;
144 |         };
145 |     }
146 | 
147 |     // If supported, we should attach to the prototype of global, since that is where setTimeout et al. live.
148 |     var attachTo = Object.getPrototypeOf && Object.getPrototypeOf(global);
149 |     attachTo = attachTo && attachTo.setTimeout ? attachTo : global;
150 | 
151 |     // Don't get fooled by e.g. browserify environments.
152 |     if ({}.toString.call(global.process) === "[object process]") {
153 |         // For Node.js before 0.9
154 |         installNextTickImplementation();
155 | 
156 |     } else if (canUsePostMessage()) {
157 |         // For non-IE10 modern browsers
158 |         installPostMessageImplementation();
159 | 
160 |     } else if (global.MessageChannel) {
161 |         // For web workers, where supported
162 |         installMessageChannelImplementation();
163 | 
164 |     } else if (doc && "onreadystatechange" in doc.createElement("script")) {
165 |         // For IE 6–8
166 |         installReadyStateChangeImplementation();
167 | 
168 |     } else {
169 |         // For older browsers
170 |         installSetTimeoutImplementation();
171 |     }
172 | 
173 |     attachTo.setImmediate = setImmediate;
174 |     attachTo.clearImmediate = clearImmediate;
175 | }(new Function("return this")()));


--------------------------------------------------------------------------------
/mqtt-subscription.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="mqtt-subscription-regestration-behaviour.html">
  3 | 
  4 | 
  5 | <!--
  6 | The mqtt-subscription element
  7 | 
  8 | creates a MQTT subscription to a MQTT topic. Place the element within a mqtt-connection to create the binding between
  9 | the connection and the subscription. The following example
 10 | 
 11 |     <mqtt-connection >
 12 |         <mqtt-subscription
 13 |             topic="foo/bar"
 14 |             number-of-messages="Infinity"
 15 |             last-message="{{lastMessage}}"
 16 |             messages="{{messages}}"
 17 |             subscribed="{{subscribed}}"></mqtt-subscription>
 18 |     </mqtt-connection>
 19 | 
 20 | 
 21 | creates a subscription to the topic "foo/bar" and stores all received messages within `messages`. The last messages will
 22 | be bound to `lastMessage`. `subscribed` indicates whether the subscription is subscribed or not.
 23 | 
 24 | @demo demo/index.html
 25 | -->
 26 | 
 27 | <dom-module id="mqtt-subscription">
 28 |   <template>
 29 |   </template>
 30 | </dom-module>
 31 | 
 32 | <script>
 33 |   'use strict';
 34 | 
 35 |   (function (scope) {
 36 | 
 37 |     var MqttElements = scope.MqttElements = scope.MqttElements || {};
 38 | 
 39 |     MqttElements.MqttSubscription = Polymer({
 40 |       is: 'mqtt-subscription',
 41 | 
 42 |       /**
 43 |        * Fired when a subscription is subscribed .
 44 |        *
 45 |        * @event mqtt-subscription-subscribed
 46 |        * @param {{
 47 |      *   topic: string,
 48 |      *   qos: number
 49 |      * }}
 50 |        */
 51 | 
 52 |       /**
 53 |        * Fired when a subscription is unsubscribed .
 54 |        *
 55 |        * @event mqtt-subscription-unsubscribed
 56 |        * @param {{
 57 |      *   topic: string,
 58 |      *   qos: number
 59 |      * }}
 60 |        */
 61 | 
 62 |       /**
 63 |        * Fired when a message is receive for this subscription.
 64 |        *
 65 |        * @event mqtt-subscription-message
 66 |        * @param {{
 67 |      *   topic:  string,
 68 |      *   message: Object
 69 |      *   qos: number,
 70 |      *   retained: boolean,
 71 |      *   dub: boolean
 72 |      * }}
 73 |        */
 74 | 
 75 |       properties: {
 76 | 
 77 | 
 78 |         /**
 79 |          * Will be set to the last message received.
 80 |          * @type Object
 81 |          */
 82 |         lastMessage: {
 83 |           type: Object,
 84 |           readOnly: true,
 85 |           notify: true,
 86 |         },
 87 | 
 88 |         /**
 89 |          * An array of messages of the `numberOfMessages` number of messages received
 90 |          * @type Array
 91 |          */
 92 |         messages: {
 93 |           type: Array,
 94 |           readOnly: true,
 95 |           notify: true,
 96 |           value: function () {
 97 |             return [];
 98 |           }
 99 |         },
100 | 
101 |         /**
102 |          * The number of messages that are sored in `messages` use `<mqtt-subscription number-of-messages="Infinity">` to
103 |          * store every message.
104 |          * @type Number [1..Infinity]
105 |          */
106 |         numberOfMessages: {
107 |           type: Number,
108 |           value: 1,
109 |           observer: '_numberOfMessagesChanged'
110 |         },
111 | 
112 |         /**
113 |          * The payload of the mqtt.message is an `Uint8Array`. If the payload is an String use `String` otherwise use
114 |          * `Custom` as `payloadType` and provide a custom `payloadParseFunction`. If the subscription is generic use
115 |          * `Unknown` and the payload will not be parsed.
116 |          */
117 |         payloadType: {
118 |           type: String,
119 |           value: "String",
120 |           observer: "_payloadTypeChanged"
121 |         },
122 | 
123 |         /**
124 |          * The qos the subscription is made to
125 |          * @type Number
126 |          */
127 |         qos: {
128 |           type: Number,
129 |           value: 0,
130 |         },
131 | 
132 |         /**
133 |          * Indicating that the subscription is successfully subscribed with the mqtt broker
134 |          */
135 |         subscribed: {
136 |           type: Boolean,
137 |           readOnly: true,
138 |           notify: true,
139 |           value: false,
140 |         },
141 | 
142 |         /**
143 |          * The
144 |          * @type String
145 |          */
146 |         topic: {
147 |           type: String,
148 |         },
149 | 
150 |         /**
151 |          * The function that is used to parse the message payload
152 |          * @type Function
153 |          */
154 |         payloadParseFunction: {
155 |           type: Function,
156 |           value: String.fromCharCode,
157 |         },
158 | 
159 |         /**
160 |          * A private function to signal the subscription that it is subscribed
161 |          * @private
162 |          */
163 |         _handelSubscriptionSubscribedFunc: {
164 |           type: Function,
165 |           readOnly: true,
166 |           value: function () {
167 |             return this._handelSubscriptionSubscribed.bind(this);
168 |           }
169 |         },
170 | 
171 |         /**
172 |          * A private function to handel a message
173 |          * @private
174 |          */
175 |         _handelMessageFunc: {
176 |           type: Function,
177 |           readOnly: true,
178 |           value: function () {
179 |             return this._handelMessage.bind(this);
180 |           }
181 |         }
182 |       },
183 | 
184 |       behaviors: [MqttElements.MqttSubscriptionRegestrationBehaviour],
185 | 
186 | 
187 |       /**
188 |        * A change listener for `numberOfMessages` to validate the input
189 |        * @param numberOfMessages
190 |        * @param old
191 |        * @private
192 |        */
193 |       _numberOfMessagesChanged: function (numberOfMessages, old) {
194 |         if(numberOfMessages <= 0) {
195 |           console.error("numberOfMessages must be higher than 0, setting back to 1");
196 |           this.numberOfMessages = 1;
197 |         }
198 |       },
199 | 
200 |       /**
201 |        * A private function to set the right `payloadParseFunction` after the `payloadType` changed
202 |        * @param payloadType
203 |        * @param old
204 |        * @private
205 |        */
206 |       _payloadTypeChanged: function (payloadType, old) {
207 |         switch (payloadType) {
208 |           case "Custom":
209 |             // don't do anything user has to supply a payloadParseFunction
210 |             break;
211 |           case "Unknown":
212 |             this.payloadParseFunction = function () {
213 |             };
214 |             break;
215 |           case "String":
216 |             this.payloadParseFunction = String.fromCharCode;
217 |             break;
218 |           default:
219 |             this.payloadParseFunction = String.fromCharCode;
220 |         }
221 |       },
222 | 
223 |       /**
224 |        * Will be called from the `mqtt-connection` via this._handelSubscriptionSubscribedFunc with the correct this bound
225 |        * and fires a the `mqtt-subscription-subscribed` event
226 |        * @private
227 |        */
228 |       _handelSubscriptionSubscribed: function () {
229 |         this._setSubscribedAndFire(true, "mqtt-subscription-subscribed");
230 |       },
231 | 
232 |       /**
233 |        * Will be called from the `mqtt-connection` when the subscription is not subscribed any more for e.g. if the
234 |        * connection is disconnected of the subscription is removed intentionally abd fires the
235 |        * `mqtt-subscription-unsubscribed` event
236 |        * @private
237 |        */
238 |       _handelSubscriptionUnsubscribed: function () {
239 |         this._setSubscribedAndFire(false, "mqtt-subscription-unsubscribed");
240 |       },
241 | 
242 |       _setSubscribedAndFire: function (state, message) {
243 |         this._setSubscribed(state);
244 |         this.fire(message, {topic: this.topic, qos: this.qos});
245 |       },
246 | 
247 |       /**
248 |        * A little helper function to parse the `Uint8Array` of the message.payload
249 |        *
250 |        * @param message
251 |        * @returns {*|{type, value}|string}
252 |        * @private
253 |        */
254 |       _parseMessage: function (message) {
255 |         return this.payloadParseFunction.apply(null, message.message.payload);
256 |       },
257 | 
258 |       /**
259 |        * Stores the message within `this.lastMessage` and `this.messages`
260 |        * @param message the mqtt message
261 |        * @private
262 |        */
263 |       _storeMessage: function (message) {
264 |         message.parsedPayload = this._parseMessage(message);
265 | 
266 |         if(this.messages.length >= this.numberOfMessages) {
267 |           this.shift("messages");
268 |         }
269 |         this.push("messages", message);
270 | 
271 |         //noinspection JSUnresolvedFunction
272 |         this._setLastMessage(message);
273 | 
274 |         this.fire("mqtt-subscription-message", message);
275 |       },
276 | 
277 |       /**
278 |        * Will be called from the `mqtt-connection` via this._handelMessageFunc with the correct this bound
279 |        * @param message the mqtt message
280 |        * @param cb a function to signal mqtt.js that the message was handled
281 |        * @private
282 |        */
283 |       _handelMessage: function (message, cb) {
284 |         this._storeMessage(message);
285 |         this._parentConnection._notifySubscriptionChanged(this);
286 |         if(cb) {
287 |           cb();
288 |         }
289 |       }
290 |     })
291 |   })(window);
292 | </script>
293 | 


--------------------------------------------------------------------------------
/demo/elements/demo-element.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../../polymer/polymer.html">
  2 | <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
  3 | <link rel="import" href="../../../paper-styles/shadow.html">
  4 | <link rel="import" href="../../../paper-styles/typography.html">
  5 | <link rel="import" href="../../../paper-styles/demo-pages.html">
  6 | <link rel="import" href="../../../paper-slider/paper-slider.html">
  7 | <link rel="import" href="../../../iron-icons/iron-icons.html">
  8 | <link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
  9 | <link rel="import" href="../../../paper-tooltip/paper-tooltip.html">
 10 | <link rel="import" href="../../mqtt-elements.html">
 11 | 
 12 | <dom-module id="demo-element">
 13 | 
 14 |   <link rel="import" type="css" href="demo.css">
 15 | 
 16 |   <template>
 17 | 
 18 |     <!--create mqtt-connection element-->
 19 |     <mqtt-connection
 20 |         id="connection"
 21 |         url="[[url]]"
 22 |         connected="{{connected}}"
 23 |         client="{{client}}"
 24 |         subscriptions="{{subscriptions}}"
 25 |         options='{{options}}'
 26 |         on-mqtt-message="_handelMqttMessage">
 27 | 
 28 |       <!--create a mqtt subscription for every item in topics-->
 29 |       <template is="dom-repeat" items="{{topics}}" as="t">
 30 |         <mqtt-subscription topic="[[t.topic]]"
 31 |                            number-of-messages="10"
 32 |                            qos="[[t.qos]]"></mqtt-subscription>
 33 |       </template>
 34 | 
 35 |       <!--create mqtt-publish element to publish mqtt messages to the broker -->
 36 |       <mqtt-publish id="pub"
 37 |                     topic="[[topic]]"
 38 |                     payload="[[value]]"
 39 |                     auto$="[[pubAuto]]"
 40 |                     qos="[[pubQos]]"
 41 |                     retained="[[pubRetained]]"></mqtt-publish>
 42 |     </mqtt-connection>
 43 | 
 44 |     <div class="layout wrap center-center">
 45 | 
 46 |       <!--section to configure the mqtt-connection-->
 47 |       <div class="vertical-section">
 48 |         <div class="sub-header">
 49 |           <h1 class="title">&lt;mqtt-connection&gt;</h1>
 50 |           <div class="status">
 51 |             <h3>Status:</h3>
 52 |             <span id="status" class$="[[_connectionStatusToString(connected)]]"></span>
 53 |             <paper-tooltip for="status">[[_connectionStatusToString(connected)]]</paper-tooltip>
 54 |           </div>
 55 |         </div>
 56 |         <!--bind url and port for the mqtt-broker url-->
 57 |         <paper-input label="MQTT-Broker URL" value="{{url}}"></paper-input>
 58 |         <!--<paper-input label="MQTT-Broker Port" value="{{port}}"></paper-input>-->
 59 |         <div class="horizontal-section-container-end">
 60 |           <!--buttons to connect or disconnect the connection-->
 61 |           <paper-button raised on-tap="connect">connect</paper-button>
 62 |           <paper-button raised on-tap="disconnect">disconnect</paper-button>
 63 |           <paper-icon-button on-tap="_showOptions"
 64 |                              icon="icons:settings"
 65 |                              alt="show options"
 66 |                              title="show options"></paper-icon-button>
 67 |         </div>
 68 |         <div hidden$="{{!showOptions}}" class="horizontal-section-container settings">
 69 |           <h3>Credentials</h3>
 70 |           <paper-input label="username" value="{{username}}"></paper-input>
 71 |           <paper-input label="password" value="{{password}}"></paper-input>
 72 |           <h3>Client ID</h3>
 73 |           <paper-input label="Client ID" value="{{clientId}}"></paper-input>
 74 |         </div>
 75 |       </div>
 76 | 
 77 |       <div class="vertical-section">
 78 |         <h3>Add Subscription</h3>
 79 |         <paper-input label="topic" value="{{newSubTopic}}"></paper-input>
 80 |         <div class="horizontal-section-container-end">
 81 |           <div>QoS</div>
 82 |           <paper-slider pin snaps value="{{subQos}}" step="1" min="0" max="2"></paper-slider>
 83 |           <paper-button raised on-tap="_addSub">Add Subscription</paper-button>
 84 |         </div>
 85 |       </div>
 86 | 
 87 |       <!-- section to publish messages-->
 88 |       <div class="vertical-section">
 89 |         <h3>Publish on <span>[[topic]]</span></h3>
 90 |         <!--publish topic and payload-->
 91 |         <paper-input label="topic" value="{{topic}}"></paper-input>
 92 |         <paper-input label="Payload" char-counter value="{{value}}"></paper-input>
 93 | 
 94 |         <div class="horizontal-section-container-end">
 95 |           <!--publish qos-->
 96 |           <div class="center horizontal layout">
 97 |             <div>QoS</div>
 98 |             <paper-slider pin snaps value="{{pubQos}}" step="1" min="0" max="2"></paper-slider>
 99 |           </div>
100 |           <!--publish auto-->
101 |           <div class="line">
102 |             <paper-toggle-button checked="{{pubAuto}}"></paper-toggle-button>
103 |             <span>Auto publish?</span>
104 |             <paper-tooltip>Every time the input is changed a mqtt-message is send.</paper-tooltip>
105 |           </div>
106 |           <!--publish retain-->
107 |           <div class="line">
108 |             <paper-toggle-button checked="{{pubRetained}}"></paper-toggle-button>
109 |             <span>Retain</span>
110 |           </div>
111 |           <paper-button raised on-tap="_sendMessage">Send Message</paper-button>
112 |         </div>
113 |       </div>
114 | 
115 |       <!--output every subscription-->
116 |       <template id="subscriptionList" is="dom-repeat" items="[[subscriptions]]" as="sub" observe="messages.*">
117 |         <div class="vertical-section">
118 |           <div>
119 |             <div class="sub-header">
120 |               <h2 class="title">Subscribed to - <span>[[sub.topic]]</span></h2>
121 |               <h3 class="qos">QoS: <span>[[sub.qos]]</span></h3>
122 |               <paper-icon-button on-tap="_removeSubscription"
123 |                                  icon="icons:delete"
124 |                                  alt="remove"
125 |                                  title="remove subscription"></paper-icon-button>
126 |             </div>
127 |             <table>
128 |               <thead>
129 |               <tr>
130 |                 <th colspan="3">Messages</th>
131 |               </tr>
132 |               <tr>
133 |                 <th>Topic</th>
134 |                 <th>QoS</th>
135 |                 <th class="full">Payload</th>
136 |               </tr>
137 |               </thead>
138 |               <tbody>
139 |               <template is="dom-repeat" items="{{sub.messages}}" as="message">
140 |                 <tr>
141 |                   <td>{{message.topic}}</td>
142 |                   <td>{{message.message.qos}}</td>
143 |                   <td class="full">{{message.parsedPayload}}</td>
144 |                 </tr>
145 |               </template>
146 |               </tbody>
147 |             </table>
148 |           </div>
149 |         </div>
150 |       </template>
151 |     </div>
152 |   </template>
153 | 
154 |   <script>
155 | 
156 |     Polymer({
157 | 
158 |       is: 'demo-element',
159 | 
160 |       properties: {
161 |         showOptions: {
162 |           type: Boolean,
163 |           value: false,
164 |         },
165 | 
166 |         url: {
167 |           type: String,
168 |           value: "ws://test.mosca.io:80",
169 |         },
170 | 
171 |         topic: {
172 |           type: String,
173 |           value: "foo/bar",
174 |         },
175 | 
176 |         messages: {
177 |           type: Array,
178 |           value: [],
179 |         },
180 | 
181 |         topics: {
182 |           type: Array,
183 |           value: function () {
184 |             return [];
185 |           },
186 |         },
187 | 
188 |         options: {
189 |           type: Object,
190 |           computed: "_computeOptions(username, password, clientId)",
191 |         },
192 | 
193 |         username: {
194 |           type: String,
195 |         },
196 | 
197 |         password: {
198 |           type: String,
199 |         },
200 | 
201 |         clientId: {
202 |           type: String,
203 |         }
204 |       },
205 | 
206 |       observers: [],
207 | 
208 |       _computeOptions: function (username, password, clientId) {
209 |         var _options = {
210 |           protocolId: "MQTT",
211 |           protocolVersion: 4,
212 |           keepalive: 10,
213 |           reconnectPeriod: 1000,
214 |           clientId: "",
215 |           encoding: "string",
216 |         };
217 | 
218 |         if(username && username.length > 0 && password && password.length > 0) {
219 |           _options.username = username;
220 |           _options.password = password;
221 |         }
222 | 
223 |         if(clientId && clientId.length > 0){
224 |           _options.clientId = clientId;
225 |         }
226 | 
227 |         return _options;
228 |       },
229 | 
230 |       _showOptions: function () {
231 |         this.showOptions = !this.showOptions;
232 |       },
233 | 
234 |       _sendMessage: function (event) {
235 |         this.$.pub.publish();
236 |       },
237 | 
238 |       _addSub: function () {
239 |         if(this.newSubTopic.length > 0) {
240 |           this.push("topics", {topic: this.newSubTopic, qos: this.subQos});
241 |         }
242 |       },
243 | 
244 |       _handelMqttMessage: function (event, message) {
245 |         if(message && message.topic) {
246 |           this.push('messages', {
247 |             topic: message.topic,
248 |             message: String.fromCharCode.apply(null, message.message)
249 |           });
250 |         }
251 |       },
252 | 
253 |       disconnect: function () {
254 |         this.$.connection.disconnect();
255 |       },
256 | 
257 |       connect: function () {
258 |         this.$.connection.connect();
259 |       },
260 | 
261 |       _connectionStatusToString: function (status) {
262 |         if(status) {
263 |           return "connected";
264 |         } else {
265 |           return "disconnected";
266 |         }
267 |       },
268 | 
269 |       _removeSubscription: function (event) {
270 |         // using the index of the subscriptions array only works because we have not changed the order of the
271 |         // subscriptions. Otherwise it would be nessesary to have some sort of ID for each subscription to easily map
272 |         // the subscription to the model.
273 |         var index = this.subscriptions.indexOf(event.model.sub)
274 |         this.splice("topics", index, 1);
275 |       },
276 | 
277 |     });
278 | 
279 |   </script>
280 | 
281 | </dom-module>
282 | 
283 | 
284 | 
285 | 
286 | 


--------------------------------------------------------------------------------
/test/mqtt-elements-full-stack.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | <head>
  4 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  5 |   <title>mqtt-subscription-spec</title>
  6 | 
  7 |   <script src="../../webcomponentsjs/webcomponents.min.js"></script>
  8 |   <script src="../../web-component-tester/browser.js"></script>
  9 |   <script src="../../test-fixture/test-fixture-mocha.js"></script>
 10 | 
 11 |   <link rel="import" href="../../polymer/polymer.html">
 12 |   <link rel="import" href="../../promise-polyfill/promise-polyfill-lite.html">
 13 |   <link rel="import" href="../../test-fixture/test-fixture.html">
 14 | 
 15 |   <!-- Step 1: import the element to test -->
 16 |   <link rel="import" href="../mqtt-elements.html">
 17 | 
 18 | </head>
 19 | <body>
 20 | 
 21 | <test-fixture id="MqttConnection">
 22 |   <template>
 23 |     <mqtt-connection url="ws://localhost:3005">
 24 |     </mqtt-connection>
 25 |   </template>
 26 | </test-fixture>
 27 | 
 28 | <test-fixture id="MqttConnectionWithSubscription">
 29 |   <template>
 30 |     <mqtt-connection url="ws://localhost:3005">
 31 |       <mqtt-subscription topic="foo/bar" qos="0"></mqtt-subscription>
 32 |     </mqtt-connection>
 33 |   </template>
 34 | </test-fixture>
 35 | 
 36 | <test-fixture id="MqttConnectionWithSubscriptionQos1">
 37 |   <template>
 38 |     <mqtt-connection url="ws://localhost:3005">
 39 |       <mqtt-subscription topic="foo/bar" qos="1"></mqtt-subscription>
 40 |     </mqtt-connection>
 41 |   </template>
 42 | </test-fixture>
 43 | 
 44 | <test-fixture id="MqttConnectionWithPublish">
 45 |   <template>
 46 |     <mqtt-connection url="ws://localhost:3005">
 47 |       <mqtt-subscription topic="foo/bar/retained"></mqtt-subscription>
 48 |       <mqtt-publish auto topic="foo/bar/retained" payload="mqtt-elements" retained></mqtt-publish>
 49 |     </mqtt-connection>
 50 |   </template>
 51 | </test-fixture>
 52 | 
 53 | <test-fixture id="MqttConnectionWithPublishAuto">
 54 |   <template>
 55 |     <mqtt-connection url="ws://localhost:3005" auto>
 56 |       <mqtt-publish auto topic="foo/bar" payload="mqtt-elements"></mqtt-publish>
 57 |     </mqtt-connection>
 58 |   </template>
 59 | </test-fixture>
 60 | 
 61 | <test-fixture id="MqttConnectionSubscriptionToStore10Messages">
 62 |   <template>
 63 |     <mqtt-connection url="ws://localhost:3005" auto>
 64 |       <mqtt-subscription topic="foo/bar/multi" number-of-messages="15"></mqtt-subscription>
 65 |       <mqtt-publish auto topic="foo/bar/multi"></mqtt-publish>
 66 |     </mqtt-connection>
 67 |   </template>
 68 | </test-fixture>
 69 | 
 70 | <script>
 71 |   //  Setp 2: get the element
 72 |   var mqttConnection;
 73 | 
 74 |   suite('<mqtt-elements>', function () {
 75 |     suite('<mqtt-connection>', function () {
 76 |       setup(function () {
 77 |         mqttConnection = fixture('MqttConnection');
 78 |       });
 79 | 
 80 |       test('calling connect establishes a connection to the broker and fires mqtt-connection-connected event with ' +
 81 |           'status connected', function (done) {
 82 |         mqttConnection.addEventListener("mqtt-connection-connected", function (event) {
 83 |           expect(event.detail.value).to.be.true;
 84 |           done();
 85 |         });
 86 | 
 87 |         mqttConnection.connect();
 88 |       });
 89 | 
 90 |       test('calling connect establishes a connection to the broker and fires mqtt-connection-connected event with ' +
 91 |           'status connected after that calling disconnect fires  ', function (done) {
 92 | 
 93 |         mqttConnection.addEventListener("mqtt-connection-connected", function (event) {
 94 | 
 95 |           expect(event.detail.value).to.be.true;
 96 | 
 97 |           mqttConnection.addEventListener("mqtt-connection-close", function (closeEvent) {
 98 |             done();
 99 |           });
100 | 
101 |           mqttConnection.disconnect();
102 |         });
103 | 
104 |         mqttConnection.connect();
105 |       });
106 | 
107 |     });
108 | 
109 | 
110 |     suite('<mqtt-subscription>', function () {
111 |       var sub;
112 |       setup(function () {
113 |         mqttConnection = fixture('MqttConnectionWithSubscription');
114 |         sub = mqttConnection.querySelector("mqtt-subscription");
115 |       });
116 | 
117 |       test('mqtt-subscription is subscribed', function (done) {
118 |         sub.addEventListener("mqtt-subscription-subscribed", function (event) {
119 |           expect(event.detail.topic).to.equal("foo/bar");
120 |           expect(event.detail.qos).to.equal(0);
121 |           expect(event.type).to.equal("mqtt-subscription-subscribed");
122 |           done();
123 |         });
124 |         mqttConnection.connect();
125 |       });
126 | 
127 |       test('mqtt-subscription is subscribed', function (done) {
128 |         sub.addEventListener("mqtt-subscription-subscribed", function (event) {
129 |           expect(event.detail.topic).to.equal("foo/bar");
130 |           expect(event.detail.qos).to.equal(0);
131 |           expect(event.type).to.equal("mqtt-subscription-subscribed");
132 |           sub.addEventListener("mqtt-subscription-unsubscribed", function (remEvent) {
133 |             done();
134 |           });
135 | 
136 |           sub.remove();
137 |         });
138 |         mqttConnection.connect();
139 |       });
140 | 
141 | 
142 |       test('mqtt-subscription is subscribed', function (done) {
143 |         sub.addEventListener("mqtt-subscription-subscribed", function (event) {
144 |           expect(event.detail.topic).to.equal("foo/bar");
145 |           expect(event.detail.qos).to.equal(0);
146 |           expect(event.type).to.equal("mqtt-subscription-subscribed");
147 |           sub.addEventListener("last-message-changed", function (lastMessage) {
148 |             expect(lastMessage.detail.value.topic).to.equal("foo/bar");
149 |             expect(lastMessage.detail.value.parsedPayload).to.equal("mqtt-elements");
150 |             expect(sub.messages.length).to.equal(1);
151 |             expect(sub.messages[0]).to.deep.equal(lastMessage.detail.value);
152 |             done();
153 |           });
154 | 
155 |           mqttConnection.publish("foo/bar", "mqtt-elements");
156 |         });
157 |         mqttConnection.connect();
158 |       });
159 | 
160 |       test('mqtt-subscription is subscribed with qos 0', function (done) {
161 |         sub.addEventListener("mqtt-subscription-subscribed", function (event) {
162 |           expect(event.detail.topic).to.equal("foo/bar");
163 |           expect(event.detail.qos).to.equal(0);
164 |           expect(event.type).to.equal("mqtt-subscription-subscribed");
165 |           sub.addEventListener("last-message-changed", function (lastMessage) {
166 |             expect(lastMessage.detail.value.topic).to.equal("foo/bar");
167 |             expect(lastMessage.detail.value.parsedPayload).to.equal("mqtt-elements");
168 |             expect(sub.messages.length).to.equal(1);
169 |             expect(sub.messages[0]).to.deep.equal(lastMessage.detail.value);
170 |             done();
171 |           });
172 | 
173 |           mqttConnection.publish("foo/bar", "mqtt-elements", 1);
174 |         });
175 |         mqttConnection.connect();
176 |       });
177 | 
178 |     });
179 | 
180 |     suite('<mqtt-subscription> qos 1', function () {
181 |       var sub;
182 |       setup(function () {
183 |         mqttConnection = fixture('MqttConnectionWithSubscriptionQos1');
184 |         sub = mqttConnection.querySelector("mqtt-subscription");
185 |       });
186 | 
187 |       test('mqtt-subscription is subscribed with qos 1', function (done) {
188 |         sub.addEventListener("mqtt-subscription-subscribed", function (event) {
189 |           expect(event.detail.topic).to.equal("foo/bar");
190 |           expect(event.detail.qos).to.equal(1);
191 |           expect(event.type).to.equal("mqtt-subscription-subscribed");
192 |           sub.addEventListener("last-message-changed", function (lastMessage) {
193 |             expect(lastMessage.detail.value.topic).to.equal("foo/bar");
194 |             expect(lastMessage.detail.value.parsedPayload).to.equal("mqtt-elements");
195 |             expect(sub.messages.length).to.equal(1);
196 |             expect(sub.messages[0]).to.deep.equal(lastMessage.detail.value);
197 |             done();
198 |           });
199 | 
200 |           mqttConnection.publish("foo/bar", "mqtt-elements", 1);
201 |         });
202 |         mqttConnection.connect();
203 |       });
204 | 
205 |       test('mqtt-subscription is subscribed with qos 1 but publish with 0', function (done) {
206 |         sub.addEventListener("mqtt-subscription-subscribed", function (event) {
207 |           expect(event.detail.topic).to.equal("foo/bar");
208 |           expect(event.detail.qos).to.equal(1);
209 |           expect(event.type).to.equal("mqtt-subscription-subscribed");
210 |           sub.addEventListener("last-message-changed", function (lastMessage) {
211 |             expect(lastMessage.detail.value.topic).to.equal("foo/bar");
212 |             expect(lastMessage.detail.value.parsedPayload).to.equal("mqtt-elements");
213 |             expect(sub.messages.length).to.equal(1);
214 |             expect(sub.messages[0]).to.deep.equal(lastMessage.detail.value);
215 |             done();
216 |           });
217 | 
218 |           mqttConnection.publish("foo/bar", "mqtt-elements", 0);
219 |         });
220 |         mqttConnection.connect();
221 |       });
222 |     });
223 | 
224 |     suite('<mqtt-subscription> <mqtt-publish>#auto & #retained ', function () {
225 |       var pub;
226 |       var sub;
227 |       setup(function () {
228 |         mqttConnection = fixture('MqttConnectionWithPublish');
229 |         pub = mqttConnection.querySelector("mqtt-publish");
230 |         sub = mqttConnection.querySelector("mqtt-subscription");
231 |       });
232 | 
233 |       test('mqtt-subscription receives mqtt message from retained publish that has been made before the connection ' +
234 |           'was connected', function (done) {
235 | 
236 |         mqttConnection.addEventListener("mqtt-message", function (event) {
237 |           expect(event.detail.topic).to.equal("foo/bar/retained");
238 |           expect(sub.subscribed).to.be.true;
239 |           expect(pub.published).to.be.true;
240 |           expect(String.fromCharCode.apply(null, event.detail.message)).to.equal("mqtt-elements");
241 |           done();
242 |         });
243 | 
244 |         mqttConnection.connect();
245 |       });
246 |     });
247 | 
248 |     suite('<mqtt-publish>#auto and <mqtt-connection>#auto', function () {
249 |       var pub;
250 |       setup(function () {
251 |         mqttConnection = fixture('MqttConnectionWithPublishAuto');
252 |         pub = mqttConnection.querySelector("mqtt-publish");
253 |       });
254 | 
255 |       test('mqtt-publish will be automatically made when the connection loads', function (done) {
256 |         pub.addEventListener("mqtt-publication-published", function (event) {
257 |           expect(event.detail.topic).to.equal("foo/bar");
258 |           expect(pub.published).to.be.true;
259 |           expect(event.detail.payload).to.equal("mqtt-elements");
260 |           done();
261 |         });
262 |       });
263 |     });
264 |     suite('<mqtt-publish>#auto and <mqtt-subscription>#numOfMessages=15', function () {
265 |       var pub;
266 |       setup(function () {
267 |         mqttConnection = fixture('MqttConnectionSubscriptionToStore10Messages');
268 |         sub = mqttConnection.querySelector("mqtt-subscription");
269 |         pub = mqttConnection.querySelector("mqtt-publish");
270 |       });
271 | 
272 |       test('<mqtt-publish> automatically publish on changes to payload and <mqtt-subscription> will store 15 messages', function (done) {
273 |         var messages = [];
274 |         var testLength = 17;
275 |         sub.addEventListener("mqtt-subscription-message", function (event) {
276 |           messages.push(event.detail);
277 |           if (messages.length >= testLength) {
278 |             expect(sub.messages.length).to.equal(15);
279 |             for (var j = 2; j < testLength; j++){
280 |               expect(messages[j]).to.equal(sub.messages[j-2]);
281 |             }
282 |             done();
283 |           }
284 |         });
285 | 
286 |         sub.addEventListener("mqtt-subscription-subscribed", function (event) {
287 |           // sending 2 more messages that will be discarded from the <mqtt-subscription>
288 |           for (var i = 0; i < testLength; i++){
289 |             pub.payload = i+"";
290 |           }
291 |         });
292 |       });
293 |     });
294 | 
295 |   });
296 | </script>
297 | 
298 | </body>
299 | </html>
300 | 


--------------------------------------------------------------------------------
/test/mqtt-connection-spec.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | <head>
  4 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  5 |   <title>mqtt-connection-basic</title>
  6 | 
  7 |   <script src="../../webcomponentsjs/webcomponents.min.js"></script>
  8 |   <script src="../../web-component-tester/browser.js"></script>
  9 |   <script src="../../test-fixture/test-fixture-mocha.js"></script>
 10 | 
 11 |   <link rel="import" href="../../polymer/polymer.html">
 12 |   <link rel="import" href="../../promise-polyfill/promise-polyfill-lite.html">
 13 |   <link rel="import" href="../../test-fixture/test-fixture.html">
 14 | 
 15 |   <!-- Step 1: import the element to test -->
 16 |   <link rel="import" href="../mqtt-elements.html">
 17 | </head>
 18 | <body>
 19 | 
 20 | <test-fixture id="AutoConnection">
 21 |   <template>
 22 |     <mqtt-connection></mqtt-connection>
 23 |   </template>
 24 | </test-fixture>
 25 | 
 26 | <test-fixture id="NoAutoConnection">
 27 |   <template>
 28 |     <mqtt-connection id="noAuto"></mqtt-connection>
 29 |   </template>
 30 | </test-fixture>
 31 | 
 32 | <test-fixture id="MaxListeners">
 33 |   <template>
 34 |     <mqtt-connection max-listeners="15"></mqtt-connection>
 35 |   </template>
 36 | </test-fixture>
 37 | 
 38 | <test-fixture id="WithCredentials">
 39 |   <template>
 40 |     <mqtt-connection auto with-credentials></mqtt-connection>
 41 |   </template>
 42 | </test-fixture>
 43 | 
 44 | <test-fixture id="WithCredentialsNoAuto">
 45 |   <template>
 46 |     <mqtt-connection with-credentials></mqtt-connection>
 47 |   </template>
 48 | </test-fixture>
 49 | 
 50 | 
 51 | <script>
 52 |   //  Setp 2: get the element
 53 |   var mqttElement;
 54 |   var mqttDisabledAuto;
 55 |   var mqttMaxListeners;
 56 |   var mqttWithCredentials;
 57 | 
 58 |   suite('<mqtt-connection>', function () {
 59 | 
 60 | 
 61 |     suite('mqtt-connection-spec', function () {
 62 |       setup(function () {
 63 |         mqttElement = fixture('AutoConnection');
 64 |       });
 65 | 
 66 |       //  Setup 3: Test the element
 67 |       test('Element is not null', function () {
 68 |         assert.isNotNull(mqttElement);
 69 |         assert.notTypeOf(mqttElement, 'undefined');
 70 |       });
 71 | 
 72 |       test('mqtt-connection.clean is boolean', function () {
 73 |         assert.isBoolean(mqttElement.clean, 'mqtt-connection.options.clean should be a number greater than 0');
 74 |         assert.isTrue(mqttElement.clean);
 75 |       });
 76 | 
 77 |       test('mqtt-connection.connected is boolean', function () {
 78 |         assert.isBoolean(mqttElement.connected, 'mqtt-connection.connected should be a boolean');
 79 |         assert.isFalse(mqttElement.connected);
 80 |       });
 81 | 
 82 |       test('mqtt-connection.disconnecting is booelan and false', function () {
 83 |         assert.isBoolean(mqttElement.disconnecting, 'mqtt-connection.disconnecting should be a boolean');
 84 |         assert.isFalse(mqttElement.disconnecting);
 85 |       });
 86 | 
 87 |       test('mqtt-connection.auto is boolean and false', function () {
 88 |         assert.isBoolean(mqttElement.auto, 'mqtt-connection.auto should be a boolean');
 89 |         assert.isFalse(mqttElement.auto);
 90 |       });
 91 | 
 92 |       test('mqtt-connection.auto is false', function () {
 93 |         assert.isBoolean(mqttElement.auto, 'mqtt-connection.auto should be a boolean');
 94 |         assert.isFalse(mqttElement.auto);
 95 |         mqttElement.auto = true;
 96 |         assert.isTrue(mqttElement.auto);
 97 |       });
 98 | 
 99 |       test('mqtt-connection.clientIdPrefix is String', function () {
100 |         assert.typeOf(mqttElement.clientIdPrefix, 'string', 'mqtt-connection.clientIdPrefix should be a String');
101 |         assert.strictEqual(mqttElement.clientIdPrefix, 'mqttjs_', 'On a new instance of <mqtt-connection> the clientIdPrefix should be mqttjs_');
102 |       });
103 | 
104 |       test('mqtt-connection.options.protocolId is a String', function () {
105 |         assert.typeOf(mqttElement.options.protocolId, 'string', 'mqtt-connection.options.protocolId should be a String');
106 |         assert.strictEqual(mqttElement.options.protocolId, 'MQTT', 'On a new instance of <mqtt-connection> the protocolId should be MQIsdp');
107 |       });
108 | 
109 |       test('mqtt-connection.options.protocolVersion is a number', function () {
110 |         assert.isNumber(mqttElement.options.protocolVersion, 'mqtt-connection.options.protocolVersion should be a number greater than 0');
111 |         assert.strictEqual(mqttElement.options.protocolVersion, 4, 'On a new instance of <mqtt-connection> the protocolVersion should be 4');
112 |       });
113 | 
114 |       test('mqtt-connection.options.reconnectPeriod is a number', function () {
115 |         assert.isNumber(mqttElement.options.reconnectPeriod, 'mqtt-connection.options.reconnectPeriod should be a number greater than 0');
116 |         assert.strictEqual(mqttElement.options.reconnectPeriod, 1000, 'On a new instance of <mqtt-connection> the reconnectPeriod should be 4');
117 |       });
118 | 
119 |       test('mqtt-connection.options.keepalive is a number', function () {
120 |         assert.isNumber(mqttElement.options.keepalive, 'mqtt-connection.options.keepalive should be a number greater than 0');
121 |         assert.strictEqual(mqttElement.options.keepalive, 120);
122 |       });
123 | 
124 |       test('mqtt-connection.options.clientId should be a String', function () {
125 |         assert.typeOf(mqttElement.options.clientId, 'string', 'mqtt-connection.options.clientId should be a string');
126 |       });
127 | 
128 |       test('mqtt-connection.options.will should be undefined', function () {
129 |         assert.typeOf(mqttElement.options.will, 'undefined', 'mqtt-connection.options.will should be a undefined on a new instance of <mqtt-connection>');
130 |       });
131 | 
132 |       test('mqtt-connection.options.encoding is a String', function () {
133 |         assert.typeOf(mqttElement.options.encoding, 'string', 'mqtt-connection.options.encoding should be a string');
134 |       });
135 | 
136 |       test('mqtt-connection.options.username should be undefined', function () {
137 |         assert.typeOf(mqttElement.options.username, 'undefined', 'mqtt-connection.options.username should be undefined');
138 |       });
139 | 
140 |       test('mqtt-connection.username should be undefined', function () {
141 |         assert.typeOf(mqttElement.username, 'undefined', 'mqtt-connection.options.username should be undefined');
142 |       });
143 | 
144 |       test('setting mqtt-connection.username should be reflected to mqtt-connection.options.username', function () {
145 |         assert.typeOf(mqttElement.username, 'undefined', 'mqtt-connection.options.username should be undefined');
146 |         mqttElement.username = "mqtt";
147 |         assert.typeOf(mqttElement.username, 'string', 'mqtt-connection.options.username should be undefined');
148 |         expect(mqttElement.username).to.equal("mqtt");
149 |         expect(mqttElement.options.username).to.equal("mqtt");
150 |       });
151 | 
152 |       test('setting mqtt-connection.options.username should not be reflected to mqtt-connection.username', function () {
153 |         assert.typeOf(mqttElement.username, 'undefined', 'mqtt-connection.options.username should be undefined');
154 |         mqttElement.options.username = "mqtt";
155 |         assert.typeOf(mqttElement.options.username, 'string', 'mqtt-connection.options.username should be undefined');
156 |         assert.typeOf(mqttElement.username, 'undefined', 'mqtt-connection.options.username should be undefined');
157 |         expect(mqttElement.options.username).to.equal("mqtt");
158 |       });
159 | 
160 |       test('mqtt-connection.options.password should be undefined', function () {
161 |         assert.typeOf(mqttElement.options.password, 'undefined', 'mqtt-connection.options.password should be undefined');
162 |       });
163 | 
164 |       test('mqtt-connection.password should be undefined', function () {
165 |         assert.typeOf(mqttElement.password, 'undefined', 'mqtt-connection.options.password should be undefined');
166 |       });
167 | 
168 | 
169 |       test('setting mqtt-connection.password should be reflected to mqtt-connection.options.password', function () {
170 |         assert.typeOf(mqttElement.password, 'undefined', 'mqtt-connection.options.username should be undefined');
171 |         mqttElement.password = ".js";
172 |         assert.typeOf(mqttElement.password, 'string', 'mqtt-connection.options.username should be undefined');
173 |         expect(mqttElement.password).to.equal(".js");
174 |         expect(mqttElement.options.password).to.equal(".js");
175 |       });
176 | 
177 |       test('setting mqtt-connection.options.password should not be reflected to mqtt-connection.password', function () {
178 |         assert.typeOf(mqttElement.password, 'undefined', 'mqtt-connection.options.username should be undefined');
179 |         mqttElement.options.password = ".js";
180 |         assert.typeOf(mqttElement.options.password, 'string', 'mqtt-connection.options.username should be undefined');
181 |         expect(mqttElement.options.password).to.equal(".js");
182 |         assert.typeOf(mqttElement.password, 'undefined', 'mqtt-connection.options.password should be undefined');
183 |       });
184 | 
185 |       test('mqtt-connection.withCredentials is boolean and false by default', function () {
186 |         expect(mqttElement.withCredentials).to.be.a("boolean");
187 |         expect(mqttElement.withCredentials).to.be.false;
188 |       });
189 | 
190 |       test('mqtt-connection.url is a String', function () {
191 |         assert.typeOf(mqttElement.url, 'string', 'mqtt-connection.url should be a string');
192 |       });
193 |     });
194 | 
195 |     suite('mqtt-conntection-no-auto-spec', function () {
196 |       setup(function () {
197 |         mqttDisabledAuto = fixture('NoAutoConnection');
198 |       });
199 | 
200 |       test('mqtt-connection#auto.auto is boolean', function () {
201 |         assert.isBoolean(mqttDisabledAuto.auto, 'mqtt-connection.auto should be a boolean');
202 |         assert.isFalse(mqttDisabledAuto.auto);
203 |       });
204 |     });
205 | 
206 |     suite('mqtt-conntection-with-increased-max-listeners', function () {
207 |       setup(function () {
208 |         mqttMaxListeners = fixture('MaxListeners');
209 |       });
210 | 
211 |       test('mqtt-connection#maxListeners is number', function () {
212 |         assert.isNumber(mqttMaxListeners.maxListeners, 'mqtt-connection.maxListeners should be a number');
213 |         assert.strictEqual(mqttMaxListeners.maxListeners, 15);
214 |         mqttMaxListeners.maxListeners = 30;
215 |         assert.strictEqual(mqttMaxListeners.maxListeners, 30);
216 |       });
217 |     });
218 | 
219 |     suite('mqtt-conntection-withCredentials', function () {
220 |       setup(function () {
221 |         mqttWithCredentials = fixture('WithCredentials');
222 |       });
223 | 
224 |       test('mqtt-connection with with-credentials and auto will wait with connect until ' +
225 |           '( mqtt-connection.username || mqtt-connection.options.username ) &&' +
226 |           ' ( mqtt-connection.password || mqtt-connection.options.password ) is set', function () {
227 |         expect(mqttWithCredentials.client).to.be.undefined;
228 |         mqttWithCredentials.username = "mqtt";
229 |         expect(mqttWithCredentials.client).to.be.undefined;
230 |         mqttWithCredentials.password = ".js";
231 |         expect(mqttWithCredentials.client).to.be.an("object");
232 |       });
233 |     });
234 | 
235 |     suite('mqtt-conntection-withCredentials and noAuto', function () {
236 |       setup(function () {
237 |         mqttWithCredentials = fixture('WithCredentialsNoAuto');
238 |       });
239 | 
240 |       test('mqtt-connection with with-credentials and no auto will wait with connect until ' +
241 |           '( mqtt-connection.username || mqtt-connection.options.username ) &&' +
242 |           ' ( mqtt-connection.password || mqtt-connection.options.password ) is set and auto is set to true', function (done) {
243 | 
244 |         mqttWithCredentials.addEventListener("mqtt-connection-offline",function(){
245 |           expect(mqttWithCredentials.client).to.be.an("object");
246 |           done();
247 |         });
248 | 
249 |         expect(mqttWithCredentials.client).to.be.undefined;
250 |         mqttWithCredentials.username = "mqtt";
251 |         expect(mqttWithCredentials.client).to.be.undefined;
252 |         mqttWithCredentials.password = ".js";
253 |         expect(mqttWithCredentials.client).to.be.undefined;
254 | 
255 |         mqttWithCredentials.auto = true;
256 | 
257 |       });
258 |     });
259 | 
260 | 
261 | 
262 | 
263 | 
264 |   });
265 | </script>
266 | 
267 | </body>
268 | </html>
269 | 


--------------------------------------------------------------------------------
/mqtt-connection.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="mqttjs.html">
  3 | 
  4 | <!--
  5 | The `<mqtt-connection>` element exposes MQTT connection functionality to the web.
  6 | Use one `<mqtt-connection>` element per connection to a mqtt broker e.g.
  7 | [mosca](http://www.mosca.io)
  8 | Currently the element supports `ws` and `wss` connections.
  9 | 
 10 |     <mqtt-connection
 11 |         url="ws://127.0.0.1:8080"
 12 |         options='{reconnectPeriod: 1000}'>
 13 |     </mqtt-connection>
 14 | 
 15 | 
 16 | With `auto` set to `true`, the element performs a MQTT.Connect whenever
 17 | the element is ready or the connection gets disconnected.
 18 | 
 19 |     <mqtt-connection auto></mqtt-connection>
 20 | 
 21 | Note: The `options` attribute must be double quoted JSON.
 22 | 
 23 | You can disconnect the mqtt-connection explicitly by calling `disconnect` on the
 24 | element. And manually connect if `auto` is set to `false` with `connect`
 25 | 
 26 | @demo demo/index.html
 27 | -->
 28 | 
 29 | <dom-module id="mqtt-connection">
 30 |   <template>
 31 |     <content id="mqttSubscriptions" select="mqtt-subscription"></content>
 32 |     <content id="mqttPublications" select="mqtt-publish"></content>
 33 |     <content id="content"></content>
 34 |   </template>
 35 | </dom-module>
 36 | 
 37 | <script>
 38 |   'use strict';
 39 |   (function (scope) {
 40 | 
 41 |     var MqttElements = scope.MqttElements = scope.MqttElements || {};
 42 | 
 43 |     MqttElements.MqttConnection = Polymer({
 44 |       is: 'mqtt-connection',
 45 | 
 46 |       /**
 47 |        * Fired when a connection is connected.
 48 |        *
 49 |        * @mqtt-subscription-unregister mqtt-connection-connected
 50 |        */
 51 | 
 52 |       /**
 53 |        * Fired when a connection is closed.
 54 |        *
 55 |        * @event mqtt-connection-close
 56 |        */
 57 | 
 58 |       /**
 59 |        * Fired when a connection is closed.
 60 |        *
 61 |        * @event mqtt-connection-offline
 62 |        */
 63 | 
 64 |       /**
 65 |        * Fired when a connection error occurs.
 66 |        *
 67 |        * @event mqtt-connection-error
 68 |        */
 69 | 
 70 |       /**
 71 |        * Fired when a mqtt message is received .
 72 |        *
 73 |        * @event mqtt-message
 74 |        */
 75 | 
 76 |       properties: {
 77 | 
 78 |         /**
 79 |          * When injecting the client object into different `<mqtt-connection>` element, each element will register to
 80 |          * listen for changes/ messages in the connection. To detect memory leaks the the `EventEmitter` raises an error
 81 |          * when more than `EventEmitter.maxListeners` (default 10) are registering to the client.
 82 |          *
 83 |          */
 84 |         maxListeners: {
 85 |           type: Number,
 86 |           value: 10,
 87 |           observer: "_maxListenersChanged"
 88 |         },
 89 | 
 90 |         /**
 91 |          * Set the clean flag to `false` to receive QOS 1 and 2 messages while offline. The messages are delivered if the
 92 |          * connection is re-establish with the broker.
 93 |          */
 94 |         clean: {
 95 |           type: Boolean,
 96 |           readOnly: false,
 97 |           value: true,
 98 |         },
 99 | 
100 |         /**
101 |          * The actual MQTT.js client that will be created on the first connect or injected
102 |          * via `<mqtt-connection client="[[client]]">`
103 |          */
104 |         client: {
105 |           type: Object,
106 |           readOnly: false,
107 |           notify: true,
108 |           observer: '_clientChanged',
109 |         },
110 | 
111 |         /**
112 |          * The prefix of the option.clientId. If the option.clientId is not set a random ID will be generated prefixed
113 |          * with clientIdPrefix
114 |          */
115 |         clientIdPrefix: {
116 |           type: String,
117 |           value: 'mqttjs_',
118 |         },
119 | 
120 |         /**
121 |          * Indicates weather the mqtt client is connected to the mqtt broker or not
122 |          */
123 |         connected: {
124 |           type: Boolean,
125 |           readOnly: true,
126 |           notify: true,
127 |           value: false,
128 |           observer: '_connectedChanged',
129 |         },
130 | 
131 |         /**
132 |          * Indicates weather the mqtt client is currently disconnecting the mqtt connection or not
133 |          */
134 |         disconnecting: {
135 |           type: Boolean,
136 |           readOnly: true,
137 |           notify: true,
138 |           value: false,
139 |         },
140 | 
141 |         /**
142 |          * A reference to the MQEmitter that is used to route messages between the `mqtt-connection` element and the
143 |          * `mqtt-subscription` elements.
144 |          *
145 |          * @attribute mqEmitter
146 |          * @type MQEmitter
147 |          * @default `new MQEmitter`
148 |          */
149 |         mqEmitter: {
150 |           type: Object,
151 |           notify: true,
152 |           readOnly: true,
153 |           value: function () {
154 |             return require("MQEmitter")();
155 |           },
156 |         },
157 | 
158 |         /**
159 |          * The options are directly passed to MQTT.js
160 |          * For further documentation see https://github.com/mqttjs/MQTT.js/wiki/connection#mqttconnectionconnectoptions
161 |          * * options.protocolId :String The mqtt protocolId tha is send to the mqtt broker DEFAULT: "MQTT"
162 |          * * options.protocolVersion :number 4
163 |          * * options.keepalive :number 120
164 |          * * options.clientId :String
165 |          * * options.clean :boolean
166 |          * * options.username :String The username that is user to authenticate the connection with
167 |          * * options.password :String The password that will be used to authenticate the `user` at the mqtt broker
168 |          * * options.will :Object The clients will message that is published from the mqtt broker in behalf of the client
169 |          * if the connection is from the client to the mqtt broker is lost.
170 |          * * options.will.topic :String The topic of the will message of the client eg. "client/"
171 |          * * options.will.qos :number The QOS of the will message of the client
172 |          * * options.will.retain :boolean The retain flag of the will message of the client
173 |          */
174 |         options: {
175 |           type: Object,
176 |           readOnly: false,
177 |           notify: true,
178 |           value: function () {
179 |             return {
180 |               //MQIsdp
181 |               protocolId: "MQTT",
182 |               protocolVersion: 4,
183 |               keepalive: 120,
184 |               reconnectPeriod: 1000,
185 |               clientId: "",
186 |               encoding: "string",
187 |             };
188 |           },
189 |         },
190 | 
191 |         username: {
192 |           type: String,
193 |           readOnly: false,
194 |           notify: true,
195 |           observer: "_usernameChanged"
196 |         },
197 | 
198 |         password: {
199 |           type: String,
200 |           readOnly: false,
201 |           notify: true,
202 |           observer: "_passwordChanged"
203 |         },
204 | 
205 | 
206 |         /**
207 |          * An array of all `<mqtt-publish>` elements that are placed within this `<mqtt-connection>` element.
208 |          */
209 |         publishers: {
210 |           type: Array,
211 |           notify: true,
212 |           readOnly: true,
213 |           value: function () {
214 |             return [];
215 |           },
216 |         },
217 | 
218 |         /**
219 |          * An array of all `<mqtt-subscription>` elements that are placed within this `<mqtt-connection>` element. Use
220 |          * this to iterate over all subscriptions.
221 |          */
222 |         subscriptions: {
223 |           type: Array,
224 |           notify: true,
225 |           readOnly: true,
226 |           value: function () {
227 |             return [];
228 |           },
229 |         },
230 | 
231 |         /**
232 |          * The url of the mqtt broker and can be on the following protocols: 'mqtt', 'mqtts', 'tcp', 'tls', 'ws', 'wss'.
233 |          * E.g ws://localhost:8080
234 |          */
235 |         url: {
236 |           type: String,
237 |           value: '',
238 |         },
239 | 
240 |         withCredentials: {
241 |           type: Boolean,
242 |           readOnly: false,
243 |           notify: true,
244 |           value: false,
245 |         },
246 | 
247 |         /**
248 |          * Set to `true` to automatically create and connect the mqtt connection.
249 |          */
250 |         auto: {
251 |           type: Boolean,
252 |           readOnly: false,
253 |           value: false,
254 |         },
255 | 
256 |         packetQueue: {
257 |           type: Array,
258 |           value: function(){
259 |             return [];
260 |           }
261 |         }
262 | 
263 |       },
264 | 
265 |       observers: [
266 |         '_usernameOrPasswordChanged(username, options.username, password, options.password, withCredentials, auto)',
267 |         '_autoChanged(auto, withCredentials)'
268 |       ],
269 | 
270 |       listeners: {
271 |         'mqtt-subscription-register': '_subscriptionElementRegistered',
272 |         'mqtt-subscription-unregister': '_subscriptionElementUnregistered',
273 |         'mqtt-publish-register': '_publishElementRegistered',
274 |         'mqtt-publish-unregister': '_publishElementUnregistered',
275 |       },
276 | 
277 |       attached: function () {
278 |         if(!this.client && this.auto && !this.withCredentials) {
279 |           this.connect();
280 |         }
281 |       },
282 | 
283 |       _usernameChanged: function (username, old) {
284 |         this.set("options.username", username);
285 |       },
286 | 
287 |       _passwordChanged: function (password, old) {
288 |         this.set("options.password", password);
289 |       },
290 | 
291 |       _autoChanged: function(auto, withCredentials){
292 |         if (!this.client && auto && !withCredentials){
293 |           this.connect();
294 |         }
295 |       },
296 | 
297 |       _usernameOrPasswordChanged: function (username, optUsername, password, optPassword, withCredentials, auto) {
298 |         if (!this.client && auto && ( !withCredentials || ( withCredentials && ( username || optUsername )  && (password || optPassword )))){
299 |           this.connect()
300 |         }
301 |       },
302 | 
303 |       _maxListenersChanged: function (maxListeners, old) {
304 |         if(this.client && maxListeners) {
305 |           this.client.setMaxListeners(maxListeners);
306 |         }
307 |       },
308 | 
309 |       /**
310 |        * connect - connect to an MQTT broker.
311 |        */
312 |       connect: function () {
313 |         // creates the client and automatically connects
314 |         this._createClient();
315 |       },
316 | 
317 |       /**
318 |        * diconnect - disconnect for the MQTT broker
319 |        */
320 |       disconnect: function () {
321 |         // check if we already have a client before calling end/ disconnect
322 |         if(this.client) {
323 |           this.client.end(true);
324 |         }
325 |       },
326 | 
327 |       /**
328 |        * Publish to an MQTT topic
329 |        * @param topic
330 |        * @param message
331 |        * @param opt_qos
332 |        * @param opt_retained
333 |        * @param opt_callback
334 |        */
335 |       publish: function (topic, message, opt_qos, opt_retained, opt_callback) {
336 | 
337 |         // the optional parameters to the publish
338 |         var opts = {
339 |           // default qos is `0`
340 |           qos: opt_qos || 0,
341 |           // default for retained is `false`
342 |           retain: opt_retained || false
343 |         };
344 | 
345 |         if(this.client) {
346 |           // actually send the `publish` message to the MQTT broker
347 |           this.client.publish(topic, message, opts, opt_callback);
348 |         } else {
349 |           var nop = function () {};
350 |           var queuePacket = {
351 |             cb: opt_callback || nop,
352 |             packet: {
353 |               cmd: 'publish',
354 |               topic: topic,
355 |               payload: message,
356 |               qos: opt_qos || 0,
357 |               retain: opt_retained || false,
358 |               messageId: 1
359 |             }
360 |           };
361 | 
362 |           this.push("packetQueue", queuePacket);
363 |         }
364 |       },
365 | 
366 |       /**
367 |        * Subscribe to an MQTT topic
368 |        * @param topic that the subscription is made to
369 |        * @param opt_qos [0,1,2] with the subscription is made with
370 |        * @param opt_callback an callback that will be executed when the `suback` message is received
371 |        */
372 |       subscribe: function (topic, opt_qos, opt_callback) {
373 |         var opts = {qos: opt_qos || 0};
374 |         if(this.client) {
375 |           this.client.subscribe(topic, opts, opt_callback);
376 |         }
377 |       },
378 | 
379 |       /**
380 |        * Pushes an element onto an array. To notify the changes `Polymer.Base.push` is used to alter the array
381 |        * @private
382 |        * @param path to the array
383 |        * @param element that will be put into the array
384 |        */
385 |       _addElementAndRegister: function (path, element) {
386 |         // adding the element to the array
387 |         this.push(path, element);
388 |         // setting this connection as the parent on the connection
389 |         this._setParentConnectionOnElement(element);
390 |       },
391 | 
392 |       /**
393 |        * A change listener to register event listeners on the `mqtt.client`
394 |        * @private
395 |        * @param client an instance of `MQTT.js#MqttClient`
396 |        */
397 |       _clientChanged: function (client) {
398 |         if(client) {
399 |           client
400 |               .on("close", this._handelClose.bind(this))
401 |               .on("connect", this._handelConnected.bind(this))
402 |               .on("error", this._handelError.bind(this))
403 |               .on("message", this._handelMessage.bind(this))
404 |               .on("offline", this._handelOffline.bind(this))
405 |               .on("reconnect", this._handelReconnect.bind(this));
406 |         }
407 |       },
408 | 
409 |       /**
410 |        * A listener that is run each time the `client.connected` changes
411 |        * @private
412 |        * @param connected true if `client.connected` is connected
413 |        * @param old is true if connected is false
414 |        */
415 |       _connectedChanged: function (connected, old) {
416 |         if(connected) {
417 |           // after the connection is established we need to subscribe/ resubscribe
418 |           this._subscribeAllSubscriptions();
419 |         } else if(old) {
420 |           this._setUnsubscribedForAllSubscriptions();
421 |         }
422 |       },
423 | 
424 |       /**
425 |        * Creates a new instance of MQTT.js#MqttClient
426 |        * @private
427 |        */
428 |       _createClient: function () {
429 |         // require mqtt from bundled browserified dependencies
430 |         var mqtt = require("mqtt");
431 |         if(mqtt) {
432 |           this._createClientDebounce(mqtt);
433 | //          return this.debounce('_createClient', this._createClientDebounce());
434 |         } else {
435 |           // failed to load mqtt.js
436 |           // TODO SKO tell the user about this and maybe log environment
437 |           this.fire("mqtt-connection-error", "<mqtt-connection> element could not load MQTT.js, pleas check your setup");
438 |           console.error("<mqtt-connection> element could not load MQTT.js, pleas check your setup");
439 |         }
440 |       },
441 | 
442 |       _createClientDebounce: function(mqtt){
443 |         if (this.options.clientId && this.options.clientId.length == 0){
444 |           this.set("options.clientId", this._generateClientId());
445 |         }
446 |         this.options["queue"] = this.packetQueue;
447 | 
448 |         this.client = mqtt.connect(this.url, this.options);
449 |         this.client.setMaxListeners(this.maxListeners);
450 |       },
451 | 
452 |       /**
453 |        * Creates a subscription for a `<mqtt-subscription>` element
454 |        * @private
455 |        * @param sub the `<mqtt-subscription>` element for that the subscription should be created
456 |        */
457 |       _createSubscription: function (sub) {
458 |         if(this.client) {
459 |           // subscribe the element at the mqtt-broker
460 |           this.subscribe(sub.topic, sub.qos, sub._handelSubscriptionSubscribedFunc);
461 | 
462 |           // add the element to the mqEmitter to receive messages on the topic
463 |           this.mqEmitter.on(sub.topic, sub._handelMessageFunc);
464 |         }
465 |       },
466 | 
467 |       /**
468 |        * Generates a random mqtt client ID
469 |        * @returns {string} the X digit mqtt client ID prefixed with 'mqttjs_'. Set `clientIdPrefix` prefix the clientID
470 |        * with something else
471 |        * @private
472 |        */
473 |       _generateClientId: function () {
474 |         return this.clientIdPrefix + Math.random().toString(16).substr(2, 8);
475 |       },
476 | 
477 |       /**
478 |        * Returns true if the MQTTClient is connected otherwise false.
479 |        * @private
480 |        * @param client to check the connection status on
481 |        * @return true if the client is connected otherwise false
482 |        */
483 |       _getConnectionStatusOfConnection: function (client) {
484 |         return client ? client.connected : false
485 |       },
486 | 
487 |       /**
488 |        * Event-Handler to handel the MQTTClient close event
489 |        * @private
490 |        */
491 |       _handelClose: function () {
492 |         this._setMqttConnected(this._getConnectionStatusOfConnection(this.client));
493 |         this.fire("mqtt-connection-close");
494 |       },
495 | 
496 |       /**
497 |        * Event-Handler to handel the MQTTClient connect event
498 |        * @private
499 |        */
500 |       _handelConnected: function () {
501 |         this._setMqttConnected(this._getConnectionStatusOfConnection(this.client));
502 |         this.fire("mqtt-connection-connected", {value: this.connected});
503 |       },
504 | 
505 |       /**
506 |        * Event-Handler to handel the MQTTClient error event
507 |        * @private
508 |        */
509 |       _handelError: function () {
510 |         this.fire("mqtt-connection-error");
511 |       },
512 | 
513 |       /**
514 |        * Event-Handler to handel the MQTTClient message event
515 |        * @private
516 |        * @param topic of the message
517 |        * @param message the actual message
518 |        * @param packet the MQTT-Packet
519 |        */
520 |       _handelMessage: function (topic, message, packet) {
521 |         this.fire("mqtt-message", {'topic': topic, 'message': message, 'packet': packet});
522 |         this.mqEmitter.emit({topic: topic, message: packet})
523 |       },
524 | 
525 |       /**
526 |        * Event-Handler to handel the MQTTClient offline event
527 |        * @private
528 |        */
529 |       _handelOffline: function () {
530 |         this._setMqttConnected(this._getConnectionStatusOfConnection(this.client));
531 |         this.fire("mqtt-connection-offline", {value: this.connected});
532 |       },
533 | 
534 |       /**
535 |        * Event-Handler to handel the MQTTClient reconnect event
536 |        * @private
537 |        */
538 |       _handelReconnect: function () {
539 |         this.fire("mqtt-connection-reconnect");
540 |       },
541 | 
542 |       /**
543 |        * Event-Handler that is called when a <mqtt-subscriptions> is changed, for example when it recieves a mqtt-message
544 |        * @private
545 |        * @param element the <mqtt-subscriptions> elemment that has changed
546 |        */
547 |       _notifySubscriptionChanged: function (element) {
548 |         this._propagateElementChanged(element, "subscriptions");
549 |       },
550 | 
551 |       /**
552 |        * Propagates the changes of any element e.g. <mqtt-subscriptions> to other observing elements e.g. <dom-repeat>
553 |        * @private
554 |        * @param element
555 |        * @param arrElementPath
556 |        */
557 |       _propagateElementChanged: function (element, arrElementPath) {
558 |         // the array property that hold the element that changed
559 |         var arrName = arrElementPath;
560 |         // get the index of the element
561 |         var index = this[arrName].indexOf(element);
562 |         // if the element exists within the array
563 |         if(index >= 0) {
564 |           // get the polymer collection key see:
565 |           // https://github.com/Polymer/polymer/issues/2068
566 |           var polymerPathId = Polymer.Collection.get(this.get(arrName)).getKey(this[arrName][index]);
567 | 
568 |           // check if the id is valid
569 |           if(polymerPathId >= 0) {
570 | 
571 |             // get all defined properties of the custom element
572 |             var propertyNames = Object.getOwnPropertyNames(this[arrName][index].properties);
573 | 
574 |             // iterate over all properties
575 |             for (var i = 0; i < propertyNames.length; i++) {
576 |               // build the path
577 |               var path = [arrName, polymerPathId, propertyNames[i]].join(".");
578 | 
579 |               // check if the element is an array, then slice needs to get called to actually result in
580 |               // Polymer_propertySetter
581 |               // old !== value => true
582 |               if(Array.isArray(this[arrName][index][propertyNames[i]])) {
583 |                 this.notifyPath(path, this[arrName][index][propertyNames[i]].slice());
584 |               }
585 |               // TOOD
586 |               // if the prop is an object each property has to be checked recursively
587 |               // for now use
588 |               // this.set($path, {$prop1: $prop1Old, $prop2: prop2Changed};
589 |               // to notify the path about changes
590 |               // else if(typeof this[arrName][index][propertyNames[i]] === "object") {
591 |               //
592 |               // }
593 |               else {
594 |                 this.notifyPath(path, this[arrName][index][propertyNames[i]]);
595 |               }
596 |             }
597 |           }
598 |         }
599 |       },
600 | 
601 |       /**
602 |        * Adds and registers and <mqtt-publish> element
603 |        * @private
604 |        * @param event that is fired from the <mqtt-publish> element on attach
605 |        */
606 |       _publishElementRegistered: function (event) {
607 |         this._addElementAndRegister("publishers", event.target);
608 |       },
609 | 
610 |       /**
611 |        * Removes and <mqtt-publish> element
612 |        * @private
613 |        * @param event that is fires from the <mqtt-publish> element on detached
614 |        */
615 |       _publishElementUnregistered: function (event) {
616 |         this._unregisterElement("publishers", event.detail.target);
617 |       },
618 | 
619 |       /**
620 |        * Removes an <mqtt-subscription> element from the MQEmitter
621 |        * @private
622 |        * @param sub the <mqtt-subscription> element that will be removed from the MQEmitter
623 |        */
624 |       _removeSubFromEmmitter: function (sub) {
625 |         this.mqEmitter.removeListener(sub.topic, sub._handelMessageFunc);
626 |       },
627 | 
628 |       /**
629 |        * Sets the current connection state
630 |        * @private
631 |        * @param state the actual connection state false == disconnedted ; true == connected
632 |        */
633 |       _setMqttConnected: function (state) {
634 |         if(typeof state === "boolean") {
635 |           this._setConnected(state);
636 |         }
637 |       },
638 | 
639 |       /**
640 |        * Sets this <mqtt-connection> elment as the parrent connection on the element
641 |        * @private
642 |        * @param element
643 |        */
644 |       _setParentConnectionOnElement: function (element) {
645 |         element._parentConnection = this;
646 |       },
647 | 
648 |       /**
649 |        * When the mqtt-connection is disconnected all subscriptions have to be marked as unsubscribed
650 |        * @private
651 |        */
652 |       _setUnsubscribedForAllSubscriptions: function () {
653 |         for (var i = 0; i < this.subscriptions.length; i++) {
654 |           this._setUnsubscribedToSubscription(this.subscriptions[i]);
655 |         }
656 |       },
657 | 
658 |       /**
659 |        * Actually sets the <mqtt-subscription> element ot unsubscribed
660 |        * @private
661 |        * @param sub the <mqtt-subscription> element
662 |        */
663 |       _setUnsubscribedToSubscription: function (sub) {
664 |         this._removeSubFromEmmitter(sub);
665 |         sub._handelSubscriptionUnsubscribed();
666 |       },
667 | 
668 |       /**
669 |        * Subscribes all subscriptions
670 |        * @private
671 |        */
672 |       _subscribeAllSubscriptions: function () {
673 |         var sub;
674 |         for (var i = 0; i < this.subscriptions.length; i++) {
675 |           sub = this.subscriptions[i];
676 |           // subscribe if the subscription is not subscribed
677 |           if(!sub.subscribed) {
678 |             this._createSubscription(sub);
679 |           }
680 |         }
681 |       },
682 | 
683 |       /**
684 |        * Adds and registers and <mqtt-subscription> element
685 |        * @private
686 |        * @param event that is fired from the <mqtt-subscription> on attach
687 |        */
688 |       _subscriptionElementRegistered: function (event) {
689 |         var sub = event.target;
690 |         this._addElementAndRegister("subscriptions", sub);
691 | 
692 |         if(this.client && this.client.connected) {
693 |           this._createSubscription(sub);
694 |         }
695 |       },
696 | 
697 |       /**
698 |        * Removes a <mqtt-subscription> element
699 |        * @private
700 |        * @param event that is fired from the <mqtt-subscription> element on detached
701 |        */
702 |       _subscriptionElementUnregistered: function (event) {
703 |         var sub = event.detail.target;
704 |         if(sub) {
705 |           if(sub.topic && this.client) {
706 |             this.client.unsubscribe(sub.topic, sub._handelSubscriptionUnsubscribed.bind(sub));
707 |             this._removeSubFromEmmitter(sub);
708 |           }
709 |           this._unregisterElement("subscriptions", sub);
710 |         }
711 |       },
712 | 
713 |       /**
714 |        * Removes an element from the array at path
715 |        * @private
716 |        * @param path of the array
717 |        * @param element that should be removed from the array
718 |        */
719 |       _unregisterElement: function (path, element) {
720 |         this.arrayDelete(path, element);
721 |       },
722 |     })
723 |   })(window);
724 | </script>
725 | 


--------------------------------------------------------------------------------