0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

MQTT over WebSocket で画像を表示

Last updated at Posted at 2021-08-17

次のシステムを構築するための検証です。
Grove IoT スターターキット for SORACOM で作るリモートカメラシステム

スクリプトで、jpg を変換した JSON ファイルを publish し、
ページが subscribe でその JSON を受け取って画像を表示します。

次のようなページが出来ます。

mqtt_over_websocket.png

publish をするスクリプト

#
#	go_slide.sh
#
#						Aug/18/2021
#
BROKER="example.com"
TOPIC="sample/imageTopic"
#
for json in {"camera_aa.json","camera_bb.json","camera_cc.json"}
do
	sleep 3
	mosquitto_pub -h ${BROKER} -p 1883 -t ${TOPIC} -f ${json}
done

jpg を JSON に変換する方法はこちらの jpg_to_json.py です。
リモートカメラシステム(MQTT ブローカーの検証)

ページ

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>
<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/18/2021 AM 08:06<br />
</blockquote>
</body>	
</html>
mqtt_jpg.js
// ---------------------------------------------------------------
//	mqtt_jpg.js
//
//						Aug/18/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("#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
}
	 
// ---------------------------------------------------------------

参考ページ
Base64形式の画像を表示する

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?