Updated Client Side validations and CI through Travis

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - "iojs"

README.md

@@ -1,7 +1,7 @@
-# What MQTT? 
+[![Build Status](https://travis-ci.org/karan6190/MQTT-WebSockets.svg?branch=master)](https://travis-ci.org/karan6190/MQTT-WebSockets)
 
-MQTTって一体なんなのか？  
-ブラウザで実行しているアプリをMQTTクライアントとするために、`MQTT on websocket`したサンプルです。
+# What is MQTT? 
+MQTT is a machine-to-machine (M2M)/"Internet of Things" connectivity protocol. It was designed as an extremely lightweight publish/subscribe messaging transport. It is useful for connections with remote locations where a small code footprint is required and/or network bandwidth is at a premium.
 
 # demo
 
@@ -10,7 +10,7 @@ MQTTって一体なんなのか？
 # install
 
 ```
-git clone https://github.com/mitsuruog/what-mqtt.git
+git clone https://github.com/karan6190/MQTT-WebSockets
 cd what-mqtt
 npm install
 npm run start
@@ -20,4 +20,4 @@ Check it. <http://localhost:3000>
 
 # LICENSE
 
-MIT
+MIT

client/index.html

@@ -57,7 +57,7 @@ <h3 class="content-subhead"> <i class="fa fa-link"></i>
             Connect
           </h3>
           <p>
-            First, Click on the Connect button, then connected to <code>ws://broker.hivemq.com:8000/mqtt</code>.
+            First, Click on the Connect button, then connected to <code>ws://broker.hivemq.com:8000</code>.
           </p>
         </div>
 
@@ -102,7 +102,7 @@ <h3 class="content-subhead">
             <legend>MQTT broker on websocket</legend>
             <label>
 			  Address:
-              <input type="text" class="input-broker-ws" value="ws://broker.hivemq.com:8000/mqtt"></label>
+              <input type="text" class="input-broker-ws" value="ws://broker.hivemq.com:8000"></label>
           </fieldset>
 
           <fieldset>

client/javascripts/main.js

@@ -1,54 +1,198 @@
 (function() {
   'use strict';
 
-  // ボタン系
+
   var btnConnect = document.querySelector('.btn-connect');
   var btnDisconnect = document.querySelector('.btn-disconnect');
   var btnPublish = document.querySelector('.btn-publish');
   var btnSubscribe = document.querySelector('.btn-subscribe');
   var btnUnsubscribe = document.querySelector('.btn-unsubscribe');
   var btnClear = document.querySelector('.btn-clear');
 
-  // 入力系
+
   var inputTopicPub = document.querySelector('.input-topic-pub');
   var inputMessage = document.querySelector('.input-message');
   var inputTopicSub = document.querySelector('.input-topic-sub');
-  var inputBrokerWs = document.querySelector('.input-broker-ws');
 
   var messages = document.querySelector('.messages');
-
   var client, appendMessage, clearMessages;
 
+
+
+
+   var dis =document.getElementsByClassName("btn-disconnect");
+   console.log(dis);
+   for(var i = 0; i < dis.length; i++) {
+  dis[i].disabled = true;
+		}
+
+
+    var con=document.getElementsByClassName("btn-connect");
+     console.log(con);
+   for(var i = 0; i < dis.length; i++) {
+  con[i].disabled = false;
+		}
+
+
+
+
+  var unsub =document.getElementsByClassName("btn-unsubscribe");
+   console.log(unsub);
+   for(var i = 0; i < unsub.length; i++) {
+  unsub[i].disabled = true;
+		}
+
+
+
+    var sub =document.getElementsByClassName("btn-subscribe");
+   console.log(sub);
+   for(var i = 0; i < sub.length; i++) {
+  sub[i].disabled = true;
+		}
+
+
+
+
+
   btnConnect.addEventListener('click', function(e) {
     e.preventDefault();
-    client = mows.createClient(inputBrokerWs.value);
-    appendMessage('connection open :)');
+
+
+    client = mows.createClient('ws://broker.hivemq.com:8000');
+
+
+	var dis =document.getElementsByClassName("btn-disconnect");
+   console.log(dis);
+   for(var i = 0; i < dis.length; i++) {
+  dis[i].disabled = false;
+		}
+
+
+	var con=document.getElementsByClassName("btn-connect");
+     console.log(con);
+   for(var i = 0; i < dis.length; i++) {
+  con[i].disabled = true;
+		}  
+
+	var dis =document.getElementsByClassName("btn-subscribe");
+   console.log(dis);
+   for(var i = 0; i < dis.length; i++) {
+  dis[i].disabled = false;
+		}
+
+    var dis =document.getElementsByClassName("btn-unsubscribe");
+   console.log(dis);
+   for(var i = 0; i < dis.length; i++) {
+  dis[i].disabled = true;
+		}		
+
+
+    appendMessage('You are connected..');
     client.on('message', function (topic, message) {
       console.log(message);
       appendMessage(message);
+
     });
   });
 
   btnDisconnect.addEventListener('click', function(e) {
     e.preventDefault();
     client && client.end();
-    appendMessage('connection closed');
+    appendMessage('Connection lost..');
+
+	 var dis =document.getElementsByClassName("btn-disconnect");
+   console.log(dis);
+   for(var i = 0; i < dis.length; i++) {
+  dis[i].disabled = true;
+		}
+
+
+
+	var con=document.getElementsByClassName("btn-connect");
+     console.log(con);
+   for(var i = 0; i < dis.length; i++) {
+  con[i].disabled = false;
+		}
+
+	 var dis =document.getElementsByClassName("btn-subscribe");
+   console.log(dis);
+   for(var i = 0; i < dis.length; i++) {
+  dis[i].disabled = true;
+		}
+
+	var dis =document.getElementsByClassName("btn-unsubscribe");
+   console.log(dis);
+   for(var i = 0; i < dis.length; i++) {
+  dis[i].disabled = true;
+		}	
+
   });
 
   btnPublish.addEventListener('click', function(e) {
     e.preventDefault();
     client && client.publish(inputTopicPub.value, inputMessage.value);
   });
 
+
+
+
+
+
+
   btnSubscribe.addEventListener('click', function(e) {
     e.preventDefault();
     client && client.subscribe(inputTopicSub.value);
+
+	 var unsub =document.getElementsByClassName("btn-unsubscribe");
+   console.log(unsub);
+   for(var i = 0; i < unsub.length; i++) {
+  unsub[i].disabled = false;
+		}
+
+
+
+    var sub =document.getElementsByClassName("btn-subscribe");
+   console.log(sub);
+   for(var i = 0; i < sub.length; i++) {
+  sub[i].disabled = true;
+		}
+
+
+
+
+
+
+
+
+
     appendMessage('subscribe -> ' + inputTopicSub.value);
   });
 
   btnUnsubscribe.addEventListener('click', function(e) {
     e.preventDefault();
     client && client.unsubscribe(inputTopicSub.value);
+
+
+	 var unsub =document.getElementsByClassName("btn-unsubscribe");
+   console.log(unsub);
+   for(var i = 0; i < unsub.length; i++) {
+  unsub[i].disabled = true;
+		}
+
+
+
+    var sub =document.getElementsByClassName("btn-subscribe");
+   console.log(sub);
+   for(var i = 0; i < sub.length; i++) {
+  sub[i].disabled = false;
+		}
+
+
+
+
+
+
+
     appendMessage('unsubscribe -> ' + inputTopicSub.value);
   });
 

package.json

@@ -6,14 +6,14 @@
     "start": "node ./bin/www"
   },
   "dependencies": {
-    "body-parser": "~1.8.1",
-    "cookie-parser": "~1.3.3",
+    "body-parser": "^1.8.4",
+    "cookie-parser": "^1.3.5",
     "debug": "~2.0.0",
-    "express": "~4.9.0",
+    "express": "^4.9.8",
     "jade": "~1.6.0",
-    "morgan": "~1.3.0",
+    "morgan": "^1.3.2",
     "mows": "0.0.6",
-    "serve-favicon": "~2.1.3"
+    "serve-favicon": "^2.1.7"
   },
   "devDependencies": {
     "grunt": "^0.4.5",

server/mqtt_sample.js

@@ -1,5 +1,5 @@
 var mqtt = require('mqtt');
-var client = mqtt.connect('mqtt://test.mosquitto.org');
+var client = mqtt.connect('broker.hivemq.com');
 
 client.subscribe('mitsuruog');
 client.publish('mitsuruog', 'Hello mitsuruog mqtt :)');