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 Publish でボードの LED の点灯色を変える

Posted at

次のページを作成します。
ボタンをクリックすることで、LEDの色が変わります。

mqtt_publish.png

WioLTE のプログラムはこちら
MQTT を受信して ボードの LED の点灯色を変える

broker と topic は自分の環境に合わせて下さい。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<title>JavaScript MQTT WebSocket Example</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_publish.js"></script>
</head>
<body>
<div class="contents">


<blockquote>
	<button id="red">red</button>
	<button id="yellow">yellow</button>
	<button id="green">green</button>
</blockquote>

</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: Aug/13/2021<br />
</blockquote>
</body>	
</html>
mqtt_publish.js
// ---------------------------------------------------------------
//	mqtt_publish.js
//
//						Aug/13/2021
//
// ---------------------------------------------------------------
var mqtt;
const reconnectTimeout = 2000;
const host="test.mosquitto.org"
const topic = "example/testTopic"
const port=8080
		
// ---------------------------------------------------------------
jQuery  (function ()
{
	jQuery("#outarea_aa").text("*** mqtt_publish.js *** start ***")

	MQTTconnect()


jQuery ("button").click (function ()
{
const color = this.id
jQuery ("button").css ("color","black")
jQuery ("#" + this.id).css ("color","blue")

color_send_proc(color)
})


	jQuery("#outarea_hh").text("*** mqtt_publish.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)

	const str_out = msg.payloadString
	jQuery("#outarea_cc").text(str_out)
}
		
// ---------------------------------------------------------------
function onConnect()
{
	  // Once a connection has been made, make a subscription and send a message.
	
	jQuery("#outarea_bb").text("*** Connected ***")
	console.log("Connected ")

	color_send_proc("white")
}

// ---------------------------------------------------------------
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 color_send_proc(color)
{
	var unit_aa = {}
	unit_aa["led"] = color
	const json_str = JSON.stringify(unit_aa)
	mqtt.subscribe(topic)
	message = new Paho.MQTT.Message(json_str)
	message.destinationName = topic
	message.retained=true
	mqtt.send(message)
}

// ---------------------------------------------------------------
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?