MQTT over WebSocket で画像を表示 #mqtt

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

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

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

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形式の画像を表示する