こちらのプログラムを書き換えて、jQuery を使わないようにしました。
MQTT Subscribe で受け取った温度と湿度をブラウザーに表示する
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript MQTT WebSocket Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/paho-mqtt.js"></script>
<script src="mqtt_receive.js"></script>
</head>
<body>
<div class="contents">
<table>
<tr>
<th>温度</th>
<th>湿度</th>
<th>時刻</th>
</tr>
<tr>
<td><div id="temp">---</id></td>
<td><div id="humi">---</id></td>
<td><div id="timex">---</id></td>
</tr>
</table>
</div>
<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: Dec/22/2022<br />
</blockquote>
</body>
</html>
mqtt_receive.js
// ---------------------------------------------------------------
// mqtt_receive.js
//
// Dec/22/2022
//
// ---------------------------------------------------------------
var mqtt;
const reconnectTimeout = 2000;
const host="test.mosquitto.org"
const port=8080
const topic = "example/testTopic"
// ---------------------------------------------------------------
window.onload = ()=>
{
document.querySelector("#outarea_aa").innerHTML =
"*** mqtt_receive.js *** start ***"
MQTTconnect()
document.querySelector("#outarea_hh").innerHTML =
"*** mqtt_receive.js *** end ***"
}
// ---------------------------------------------------------------
function onFailure(message)
{
console.log("Connection Attempt to Host "+host+"Failed");
setTimeout(MQTTconnect, reconnectTimeout);
}
// ---------------------------------------------------------------
function onMessageArrived(msg)
{
console.log("*** onMessageArrived ***")
var out_msg="Message received "+msg.payloadString+"<br>"
out_msg=out_msg+"Message received Topic "+msg.destinationName
console.log(out_msg)
const str_out = "<h2>" + msg.payloadString + "</h2>"
document.querySelector("#outarea_cc").innerHTML = str_out
const json_str = msg.payloadString
const unit_aa = JSON.parse(json_str)
const nowx = new Date()
document.querySelector("#outarea_ff").innerHTML = "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
document.querySelector("#temp").innerHTML = ""+ unit_aa["temp"] + " C"
document.querySelector("#humi").innerHTML = ""+ unit_aa["humi"] + " %"
document.querySelector("#timex").innerHTML = ddx
document.querySelector("#outarea_dd").innerHTML = ddx
}
// ---------------------------------------------------------------
function onConnect() {
// Once a connection has been made, make a subscription and send a message.
document.querySelector("#outarea_bb").innerHTML = "*** Connected ***"
console.log("Connected ")
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.Client(host,port,cname)
var options = {
timeout: 3,
onSuccess: onConnect,
onFailure: onFailure,
}
mqtt.onMessageArrived = onMessageArrived
mqtt.connect(options)
console.log("*** MQTTconnect end ***")
}
// ---------------------------------------------------------------