ブラウザーから MQTT Publish でボードの LED の点灯色を変える

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

![mqtt_publish.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/853121c7-87f4-e850-5e4f-c000dbb0bd2c.png)

WioLTE のプログラムはこちら
[MQTT を受信して ボードの LED の点灯色を変える](https://qiita.com/ekzemplaro/items/f629ac2e92dc1d65c5fa)

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

```html: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>
```

```js: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)
}

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