├── client
    ├── favicon.ico
    ├── images
    │   └── bg.jpg
    ├── stylesheets
    │   ├── style.css
    │   ├── marketing-old-ie.css
    │   └── marketing.css
    ├── javascripts
    │   └── main.js
    └── index.html
├── bin
    └── www
├── server
    └── mqtt_sample.js
├── Gruntfile.js
├── README.md
├── package.json
├── .gitignore
├── LICENSE.md
└── app.js


/client/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mitsuruog/what-mqtt/HEAD/client/favicon.ico


--------------------------------------------------------------------------------
/client/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mitsuruog/what-mqtt/HEAD/client/images/bg.jpg


--------------------------------------------------------------------------------
/bin/www:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | var debug = require('debug')('what-mqtt');
 3 | var app = require('../app');
 4 | 
 5 | app.set('port', process.env.PORT || 3000);
 6 | 
 7 | var server = app.listen(app.get('port'), function() {
 8 |   debug('Express server listening on port ' + server.address().port);
 9 | });
10 | 


--------------------------------------------------------------------------------
/server/mqtt_sample.js:
--------------------------------------------------------------------------------
 1 | var mqtt = require('mqtt');
 2 | var client = mqtt.connect('mqtt://test.mosquitto.org');
 3 | 
 4 | client.subscribe('mitsuruog');
 5 | client.publish('mitsuruog', 'Hello mitsuruog mqtt :)');
 6 | 
 7 | client.on('message', function (topic, message) {
 8 |   console.log(topic);
 9 |   console.log(message.toString());
10 | });
11 | 
12 | // Close client connection 
13 | client.end();


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | module.exports = function (grunt) {
 4 | 
 5 |   require('load-grunt-tasks')(grunt);
 6 |   require('time-grunt')(grunt);
 7 | 
 8 |   grunt.initConfig({
 9 |     'gh-pages': {
10 |       options: {
11 |         base: 'client'
12 |       },
13 |       src: ['**']
14 |     }
15 |   });
16 | 
17 |   grunt.registerTask('deploy', [
18 |     'gh-pages'
19 |   ]);
20 | 
21 | };


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # What MQTT? 
 2 | 
 3 | MQTTって一体なんなのか？  
 4 | ブラウザで実行しているアプリをMQTTクライアントとするために、`MQTT on websocket`したサンプルです。
 5 | 
 6 | # demo
 7 | 
 8 | <http://mitsuruog.github.io/what-mqtt/>
 9 | 
10 | # install
11 | 
12 | ```
13 | git clone https://github.com/mitsuruog/what-mqtt.git
14 | cd what-mqtt
15 | npm install
16 | npm run start
17 | ```
18 | 
19 | Check it. <http://localhost:3000>
20 | 
21 | # LICENSE
22 | 
23 | MIT


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "what-mqtt",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "start": "node ./bin/www"
 7 |   },
 8 |   "dependencies": {
 9 |     "body-parser": "~1.8.1",
10 |     "cookie-parser": "~1.3.3",
11 |     "debug": "~2.0.0",
12 |     "express": "~4.9.0",
13 |     "jade": "~1.6.0",
14 |     "morgan": "~1.3.0",
15 |     "mows": "0.0.6",
16 |     "serve-favicon": "~2.1.3"
17 |   },
18 |   "devDependencies": {
19 |     "grunt": "^0.4.5",
20 |     "grunt-gh-pages": "^0.9.1",
21 |     "load-grunt-tasks": "^3.1.0",
22 |     "time-grunt": "^1.0.0"
23 |   }
24 | }
25 | 


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


--------------------------------------------------------------------------------
/client/stylesheets/style.css:
--------------------------------------------------------------------------------
 1 | .splash-container {
 2 |   background: url('../images/bg.jpg');
 3 |   background-position: center center;
 4 |   background-repeat: no-repeat;
 5 |   background-attachment: fixed;
 6 |   background-size: cover;
 7 | }
 8 | 
 9 | .pure-menu .pure-menu-heading,
10 | .splash {
11 |   text-transform: none;
12 | }
13 | 
14 | .btn-clear {
15 |   color: #444;
16 |   background-color: #E6E6E6;  
17 | }
18 | 
19 | .ribbon .pure-form legend,
20 | .ribbon .pure-form label {
21 |   color: #f3f3f3;
22 | }
23 | 
24 | .appendix li:before {
25 |   content: "\f08e";
26 |   font-family: FontAwesome;
27 | }
28 | 
29 | .appendix li {
30 |   list-style-type: none;  
31 | }
32 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) {{{year}}} {{{fullname}}}
 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 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var path = require('path');
 3 | var favicon = require('serve-favicon');
 4 | var logger = require('morgan');
 5 | var cookieParser = require('cookie-parser');
 6 | var bodyParser = require('body-parser');
 7 | 
 8 | var app = express();
 9 | 
10 | // view engine setup
11 | //app.set('views', path.join(__dirname, 'views'));
12 | //app.set('view engine', 'jade');
13 | 
14 | // uncomment after placing your favicon in /public
15 | //app.use(favicon(__dirname + '/public/favicon.ico'));
16 | app.use(logger('dev'));
17 | app.use(bodyParser.json());
18 | app.use(bodyParser.urlencoded({ extended: false }));
19 | app.use(cookieParser());
20 | app.use(express.static(path.join(__dirname, 'client')));
21 | 
22 | // catch 404 and forward to error handler
23 | app.use(function(req, res, next) {
24 |     var err = new Error('Not Found');
25 |     err.status = 404;
26 |     next(err);
27 | });
28 | 
29 | // error handlers
30 | 
31 | // development error handler
32 | // will print stacktrace
33 | if (app.get('env') === 'development') {
34 |     app.use(function(err, req, res, next) {
35 |         res.status(err.status || 500);
36 |         res.render('error', {
37 |             message: err.message,
38 |             error: err
39 |         });
40 |     });
41 | }
42 | 
43 | // production error handler
44 | // no stacktraces leaked to user
45 | app.use(function(err, req, res, next) {
46 |     res.status(err.status || 500);
47 |     res.render('error', {
48 |         message: err.message,
49 |         error: {}
50 |     });
51 | });
52 | 
53 | 
54 | module.exports = app;
55 | 


--------------------------------------------------------------------------------
/client/javascripts/main.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |   'use strict';
 3 | 
 4 |   // ボタン系
 5 |   var btnConnect = document.querySelector('.btn-connect');
 6 |   var btnDisconnect = document.querySelector('.btn-disconnect');
 7 |   var btnPublish = document.querySelector('.btn-publish');
 8 |   var btnSubscribe = document.querySelector('.btn-subscribe');
 9 |   var btnUnsubscribe = document.querySelector('.btn-unsubscribe');
10 |   var btnClear = document.querySelector('.btn-clear');
11 | 
12 |   // 入力系
13 |   var inputTopicPub = document.querySelector('.input-topic-pub');
14 |   var inputMessage = document.querySelector('.input-message');
15 |   var inputTopicSub = document.querySelector('.input-topic-sub');
16 |   var inputBrokerWs = document.querySelector('.input-broker-ws');
17 | 
18 |   var messages = document.querySelector('.messages');
19 | 
20 |   var client, appendMessage, clearMessages;
21 |   
22 |   btnConnect.addEventListener('click', function(e) {
23 |     e.preventDefault();
24 |     client = mows.createClient(inputBrokerWs.value);
25 |     appendMessage('connection open :)');
26 |     client.on('message', function (topic, message) {
27 |       console.log(message);
28 |       appendMessage(message);
29 |     });
30 |   });
31 | 
32 |   btnDisconnect.addEventListener('click', function(e) {
33 |     e.preventDefault();
34 |     client && client.end();
35 |     appendMessage('connection closed');
36 |   });
37 | 
38 |   btnPublish.addEventListener('click', function(e) {
39 |     e.preventDefault();
40 |     client && client.publish(inputTopicPub.value, inputMessage.value);
41 |   });
42 | 
43 |   btnSubscribe.addEventListener('click', function(e) {
44 |     e.preventDefault();
45 |     client && client.subscribe(inputTopicSub.value);
46 |     appendMessage('subscribe -> ' + inputTopicSub.value);
47 |   });
48 | 
49 |   btnUnsubscribe.addEventListener('click', function(e) {
50 |     e.preventDefault();
51 |     client && client.unsubscribe(inputTopicSub.value);
52 |     appendMessage('unsubscribe -> ' + inputTopicSub.value);
53 |   });
54 | 
55 |   btnClear.addEventListener('click', function(e) {
56 |     e.preventDefault();
57 |     clearMessages();
58 |   });
59 | 
60 |   appendMessage = function(message) {
61 |     var element = document.createElement('p');
62 |     var string = document.createTextNode(message);
63 |     element.appendChild(string);
64 |     messages.appendChild(element);
65 |   }
66 | 
67 |   clearMessages = function() {
68 |     var count = messages.childNodes.length;
69 |     for(var i=0; i<count; i++) {
70 |       messages.removeChild(messages.firstChild);
71 |     }
72 |   }
73 | 
74 | })();


--------------------------------------------------------------------------------
/client/stylesheets/marketing-old-ie.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     -webkit-box-sizing: border-box;
  3 |     -moz-box-sizing: border-box;
  4 |     box-sizing: border-box;
  5 | }
  6 | 
  7 | /*
  8 |  * -- BASE STYLES --
  9 |  * Most of these are inherited from Base, but I want to change a few.
 10 |  */
 11 | 
 12 | body {
 13 |     line-height: 1.7em;
 14 |     color: #7f8c8d;
 15 |     font-size: 13px;
 16 | }
 17 | 
 18 | h1,
 19 | h2,
 20 | h3,
 21 | h4,
 22 | h5,
 23 | h6,
 24 | label {
 25 |     color: #34495e;
 26 | }
 27 | 
 28 | .pure-img-responsive {
 29 |     max-width: 100%;
 30 |     height: auto;
 31 | }
 32 | 
 33 | /*
 34 |  * -- LAYOUT STYLES --
 35 |  * These are some useful classes which I will need
 36 |  */
 37 | 
 38 | .l-box {
 39 |     padding: 1em;
 40 | }
 41 | 
 42 | .l-box-lrg {
 43 |     padding: 2em;
 44 |     border-bottom: 1px solid rgba(0,0,0,0.1);
 45 | }
 46 | 
 47 | .is-center {
 48 |     text-align: center;
 49 | }
 50 | 
 51 | /*
 52 |  * -- PURE FORM STYLES --
 53 |  * Style the form inputs and labels
 54 |  */
 55 | 
 56 | .pure-form label {
 57 |     margin: 1em 0 0;
 58 |     font-weight: bold;
 59 |     font-size: 100%;
 60 | }
 61 | 
 62 | .pure-form input[type] {
 63 |     border: 2px solid #ddd;
 64 |     box-shadow: none;
 65 |     font-size: 100%;
 66 |     width: 100%;
 67 |     margin-bottom: 1em;
 68 | }
 69 | 
 70 | /*
 71 |  * -- PURE BUTTON STYLES --
 72 |  * I want my pure-button elements to look a little different
 73 |  */
 74 | 
 75 | .pure-button {
 76 |     background-color: #1f8dd6;
 77 |     color: white;
 78 |     padding: 0.5em 2em;
 79 |     border-radius: 5px;
 80 | }
 81 | 
 82 | a.pure-button-primary {
 83 |     background: white;
 84 |     color: #1f8dd6;
 85 |     border-radius: 5px;
 86 |     font-size: 120%;
 87 | }
 88 | 
 89 | /*
 90 |  * -- MENU STYLES --
 91 |  * I want to customize how my .pure-menu looks at the top of the page
 92 |  */
 93 | 
 94 | .home-menu {
 95 |     padding: 0.5em;
 96 |     text-align: center;
 97 |     box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
 98 | }
 99 | 
100 | .home-menu.pure-menu-open {
101 |     background: #2d3e50;
102 | }
103 | 
104 | .pure-menu.pure-menu-open.pure-menu-fixed {
105 |     /* Fixed menus normally have a border at the bottom. */
106 |     border-bottom: none;
107 |     /* I need a higher z-index here because of the scroll-over effect. */
108 |     z-index: 4;
109 | }
110 | 
111 | .home-menu .pure-menu-heading {
112 |     color: white;
113 |     font-weight: 400;
114 |     font-size: 120%;
115 | }
116 | 
117 | .home-menu .pure-menu-selected a {
118 |     color: white;
119 | }
120 | 
121 | .home-menu a {
122 |     color: #6FBEF3;
123 | }
124 | 
125 | .home-menu li a:hover,
126 | .home-menu li a:focus {
127 |     background: none;
128 |     border: none;
129 |     color: #AECFE5;
130 | }
131 | 
132 | /*
133 |  * -- SPLASH STYLES --
134 |  * This is the blue top section that appears on the page.
135 |  */
136 | 
137 | .splash-container {
138 |     background: #1f8dd6;
139 |     z-index: 1;
140 |     overflow: hidden;
141 |     /* The following styles are required for the "scroll-over" effect */
142 |     width: 100%;
143 |     height: 88%;
144 |     top: 0;
145 |     left: 0;
146 |     position: fixed !important;
147 | }
148 | 
149 | .splash {
150 |     /* absolute center .splash within .splash-container */
151 |     width: 80%;
152 |     height: 50%;
153 |     margin: auto;
154 |     position: absolute;
155 |     top: 100px;
156 |     left: 0;
157 |     bottom: 0;
158 |     right: 0;
159 |     text-align: center;
160 |     text-transform: uppercase;
161 | }
162 | 
163 | /* This is the main heading that appears on the blue section */
164 | 
165 | .splash-head {
166 |     font-size: 20px;
167 |     font-weight: bold;
168 |     color: white;
169 |     border: 3px solid white;
170 |     padding: 1em 1.6em;
171 |     font-weight: 100;
172 |     border-radius: 5px;
173 |     line-height: 1em;
174 | }
175 | 
176 | /* This is the subheading that appears on the blue section */
177 | 
178 | .splash-subhead {
179 |     color: white;
180 |     letter-spacing: 0.05em;
181 |     opacity: 0.8;
182 | }
183 | 
184 | /*
185 |  * -- CONTENT STYLES --
186 |  * This represents the content area (everything below the blue section)
187 |  */
188 | 
189 | .content-wrapper {
190 |     /* These styles are required for the "scroll-over" effect */
191 |     position: absolute;
192 |     top: 87%;
193 |     width: 100%;
194 |     min-height: 12%;
195 |     z-index: 2;
196 |     background: white;
197 | }
198 | 
199 | /* This is the class used for the main content headers (<h2>) */
200 | 
201 | .content-head {
202 |     font-weight: 400;
203 |     text-transform: uppercase;
204 |     letter-spacing: 0.1em;
205 |     margin: 2em 0 1em;
206 | }
207 | 
208 | /* This is a modifier class used when the content-head is inside a ribbon */
209 | 
210 | .content-head-ribbon {
211 |     color: white;
212 | }
213 | 
214 | /* This is the class used for the content sub-headers (<h3>) */
215 | 
216 | .content-subhead {
217 |     color: #1f8dd6;
218 | }
219 | 
220 | .content-subhead i {
221 |     margin-right: 7px;
222 | }
223 | 
224 | /* This is the class used for the dark-background areas. */
225 | 
226 | .ribbon {
227 |     background: #2d3e50;
228 |     color: #aaa;
229 | }
230 | 
231 | /* This is the class used for the footer */
232 | 
233 | .footer {
234 |     background: #111;
235 | }
236 | 
237 | /*
238 |  * -- TABLET (AND UP) MEDIA QUERIES --
239 |  * On tablets and other medium-sized devices, we want to customize some
240 |  * of the mobile styles.
241 |  */
242 | 
243 | /* We increase the body font size */
244 | 
245 | body {
246 |     font-size: 16px;
247 | }
248 | 
249 | /* We want to give the content area some more padding */
250 | 
251 | .content {
252 |     padding: 1em;
253 | }
254 | 
255 | /* We can align the menu header to the left, but float the
256 |     menu items to the right. */
257 | 
258 | .home-menu {
259 |     text-align: left;
260 | }
261 | 
262 | .home-menu ul {
263 |     float: right;
264 | }
265 | 
266 | /* We increase the height of the splash-container */
267 | 
268 | /*    .splash-container {
269 |         height: 500px;
270 |     }*/
271 | 
272 | /* We decrease the width of the .splash, since we have more width
273 |     to work with */
274 | 
275 | .splash {
276 |     width: 50%;
277 |     height: 50%;
278 | }
279 | 
280 | .splash-head {
281 |     font-size: 250%;
282 | }
283 | 
284 | /* We remove the border-separator assigned to .l-box-lrg */
285 | 
286 | .l-box-lrg {
287 |     border: none;
288 | }
289 | 
290 | /*
291 |  * -- DESKTOP (AND UP) MEDIA QUERIES --
292 |  * On desktops and other large devices, we want to over-ride some
293 |  * of the mobile and tablet styles.
294 |  */


--------------------------------------------------------------------------------
/client/stylesheets/marketing.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     -webkit-box-sizing: border-box;
  3 |     -moz-box-sizing: border-box;
  4 |     box-sizing: border-box;
  5 | }
  6 | 
  7 | /*
  8 |  * -- BASE STYLES --
  9 |  * Most of these are inherited from Base, but I want to change a few.
 10 |  */
 11 | body {
 12 |     line-height: 1.7em;
 13 |     color: #7f8c8d;
 14 |     font-size: 13px;
 15 | }
 16 | 
 17 | h1,
 18 | h2,
 19 | h3,
 20 | h4,
 21 | h5,
 22 | h6,
 23 | label {
 24 |     color: #34495e;
 25 | }
 26 | 
 27 | .pure-img-responsive {
 28 |     max-width: 100%;
 29 |     height: auto;
 30 | }
 31 | 
 32 | /*
 33 |  * -- LAYOUT STYLES --
 34 |  * These are some useful classes which I will need
 35 |  */
 36 | .l-box {
 37 |     padding: 1em;
 38 | }
 39 | 
 40 | .l-box-lrg {
 41 |     padding: 2em;
 42 |     border-bottom: 1px solid rgba(0,0,0,0.1);
 43 | }
 44 | 
 45 | .is-center {
 46 |     text-align: center;
 47 | }
 48 | 
 49 | 
 50 | 
 51 | /*
 52 |  * -- PURE FORM STYLES --
 53 |  * Style the form inputs and labels
 54 |  */
 55 | .pure-form label {
 56 |     margin: 1em 0 0;
 57 |     font-weight: bold;
 58 |     font-size: 100%;
 59 | }
 60 | 
 61 | .pure-form input[type] {
 62 |     border: 2px solid #ddd;
 63 |     box-shadow: none;
 64 |     font-size: 100%;
 65 |     width: 100%;
 66 |     margin-bottom: 1em;
 67 | }
 68 | 
 69 | /*
 70 |  * -- PURE BUTTON STYLES --
 71 |  * I want my pure-button elements to look a little different
 72 |  */
 73 | .pure-button {
 74 |     background-color: #1f8dd6;
 75 |     color: white;
 76 |     padding: 0.5em 2em;
 77 |     border-radius: 5px;
 78 | }
 79 | 
 80 | a.pure-button-primary {
 81 |     background: white;
 82 |     color: #1f8dd6;
 83 |     border-radius: 5px;
 84 |     font-size: 120%;
 85 | }
 86 | 
 87 | 
 88 | /*
 89 |  * -- MENU STYLES --
 90 |  * I want to customize how my .pure-menu looks at the top of the page
 91 |  */
 92 | 
 93 | .home-menu {
 94 |     padding: 0.5em;
 95 |     text-align: center;
 96 |     box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
 97 | }
 98 | .home-menu.pure-menu-open {
 99 |     background: #2d3e50;
100 | }
101 | .pure-menu.pure-menu-open.pure-menu-fixed {
102 |     /* Fixed menus normally have a border at the bottom. */
103 |     border-bottom: none;
104 |     /* I need a higher z-index here because of the scroll-over effect. */
105 |     z-index: 4;
106 | }
107 | 
108 | .home-menu .pure-menu-heading {
109 |     color: white;
110 |     font-weight: 400;
111 |     font-size: 120%;
112 | }
113 | 
114 | .home-menu .pure-menu-selected a {
115 |     color: white;
116 | }
117 | 
118 | .home-menu a {
119 |     color: #6FBEF3;
120 | }
121 | .home-menu li a:hover,
122 | .home-menu li a:focus {
123 |     background: none;
124 |     border: none;
125 |     color: #AECFE5;
126 | }
127 | 
128 | 
129 | /*
130 |  * -- SPLASH STYLES --
131 |  * This is the blue top section that appears on the page.
132 |  */
133 | 
134 | .splash-container {
135 |     background: #1f8dd6;
136 |     z-index: 1;
137 |     overflow: hidden;
138 |     /* The following styles are required for the "scroll-over" effect */
139 |     width: 100%;
140 |     height: 88%;
141 |     top: 0;
142 |     left: 0;
143 |     position: fixed !important;
144 | }
145 | 
146 | .splash {
147 |     /* absolute center .splash within .splash-container */
148 |     width: 80%;
149 |     height: 50%;
150 |     margin: auto;
151 |     position: absolute;
152 |     top: 100px; left: 0; bottom: 0; right: 0;
153 |     text-align: center;
154 |     text-transform: uppercase;
155 | }
156 | 
157 | /* This is the main heading that appears on the blue section */
158 | .splash-head {
159 |     font-size: 20px;
160 |     font-weight: bold;
161 |     color: white;
162 |     border: 3px solid white;
163 |     padding: 1em 1.6em;
164 |     font-weight: 100;
165 |     border-radius: 5px;
166 |     line-height: 1em;
167 | }
168 | 
169 | /* This is the subheading that appears on the blue section */
170 | .splash-subhead {
171 |     color: white;
172 |     letter-spacing: 0.05em;
173 |     opacity: 0.8;
174 | }
175 | 
176 | /*
177 |  * -- CONTENT STYLES --
178 |  * This represents the content area (everything below the blue section)
179 |  */
180 | .content-wrapper {
181 |     /* These styles are required for the "scroll-over" effect */
182 |     position: absolute;
183 |     top: 87%;
184 |     width: 100%;
185 |     min-height: 12%;
186 |     z-index: 2;
187 |     background: white;
188 | 
189 | }
190 | 
191 | /* This is the class used for the main content headers (<h2>) */
192 | .content-head {
193 |     font-weight: 400;
194 |     text-transform: uppercase;
195 |     letter-spacing: 0.1em;
196 |     margin: 2em 0 1em;
197 | }
198 | 
199 | /* This is a modifier class used when the content-head is inside a ribbon */
200 | .content-head-ribbon {
201 |     color: white;
202 | }
203 | 
204 | /* This is the class used for the content sub-headers (<h3>) */
205 | .content-subhead {
206 |     color: #1f8dd6;
207 | }
208 |     .content-subhead i {
209 |         margin-right: 7px;
210 |     }
211 | 
212 | /* This is the class used for the dark-background areas. */
213 | .ribbon {
214 |     background: #2d3e50;
215 |     color: #aaa;
216 | }
217 | 
218 | /* This is the class used for the footer */
219 | .footer {
220 |     background: #111;
221 | }
222 | 
223 | /*
224 |  * -- TABLET (AND UP) MEDIA QUERIES --
225 |  * On tablets and other medium-sized devices, we want to customize some
226 |  * of the mobile styles.
227 |  */
228 | @media (min-width: 48em) {
229 | 
230 |     /* We increase the body font size */
231 |     body {
232 |         font-size: 16px;
233 |     }
234 |     /* We want to give the content area some more padding */
235 |     .content {
236 |         padding: 1em;
237 |     }
238 | 
239 |     /* We can align the menu header to the left, but float the
240 |     menu items to the right. */
241 |     .home-menu {
242 |         text-align: left;
243 |     }
244 |         .home-menu ul {
245 |             float: right;
246 |         }
247 | 
248 |     /* We increase the height of the splash-container */
249 | /*    .splash-container {
250 |         height: 500px;
251 |     }*/
252 | 
253 |     /* We decrease the width of the .splash, since we have more width
254 |     to work with */
255 |     .splash {
256 |         width: 50%;
257 |         height: 50%;
258 |     }
259 | 
260 |     .splash-head {
261 |         font-size: 250%;
262 |     }
263 | 
264 | 
265 |     /* We remove the border-separator assigned to .l-box-lrg */
266 |     .l-box-lrg {
267 |         border: none;
268 |     }
269 | 
270 | }
271 | 
272 | /*
273 |  * -- DESKTOP (AND UP) MEDIA QUERIES --
274 |  * On desktops and other large devices, we want to over-ride some
275 |  * of the mobile and tablet styles.
276 |  */
277 | @media (min-width: 78em) {
278 |     /* We increase the header font size even more */
279 |     .splash-head {
280 |         font-size: 300%;
281 |     }
282 | }
283 | 


--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <meta name="description" content="A layout example that shows off a responsive product landing page.">
  7 |   <title>MQTT on Websocket sample</title>
  8 |   <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
  9 | 
 10 |   <!--[if lte IE 8]>
 11 |   <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
 12 |   <![endif]-->
 13 |   <!--[if gt IE 8]>
 14 |   <!-->
 15 |   <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
 16 |   <!--<![endif]-->
 17 | 
 18 |   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
 19 | 
 20 |   <!--[if lte IE 8]>
 21 |   <link rel="stylesheet" href="css/layouts/marketing-old-ie.css">
 22 |   <![endif]-->
 23 |   <!--[if gt IE 8]>
 24 |   <!-->
 25 |   <link rel="stylesheet" href="stylesheets/marketing.css">
 26 |   <link rel="stylesheet" href="stylesheets/style.css">
 27 |   <!--<![endif]-->
 28 | </head>
 29 | <body>
 30 | 
 31 |   <div class="header">
 32 |     <div class="home-menu pure-menu pure-menu-open pure-menu-horizontal pure-menu-fixed">
 33 |       <a class="pure-menu-heading" href="">MQTT on Websocket sample</a>
 34 |       <ul>
 35 |         <li>
 36 |           <a href="https://github.com/mitsuruog/what-mqtt"> <i class="fa fa-lg fa-github"></i>
 37 |           </a>
 38 |         </li>
 39 |       </ul>
 40 |     </div>
 41 |   </div>
 42 | 
 43 |   <div class="splash-container">
 44 |     <div class="splash">
 45 |       <h3 class="splash-head">MQTT Client sample</h3>
 46 |     </div>
 47 |   </div>
 48 | 
 49 |   <div class="content-wrapper">
 50 |     <div class="content">
 51 |       <h2 class="content-head is-center">How to use</h2>
 52 | 
 53 |       <div class="pure-g">
 54 |         <div class="l-box pure-u-1-3">
 55 | 
 56 |           <h3 class="content-subhead"> <i class="fa fa-link"></i>
 57 |             Connect
 58 |           </h3>
 59 |           <p>
 60 |             First, Click on the Connect button, then connected to <code>ws://broker.hivemq.com:8000/mqtt</code>.
 61 |           </p>
 62 |         </div>
 63 | 
 64 |         <div class="l-box pure-u-1-3">
 65 |           <h3 class="content-subhead">
 66 |             <i class="fa fa-check-square-o"></i>
 67 |             Subscribe
 68 |           </h3>
 69 |           <p>
 70 |             Next, Click on the Subscribe button to enter a Topic.
 71 |           </p>
 72 |         </div>
 73 |         <div class="l-box pure-u-1-3">
 74 |           <h3 class="content-subhead">
 75 |             <i class="fa fa-thumbs-o-up "></i>
 76 |             Publish
 77 |           </h3>
 78 |           <p>
 79 |             Finally, Click on the Publish button to enter the Topic and some Messages. enjoy MQTT life :).
 80 |           </p>
 81 |         </div>
 82 |       </div>
 83 |     </div>
 84 | 
 85 |     <div class="ribbon l-box-lrg pure-g">
 86 | 
 87 |       <div class="l-box-lrg pure-u-2-3">
 88 |         <button class="pure-button btn-clear">message clear</button>
 89 |         <div class="messages"></div>
 90 |       </div>
 91 | 
 92 |       <div class="pure-u-1-3">
 93 | 
 94 |         <form class="pure-form">
 95 |           <fieldset>
 96 |             <legend>Connect / Disconnect</legend>
 97 |             <button class="pure-button btn-connect">connect</button>
 98 |             <button class="pure-button btn-disconnect">disconnect</button>
 99 |           </fieldset>
100 | 		  
101 |           <fieldset>
102 |             <legend>MQTT broker on websocket</legend>
103 |             <label>
104 | 			  Address:
105 |               <input type="text" class="input-broker-ws" value="ws://broker.hivemq.com:8000/mqtt"></label>
106 |           </fieldset>
107 | 
108 |           <fieldset>
109 |             <legend>Subscribe / Unsubscribe</legend>
110 |             <label>
111 |               Topic:
112 |               <input type="text" class="input-topic-sub" value="mitsuruog"></label>
113 |             <button class="pure-button btn-subscribe">subscribe</button>
114 |             <button class="pure-button btn-unsubscribe">unsubscribe</button>
115 |           </fieldset>
116 | 
117 |           <fieldset>
118 |             <legend>Publish</legend>
119 |             <label>
120 |               Topic:
121 |               <input type="text" class="input-topic-pub" value="mitsuruog"></label>
122 |             <label>
123 |               Message:
124 |               <input type="text" class="input-message" value="Hello mitsuruog :)"></label>
125 |             <button class="pure-button btn-publish">publish</button>
126 |           </fieldset>
127 |         </form>
128 | 
129 |       </div>
130 |     </div>
131 | 
132 |     <div class="content">
133 |       <h2 class="content-head is-center">Appendix</h2>
134 | 
135 |       <div class="pure-g">
136 | 
137 |         <div class="l-box-lrg pure-u-2-3 appendix">
138 | 
139 |           <ul>
140 |             <li>
141 |               <a href="https://github.com/mqttjs/MQTT.js">mqttjs/MQTT.js</a>
142 |             </li>
143 |             <li>
144 |               <a href="https://github.com/mcollina/mows">mcollina/mows</a>
145 |             </li>
146 |             <li>
147 |               <a href="http://stackoverflow.com/questions/16047344/can-a-web-browser-use-mqtt">Can a web browser use MQTT? - Stack Overflow</a>
148 |             </li>
149 |             <li>
150 |               <a href="http://www.hivemq.com/mqtt-over-websockets-with-hivemq/">MQTT over Websockets with HiveMQ</a>
151 |             </li>
152 |             <li>
153 |               <a href="https://www.flickr.com/photos/62546270@N07/">Photo by Matt Rafferty</a>
154 |             </li>
155 |           </ul>
156 | 
157 |         </div>
158 | 
159 |         <div class="l-box-lrg pure-u-1-1"></div>
160 | 
161 |       </div>
162 | 
163 |     </div>
164 | 
165 |     <div class="footer l-box is-center">
166 |       Created by
167 |       <a href="https://github.com/mitsuruog">mitsuruog</a>
168 |       . Design by
169 |       <a href="http://purecss.io/">Pure</a>
170 |     </div>
171 | 
172 |   </div>
173 | 
174 |   <script src="javascripts/assets/mows.js"></script>
175 |   <script src="javascripts/main.js"></script>
176 | 
177 |   <script>
178 |   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
179 |   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
180 |   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
181 |   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
182 | 
183 |   ga('create', 'UA-56126469-2', 'auto');
184 |   ga('send', 'pageview');
185 | 
186 |   </script>
187 | 
188 | </body>
189 | </html>
190 | 


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