ブラウザーから MQTT Publish でブザーを鳴らす

次のページで、ブザーをオン、オフさせます。
![mqtt_buzzer_aug13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/8691aaa5-082e-b907-083c-022031ff594c.png)

![IMG_20210813_144936.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/6675d085-4898-5b9e-3539-70c8bcc8a634.jpeg)

WioLTE のプログラム

フォルダー構造

```text
$ tree mqtt_buzzer/
mqtt_buzzer/
├── mqtt_buzzer.ino
├── setupLTE.ino
└── setup_mqtt.ino
```

```text:mqtt_buzzer.ino
// ---------------------------------------------------------------
/*
	mqtt_buzzer.ino

					Aug/20/2021
*/
// ---------------------------------------------------------------
#include <WioLTEforArduino.h>
#include <WioLTEClient.h>
#include <PubSubClient.h>
#include <ArduinoJson.h>
#include <stdio.h>

#define MQTT_SERVER_HOST  "example.com"
#define MQTT_SERVER_PORT  (1883)

#define ID                "WioLTE"
#define OUT_TOPIC         "sample/imageTopic"
#define IN_TOPIC          "sample/imageTopic"

#define BUZZER_PIN      (WIOLTE_D38)
#define BUZZER_ON_TIME  (100)

WioLTE Wio;
WioLTEClient WioClient(&Wio);
PubSubClient MqttClient;

int icount = 0;
// ---------------------------------------------------------------
void callback(char* topic, byte* payload, unsigned int length)
{
	DynamicJsonDocument doc(1024);
	SerialUSB.println("");
	payload[length] = '\0';
	String msg = String((char*) payload);
	SerialUSB.println(msg);
	deserializeJson(doc, msg);

	const char* buzzer = doc["buzzer"];

	if (strstr(buzzer,"on"))
		{
		char str_out[] = "*** callback *** on ***";
		SerialUSB.println(str_out);
		MqttClient.publish(OUT_TOPIC, str_out);
		Wio.LedSetRGB(0, 1, 0);
		digitalWrite(BUZZER_PIN, HIGH);
		delay(BUZZER_ON_TIME);
		digitalWrite(BUZZER_PIN, LOW);
		}
	else if (strstr(buzzer,"off"))
		{	
		char str_out[] = "*** callback *** off ***";
		SerialUSB.println(str_out);
		MqttClient.publish(OUT_TOPIC, str_out);
		Wio.LedSetRGB(1, 0, 0);
		digitalWrite(BUZZER_PIN, LOW);
		}
}

// ---------------------------------------------------------------
void setup()
{
	setupLTE();

	pinMode(BUZZER_PIN, OUTPUT);

	setup_mqtt_proc();

	Wio.LedSetRGB(1, 1, 1);

	SerialUSB.println("*** Setup completed *** Aug/20/2021 PM 18:00 ***");
}

// ---------------------------------------------------------------
void loop()
{
	DynamicJsonDocument doc(1024);
	char data_json[128];

	if ((icount % 500) == 0)
		{
		doc["icount"] = icount;
		doc["uptime"] = millis() / 1000;
		serializeJson(doc, data_json);

		SerialUSB.println(data_json);
		}

	MqttClient.loop();

	icount++;
}

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

```text:setup_mqtt.ino
// ---------------------------------------------------------------
/*
	setup_mqtt.ino

					Aug/20/2021
*/
// ---------------------------------------------------------------
void setup_mqtt_proc()
{
	SerialUSB.println("### Connecting to MQTT server \""MQTT_SERVER_HOST"\"");
	MqttClient.setServer(MQTT_SERVER_HOST, MQTT_SERVER_PORT);
	MqttClient.setCallback(callback);
	MqttClient.setClient(WioClient);
	if (!MqttClient.connect(ID))
		{
		SerialUSB.println("### ERROR! connect ###");
		}
	else
		{
		MqttClient.subscribe(IN_TOPIC);
		SerialUSB.println("*** subscribe ***");
		}
}

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

setupLTE.ino はこちら
[UDP で温度と湿度を Harvest に送る](https://qiita.com/ekzemplaro/items/690faa6f56003272299f)

Web ページ

```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_buzzer.js"></script>
</head>
<body>
<div class="contents">


<blockquote>
	<button id="on">on</button>
	<button id="off">off</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_buzzer.js
// ---------------------------------------------------------------
//	mqtt_publish.js
//
//						Aug/13/2021
//
// ---------------------------------------------------------------
var mqtt;
const reconnectTimeout = 2000;
const host="example.com"
const topic = "sample/imageTopic"
const port=8080
		
// ---------------------------------------------------------------
jQuery  (function ()
{
	jQuery("#outarea_aa").text("*** mqtt_publish.js *** start ***")

	MQTTconnect()

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

		buzzer_send_proc(buzzer)
		})

	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 ")
	mqtt.subscribe(topic)
}

// ---------------------------------------------------------------
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 buzzer_send_proc(buzzer)
{
	jQuery("#outarea_dd").text("*** buzzer_send_proc *** " + buzzer)

	var unit_aa = {}
	unit_aa["buzzer"] = buzzer
	const json_str = JSON.stringify(unit_aa)
	message = new Paho.MQTT.Message(json_str)
	message.destinationName = topic
	message.retained=true
	mqtt.send(message)
}

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