リモートカメラシステム　（Web ページ部分）

次のシステムを構成するサブシステムです。
[Grove IoT スターターキット for SORACOM で作るリモートカメラシステム](https://qiita.com/ekzemplaro/items/541b82908cec46f6aa7b)

制作開始日

>2021年8月16日
>システムを構築している様子を報告していきます。
>必要な技術については見通しが立っているので、それを組み合わせていきます。

完成日

>2021年8月23日

![mqtt_aug22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/4945df7a-99de-b18f-5c01-38563b98bc3c.png)


```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<title>MQTT over WebSocket</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js"></script>
<script src="mqtt_jpg.js"></script>
</head>
<body>
<h2>MQTT over WebSocket</h2>
<div class="contents">
****
</div>
<blockquote>
<div class="area_time">***</div>
</blockquote>
<button id="shutter">Shutter</button>
<hr />
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
<br />
<blockquote>
Version: Aug/19/2021 AM 08:06<br />
</blockquote>
</body>	
</html>
```

```js:mqtt_jpg.js
// ---------------------------------------------------------------
//	mqtt_jpg.js
//
//						Aug/19/2021
//
// ---------------------------------------------------------------
var mqtt;
const reconnectTimeout = 2000;
const host="example.com"
const port=8080
		
// ---------------------------------------------------------------
jQuery  (function ()
{
	jQuery("#outarea_aa").text("*** mqtt_jpg.js *** start ***")

	MQTTconnect()

	jQuery ("button#shutter").click (function ()
		{
		jQuery ("#" + this.id).css ("color","blue")
		jQuery("#outarea_cc").text("*** shutter clicked ***")
		jQuery("#outarea_dd").text("")

		shutter_send_proc("on")

		setTimeout(function()
			{
			jQuery("#outarea_cc").text("")
			jQuery("#outarea_dd").text("*** shutter cleared ***")
			jQuery ("button").css ("color","black")
			shutter_send_proc("off")
			},2000)	
		})

	jQuery("#outarea_hh").text("*** mqtt_jpg.js *** end ***")
})

// ---------------------------------------------------------------
function onFailure(message)
{
	console.log("Connection Attempt to Host "+host+"Failed");
	setTimeout(MQTTconnect, reconnectTimeout);
}

// ---------------------------------------------------------------
function onMessageArrived(msg)
{
//	var out_msg="Message received "+msg.payloadString+"<br>"
//	out_msg=out_msg+"Message received Topic "+msg.destinationName
//	console.log(out_msg)

	display_proc(msg.payloadString)

//	const str_out = "<h2>" + msg.payloadString + "</h2>"
//	jQuery("#outarea_cc").html(str_out)

	const nowx = new Date()
	jQuery("#outarea_ff").text("check aaa")

	const Year = nowx.getFullYear()

	const Month = nowx.getMonth()+1
	const Datex = nowx.getDate()
	const Hour = nowx.getHours()
	const Min = nowx.getMinutes()
	const Sec = nowx.getSeconds()

	const ddx = Year + "年" + Month + "月" + Datex + "日" + Hour + ":" + Min + ":" + Sec

	jQuery(".area_time").text(ddx)

}
		
// ---------------------------------------------------------------
function display_proc(str_payload)
{
	const json_str = str_payload
	const unit_aa = JSON.parse(json_str)

	if ("base64" in unit_aa)
		{
		jQuery("#outarea_ee").text("base64 exist ***")

		var str_out = '<img src="data:image/png;base64,'
		str_out += unit_aa["base64"] + '">'

		jQuery(".contents").html(str_out)
		}
	else
		{
		jQuery("#outarea_ee").text("base64 does'nt exist ***")
		}
}

// ---------------------------------------------------------------
function onConnect() {
	  // Once a connection has been made, make a subscription and send a message.
	
	jQuery("#outarea_bb").text("*** Connected ***")
	console.log("Connected ")
	const topic = "sample/imageTopic"

		mqtt.subscribe(topic)
//		message = new Paho.MQTT.Message("Hello World")
//		message.destinationName = "sensor2"
//		message.retained=true
//		mqtt.send(message)
	  }

// ---------------------------------------------------------------
function MQTTconnect()
{
	console.log("connecting to "+ host +" "+ port)
	var x=Math.floor(Math.random() * 10000) 
	var cname="orderform-"+x
	mqtt = new Paho.MQTT.Client(host,port,cname)
		//document.write("connecting to "+ host)
	var options = {
			timeout: 3,
			onSuccess: onConnect,
			onFailure: onFailure,
			 }
	mqtt.onMessageArrived = onMessageArrived
		
	mqtt.connect(options) //connect
}
	 
// ---------------------------------------------------------------
function shutter_send_proc(on_off)
{
	jQuery("#outarea_ee").text("*** shutter_send_proc ***")

	const topic = "sample/imageTopic"
	var unit_aa = {}
	unit_aa["shutter"] = on_off
	const json_str = JSON.stringify(unit_aa)
	message = new Paho.MQTT.Message(json_str)
	message.destinationName = topic
	message.retained=true
	mqtt.send(message)
}

// ---------------------------------------------------------------
```

シャッターオンを確認するスクリプト

```sh:go_subscribe.sh
BROKER="example.com"
TOPIC="sample/imageTopic"
#
mosquitto_sub -d -t orz -h ${BROKER} --topic ${TOPIC}
#
```

実行結果

```text
$ ./go_subscribe.sh 
Client (null) sending CONNECT
Client (null) received CONNACK (0)
Client (null) sending SUBSCRIBE (Mid: 1, Topic: orz, QoS: 0, Options: 0x00)
Client (null) sending SUBSCRIBE (Mid: 1, Topic: sample/imageTopic, QoS: 0, Options: 0x00)
Client (null) received SUBACK
Subscribed (mid: 1): 0, 0
Client (null) received PUBLISH (d0, q0, r1, m0, 'sample/imageTopic', ... (17 bytes))
{"shutter":"off"}
Client (null) received PUBLISH (d0, q0, r0, m0, 'sample/imageTopic', ... (16 bytes))
{"shutter":"on"}
Client (null) received PUBLISH (d0, q0, r0, m0, 'sample/imageTopic', ... (17 bytes))
{"shutter":"off"}
```