furuya02/MQTT_LexClient_index.html

## MQTT_LexClient_index.html
<!DOCTYPE html>
<html>

<head>
  <h1><center>Order Flowers</center></h1>
  <script src="mqtt.js"></script>
  <script src="https://sdk.amazonaws.com/js/aws-sdk-2.283.1.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="aws-iot-sdk-browser-bundle.js"></script>

  <style language="text/css">

    div#logView {
      background-color:darkturquoise;
      border: 1px solid #ccc;
      padding: 4px;
      width: 400px;
      height: 500px;
      overflow: scroll;
    }

    input#message {
	padding: 4px;
	font-size: 1em;
	width: 400px
    }
    log {
	margin: 4px;
	padding: 4px;
	border-radius: 4px;
	min-width: 50%;
	max-width: 85%;
    }
    log.req {
	float: left;
	background-color:white;
    }
    log.res {
	text-align: right;
	float: right;
	background-color:beige;
    }
    log.err {
	text-align: right;
	float: right;
	color: #f77;
    }

    </style>
</head>

<body>
  <script>
    $('#message').focus();
    const userId = 'id-' + Date.now(); // ブラウザの更新時に初期化する
    const PoolId = 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
    const region = 'ap-northeast-1';
    const endpoint = 'xxxxxxxxxxx-ats.iot.ap-northeast-1.amazonaws.com';
    const topic = "Sample_Topic";
    const clientId = "sample_id";

    const iot = new Mqtt();
    iot.init(PoolId, region, endpoint, topic, clientId);
    iot.onRecive = async data => {
        const param = JSON.parse(data);
        appendLog(param.body, param.type);
    }
    function sendMessage() {
        const message = $('#message').val().trim();
        if(message.length > 0) {
            $('#message').val('');
            iot.Send({ type: 'req', userId: userId, body: message });
        }
        return false;
    }
    function appendLog(message, className) {
      $('<log>', { class:className, text:message }).appendTo('#logView');
      $('#logView').scrollTop(self.innerHeight);
    }

  </script>
  <div id="logView"></div>
  <form onsubmit="return sendMessage();">
    <input type="text" id="message" size="80" value="">
  </form>
</body>
</html>
	<!DOCTYPE html>
	<html>

	<head>
	<h1><center>Order Flowers</center></h1>
	<script src="mqtt.js"></script>
	<script src="https://sdk.amazonaws.com/js/aws-sdk-2.283.1.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="aws-iot-sdk-browser-bundle.js"></script>

	<style language="text/css">

	div#logView {
	background-color:darkturquoise;
	border: 1px solid #ccc;
	padding: 4px;
	width: 400px;
	height: 500px;
	overflow: scroll;
	}

	input#message {
	padding: 4px;
	font-size: 1em;
	width: 400px
	}
	log {
	margin: 4px;
	padding: 4px;
	border-radius: 4px;
	min-width: 50%;
	max-width: 85%;
	}
	log.req {
	float: left;
	background-color:white;
	}
	log.res {
	text-align: right;
	float: right;
	background-color:beige;
	}
	log.err {
	text-align: right;
	float: right;
	color: #f77;
	}

	</style>
	</head>

	<body>
	<script>
	$('#message').focus();
	const userId = 'id-' + Date.now(); // ブラウザの更新時に初期化する
	const PoolId = 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
	const region = 'ap-northeast-1';
	const endpoint = 'xxxxxxxxxxx-ats.iot.ap-northeast-1.amazonaws.com';
	const topic = "Sample_Topic";
	const clientId = "sample_id";

	const iot = new Mqtt();
	iot.init(PoolId, region, endpoint, topic, clientId);
	iot.onRecive = async data => {
	const param = JSON.parse(data);
	appendLog(param.body, param.type);
	}
	function sendMessage() {
	const message = $('#message').val().trim();
	if(message.length > 0) {
	$('#message').val('');
	iot.Send({ type: 'req', userId: userId, body: message });
	}
	return false;
	}
	function appendLog(message, className) {
	$('<log>', { class:className, text:message }).appendTo('#logView');
	$('#logView').scrollTop(self.innerHeight);
	}

	</script>
	<div id="logView"></div>
	<form onsubmit="return sendMessage();">
	<input type="text" id="message" size="80" value="">
	</form>
	</body>
	</html>