Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AWS IoT-based serverless JS-Webapp Pub/Sub demo
<!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']
}
}
]
}
};
@rickyk586

This comment has been minimized.

Show comment
Hide comment
@rickyk586

rickyk586 Jan 24, 2017

to get the client, you can just use:

import mqtt from 'mqtt';
let client = mqtt.connect(signedUrl);

no need for websocket-stream

also, instead of crypto.createHash('sha256').update('', 'utf8').digest('hex') you can just use 'e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855'

to get the client, you can just use:

import mqtt from 'mqtt';
let client = mqtt.connect(signedUrl);

no need for websocket-stream

also, instead of crypto.createHash('sha256').update('', 'utf8').digest('hex') you can just use 'e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855'

@lakshmantgld

This comment has been minimized.

Show comment
Hide comment
@lakshmantgld

lakshmantgld Mar 17, 2017

I get 403 error. Precisely, this is the error am getting: WebSocket connection to 'wss://' failed: Error during WebSocket handshake: Unexpected response code: 403

I get 403 error. Precisely, this is the error am getting: WebSocket connection to 'wss://' failed: Error during WebSocket handshake: Unexpected response code: 403

@cloudle

This comment has been minimized.

Show comment
Hide comment
@cloudle

cloudle Mar 29, 2017

Same stuff for me, 403 error - anyone have updates?

cloudle commented Mar 29, 2017

Same stuff for me, 403 error - anyone have updates?

@ruisalgado

This comment has been minimized.

Show comment
Hide comment
@ruisalgado

ruisalgado Jun 7, 2017

if you get a 403 you probably need to specify the region in the options hash passed to v4.createPresignedURL. It defaults to us-east-1.

if you get a 403 you probably need to specify the region in the options hash passed to v4.createPresignedURL. It defaults to us-east-1.

@kimi75

This comment has been minimized.

Show comment
Hide comment

kimi75 commented May 11, 2018

+1

@rnukala

This comment has been minimized.

Show comment
Hide comment
@rnukala

rnukala May 25, 2018

thank you, this the only thing which worked for me

rnukala commented May 25, 2018

thank you, this the only thing which worked for me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment