creating a web page that receives info from AWS IOT button - node.js

Question

i want to create a web page that gets information (MQTT message) from an AWS IOT button. I have a working, configured button and i already manged to make it send MQTT information to my computer. Now i want this MQTT information to be displayed on a web page. I want the web page to count the amount of the requests, and to display up to date information about the button (which is on every single MQTT message). How do i get started with this? I would appreciate any help. thanks very much.

Answer 1

You have to install aws-sdk for JS and aws-iot-device-sdk both from npm. Then, you can use something like this:
import { CognitoIdentityCredentials, CognitoIdentity, config, Credentials } from "aws-sdk";
import { device } from "aws-iot-device-sdk";
const mqttClient = null;
config.region = "us-east-1";
config.credentials = new CognitoIdentityCredentials({
IdentityPoolId: "us-east-1:your-pool-id",
});
config.getCredentials((err) => {
if (err) console.log(err);
else {
const cId = new CognitoIdentity();
cId.getCredentialsForIdentity({
IdentityId: config.credentials.identityId
})
.promise()
.then(result => {
mqttClient = new device({
region: "us-east-1",
host: "your-iot-host.iot.us-east-1.amazonaws.com",
clientId: "any client id",
protocol: 'wss',
accessKeyId: result.Credentials.AccessKeyId,
secretKey: result.Credentials.SecretKey,
sessionToken: result.Credentials.SessionToken
});
mqttClient.on("connect", () => {
mqttClient.subscribe("some id for your web app - can be any string");
});
mqttClient.on("reconnect", () => {
});
mqttClient.on("message", (topic, payload) => {
console.log(String.fromCharCode.apply(null, payload));
const message = JSON.parse(String.fromCharCode.apply(null, payload));
console.log("message: " + message);
});
});
}
});
Please note that the above code uses ES6 features. You might have to use some compiler like babel to convert it to ES5 which many more browsers support.