lakshmantgld/index.html

## index.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AWS IoT Pub/Sub Demo</title>
</head>
<body>
    <h1>AWS IoT Pub/Sub Demo</h1>
    <form>
        <button type="button" id="connect">connect!</button>

        <div>
            <label for="message">Message to send:</label>
            <input type="text" id="message" value="Hello world!" />

            <button type="button" id="send">send!</button>
        </div>
    </form>

    <h2>Log Output</h2>
    <ul id="the-log"></ul>

    <script src="bundle.js"></script>
</body>
</html>

## main.js
"use strict";
import v4 from 'aws-signature-v4';
import crypto from 'crypto';
import MqttClient from './node_modules/mqtt/lib/client';
import websocket from 'websocket-stream';

const AWS_ACCESS_KEY = 'AKIAJG2AAE7GEWVAVO4A';
const AWS_SECRET_ACCESS_KEY = '';
const AWS_IOT_ENDPOINT_HOST = 'A3XL158HTUQU5.iot.us-east-1.amazonaws.com';
const MQTT_TOPIC = '/test/iot-pubsub-demo';

var client;
addLogEntry('Hello World!');

document.getElementById('connect').addEventListener('click', () => {
    client = new MqttClient(() => {
        var url = v4.createPresignedURL(
            'GET',
            AWS_IOT_ENDPOINT_HOST.toLowerCase(),
            '/mqtt',
            'iotdevicegateway',
            crypto.createHash('sha256').update('', 'utf8').digest('hex'),
            {
                'key': AWS_ACCESS_KEY,
                'secret': AWS_SECRET_ACCESS_KEY,
                'protocol': 'wss',
                'expires': 15
            }
        );

        addLogEntry('Connecting to URL: ' + url);
        return websocket(url, [ 'mqttv3.1' ]);
    });

    client.on('connect', () => {
        addLogEntry('Successfully connected to AWS IoT Broker!  :-)');
        client.subscribe(MQTT_TOPIC);
    });

    client.on('close', () => {
        addLogEntry('Failed to connect :-(');
        client.end();  // don't reconnect
        client = undefined;
    });

    client.on('message', (topic, message) => {
        addLogEntry('Incoming message: ' + message.toString());
    });
});

document.getElementById('send').addEventListener('click', () => {
    const message = document.getElementById('message').value;
    addLogEntry('Outgoing message: ' + message);
    client.publish(MQTT_TOPIC, message);
});

function addLogEntry(info) {
    const newLogEntry = document.createElement('li');
    newLogEntry.textContent = '[' + (new Date()).toTimeString().slice(0, 8) + '] ' + info;

    const theLog = document.getElementById('the-log');
    theLog.insertBefore(newLogEntry, theLog.firstChild);
}

## package.json
{
  "name": "iot-pubsub-demo",
  "version": "0.0.1",
  "description": "AWS IoT Pub/Sub Demo",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Stefan Siegl <stesie@brokenpipe.de>",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "aws-signature-v4": "^1.0.1",
    "mqtt": "^1.7.4",
    "websocket-stream": "^3.1.0"
  }
}

## webpack.config.js
var path = require('path');
module.exports = {
    entry: './main.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>AWS IoT Pub/Sub Demo</title>
	</head>
	<body>
	<h1>AWS IoT Pub/Sub Demo</h1>
	<form>
	<button type="button" id="connect">connect!</button>

	<div>
	<label for="message">Message to send:</label>
	<input type="text" id="message" value="Hello world!" />

	<button type="button" id="send">send!</button>
	</div>
	</form>

	<h2>Log Output</h2>
	<ul id="the-log"></ul>

	<script src="bundle.js"></script>
	</body>
	</html>
	"use strict";
	import v4 from 'aws-signature-v4';
	import crypto from 'crypto';
	import MqttClient from './node_modules/mqtt/lib/client';
	import websocket from 'websocket-stream';

	const AWS_ACCESS_KEY = 'AKIAJG2AAE7GEWVAVO4A';
	const AWS_SECRET_ACCESS_KEY = '';
	const AWS_IOT_ENDPOINT_HOST = 'A3XL158HTUQU5.iot.us-east-1.amazonaws.com';
	const MQTT_TOPIC = '/test/iot-pubsub-demo';

	var client;
	addLogEntry('Hello World!');

	document.getElementById('connect').addEventListener('click', () => {
	client = new MqttClient(() => {
	var url = v4.createPresignedURL(
	'GET',
	AWS_IOT_ENDPOINT_HOST.toLowerCase(),
	'/mqtt',
	'iotdevicegateway',
	crypto.createHash('sha256').update('', 'utf8').digest('hex'),
	{
	'key': AWS_ACCESS_KEY,
	'secret': AWS_SECRET_ACCESS_KEY,
	'protocol': 'wss',
	'expires': 15
	}
	);

	addLogEntry('Connecting to URL: ' + url);
	return websocket(url, [ 'mqttv3.1' ]);
	});

	client.on('connect', () => {
	addLogEntry('Successfully connected to AWS IoT Broker! :-)');
	client.subscribe(MQTT_TOPIC);
	});

	client.on('close', () => {
	addLogEntry('Failed to connect :-(');
	client.end(); // don't reconnect
	client = undefined;
	});

	client.on('message', (topic, message) => {
	addLogEntry('Incoming message: ' + message.toString());
	});
	});

	document.getElementById('send').addEventListener('click', () => {
	const message = document.getElementById('message').value;
	addLogEntry('Outgoing message: ' + message);
	client.publish(MQTT_TOPIC, message);
	});

	function addLogEntry(info) {
	const newLogEntry = document.createElement('li');
	newLogEntry.textContent = '[' + (new Date()).toTimeString().slice(0, 8) + '] ' + info;

	const theLog = document.getElementById('the-log');
	theLog.insertBefore(newLogEntry, theLog.firstChild);
	}
	{
	"name": "iot-pubsub-demo",
	"version": "0.0.1",
	"description": "AWS IoT Pub/Sub Demo",
	"main": "main.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "Stefan Siegl <stesie@brokenpipe.de>",
	"license": "MIT",
	"devDependencies": {
	"babel-core": "^6.7.4",
	"babel-loader": "^6.2.4",
	"babel-preset-es2015": "^6.6.0",
	"webpack": "^1.12.14",
	"webpack-dev-server": "^1.14.1"
	},
	"dependencies": {
	"aws-signature-v4": "^1.0.1",
	"mqtt": "^1.7.4",
	"websocket-stream": "^3.1.0"
	}
	}
	var path = require('path');
	module.exports = {
	entry: './main.js',
	output: {
	path: __dirname,
	filename: 'bundle.js'
	},
	module: {
	loaders: [
	{
	test: /\.jsx?$/,
	exclude: /(node_modules\|bower_components)/,
	loader: 'babel-loader',
	query: {
	presets: ['es2015']
	}
	}
	]
	}
	};