compilerexe/config.js

## config.js
host = '_Your_IP_MQTT_';	// hostname or IP address
port = 9001;
topic = 'esp8266/18:fe:34:a6:f6:16/status';		// topic to subscribe to
useTLS = false;
username = null;
password = null;
// username = "jjolie";
// password = "aa";
cleansession = true;

## index.html
<html>
  <head>
    <title>Mosquitto Websockets</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <script src="jquery-2.1.4.min.js"></script>
    <script src="mqttws31.js" type="text/javascript"></script>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="config.js" type="text/javascript"></script>

    <script type="text/javascript">
    var mqtt;
    var reconnectTimeout = 2000;

    function MQTTconnect() {
        mqtt = new Paho.MQTT.Client(
                        host,
                        port,
                        "web_" + parseInt(Math.random() * 100,
                        10));
        var options = {
            timeout: 3,
            useSSL: useTLS,
            cleanSession: cleansession,
            onSuccess: onConnect,
            onFailure: function (message) {
                $('#status').val("Connection failed: " + message.errorMessage + "Retrying");
                setTimeout(MQTTconnect, reconnectTimeout);
            }
        };

        mqtt.onConnectionLost = onConnectionLost;
        mqtt.onMessageArrived = onMessageArrived;

        if (username != null) {
            options.userName = username;
            options.password = password;
        }
        console.log("Host="+ host + ", port=" + port + " TLS = " + useTLS + " username=" + username + " password=" + password);
        mqtt.connect(options);

    }

    function onConnect() {
        $('#status').val('Connected to ' + host + ':' + port);
        // Connection succeeded; subscribe to our topic
        mqtt.subscribe(topic, {qos: 0});
        $('#topic').val(topic);
    }

    function onConnectionLost(response) {
        setTimeout(MQTTconnect, reconnectTimeout);
        $('#status').val("connection lost: " + responseObject.errorMessage + ". Reconnecting");

    };

    function onMessageArrived(message) {

        var topic = message.destinationName;
        var payload = message.payloadString;

        //$('#wat').prepend(payload);

        obj = JSON.parse(payload);
        document.getElementById("wat").innerHTML = "<b>" + "Watt : " + obj.d["W"] + "</b>";

		$(document).ready(function(){

		  	if ( $("#money").val().length != 0 ) {
		  		var result = (obj.d["W"] / 1000) * document.getElementById("money").value;
		  		result = result.toFixed(2);
		  		document.getElementById("wat").innerHTML += "<b>" + " / " + "<span style='color:red'>"+ result + " bath" + "</span> </b>";
		  	};

		});

    };

    function Send_ON() {
        var pub_topic = "esp8266/18:fe:34:a6:f6:16/command";
        var data = "1";
        var message = new Paho.MQTT.Message(data);
        message.destinationName = pub_topic;
        mqtt.send(message);
    }

    function Send_OFF() {
        var pub_topic = "esp8266/18:fe:34:a6:f6:16/command";
        var data = "0";
        var message = new Paho.MQTT.Message(data);
        message.destinationName = pub_topic;
        mqtt.send(message);
    }

    $(document).ready(function() {
        MQTTconnect();

        $("#on").click(function(){
            Send_ON();
        });

        $("#off").click(function(){
            Send_OFF();
        });

    });

    </script>
  </head>
  <body>

	  <div class="container">
	  	<div class="row">
	  		<div class="col-md-4 col-md-offset-4" style="margin-top:15px">
	  			<div class="panel panel-info">
	  				<div class="panel-heading">
	  					<b>Convert Watt To Money</b>
	  				</div>
	  				<div class="panel-body">
	  					<div class="col-md-12">
	  						<p id="wat"></p>
	  					</div>
	  					<div class="col-md-12">
	  						<input type="text" id="money" class="form-control" placeholder="Bath per unit">
	  					</div>

	  				</div>
	  			</div>
	  		</div>

	  		<div class="col-md-4 col-md-offset-4" style="margin-top:15px">
	  			<div class="panel panel-success">
	  				<div class="panel-heading">
	  					<b>Control Switch</b>
	  				</div>
	  				<div class="panel-body">
	  					<div class="col-md-6">
	  		   				<div class="form-group">
                                <button class="btn btn-success" id="on" style="width:100%">ON</button>
                            </div>
	  					</div>
	  					<div class="col-md-6">
	  						<div class="form-group">
                                <button class="btn btn-danger" id="off" style="width:100%">OFF</button>
                            </div>
	  					</div>
	  				</div>
	  			</div>
	  		</div>

	  	</div>
	  </div>

  </body>

</html>
	host = '_Your_IP_MQTT_'; // hostname or IP address
	port = 9001;
	topic = 'esp8266/18:fe:34:a6:f6:16/status'; // topic to subscribe to
	useTLS = false;
	username = null;
	password = null;
	// username = "jjolie";
	// password = "aa";
	cleansession = true;
	<html>
	<head>
	<title>Mosquitto Websockets</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
	<script src="jquery-2.1.4.min.js"></script>
	<script src="mqttws31.js" type="text/javascript"></script>
	<script src="jquery.min.js" type="text/javascript"></script>
	<script src="config.js" type="text/javascript"></script>

	<script type="text/javascript">
	var mqtt;
	var reconnectTimeout = 2000;

	function MQTTconnect() {
	mqtt = new Paho.MQTT.Client(
	host,
	port,
	"web_" + parseInt(Math.random() * 100,
	10));
	var options = {
	timeout: 3,
	useSSL: useTLS,
	cleanSession: cleansession,
	onSuccess: onConnect,
	onFailure: function (message) {
	$('#status').val("Connection failed: " + message.errorMessage + "Retrying");
	setTimeout(MQTTconnect, reconnectTimeout);
	}
	};

	mqtt.onConnectionLost = onConnectionLost;
	mqtt.onMessageArrived = onMessageArrived;

	if (username != null) {
	options.userName = username;
	options.password = password;
	}
	console.log("Host="+ host + ", port=" + port + " TLS = " + useTLS + " username=" + username + " password=" + password);
	mqtt.connect(options);

	}

	function onConnect() {
	$('#status').val('Connected to ' + host + ':' + port);
	// Connection succeeded; subscribe to our topic
	mqtt.subscribe(topic, {qos: 0});
	$('#topic').val(topic);
	}

	function onConnectionLost(response) {
	setTimeout(MQTTconnect, reconnectTimeout);
	$('#status').val("connection lost: " + responseObject.errorMessage + ". Reconnecting");

	};

	function onMessageArrived(message) {

	var topic = message.destinationName;
	var payload = message.payloadString;

	//$('#wat').prepend(payload);

	obj = JSON.parse(payload);
	document.getElementById("wat").innerHTML = "<b>" + "Watt : " + obj.d["W"] + "</b>";

	$(document).ready(function(){

	if ( $("#money").val().length != 0 ) {
	var result = (obj.d["W"] / 1000) * document.getElementById("money").value;
	result = result.toFixed(2);
	document.getElementById("wat").innerHTML += "<b>" + " / " + "<span style='color:red'>"+ result + " bath" + "</span> </b>";
	};

	});

	};

	function Send_ON() {
	var pub_topic = "esp8266/18:fe:34:a6:f6:16/command";
	var data = "1";
	var message = new Paho.MQTT.Message(data);
	message.destinationName = pub_topic;
	mqtt.send(message);
	}

	function Send_OFF() {
	var pub_topic = "esp8266/18:fe:34:a6:f6:16/command";
	var data = "0";
	var message = new Paho.MQTT.Message(data);
	message.destinationName = pub_topic;
	mqtt.send(message);
	}

	$(document).ready(function() {
	MQTTconnect();

	$("#on").click(function(){
	Send_ON();
	});

	$("#off").click(function(){
	Send_OFF();
	});

	});

	</script>
	</head>
	<body>

	<div class="container">
	<div class="row">
	<div class="col-md-4 col-md-offset-4" style="margin-top:15px">
	<div class="panel panel-info">
	<div class="panel-heading">
	<b>Convert Watt To Money</b>
	</div>
	<div class="panel-body">
	<div class="col-md-12">
	<p id="wat"></p>
	</div>
	<div class="col-md-12">
	<input type="text" id="money" class="form-control" placeholder="Bath per unit">
	</div>

	</div>
	</div>
	</div>

	<div class="col-md-4 col-md-offset-4" style="margin-top:15px">
	<div class="panel panel-success">
	<div class="panel-heading">
	<b>Control Switch</b>
	</div>
	<div class="panel-body">
	<div class="col-md-6">
	<div class="form-group">
	<button class="btn btn-success" id="on" style="width:100%">ON</button>
	</div>
	</div>
	<div class="col-md-6">
	<div class="form-group">
	<button class="btn btn-danger" id="off" style="width:100%">OFF</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	</div>
	</div>

	</body>

	</html>