html 基于AWS IoT的无服务器JS-Webapp Pub / Sub演示

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 基于AWS IoT的无服务器JS-Webapp Pub / Sub演示相关的知识，希望对你有一定的参考价值。

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']
                }
            }
        ]
    }
};

{
  "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"
  }
}

"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);
}
<!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>

以上是关于html 基于AWS IoT的无服务器JS-Webapp Pub / Sub演示的主要内容，如果未能解决你的问题，请参考以下文章

如何在 AWS Lambda 上的无服务器应用程序中存储和使用 HTML 模板（使用 AWS SAM）？

如何将使用Sharp库的无服务器框架应用程序部署到AWS？

从上传到 S3 的文件触发的无服务器框架和 AWS Step Functions（AWS 状态机）

部署具有不同 yml 文件名的无服务器 AWS 提供商

亚马逊AWS IoT平台分析

使用现有策略的 AWS Gateway 中的无服务器白名单 IP