VPS に Mosquitto をインストールしてブラウザと IoT デバイス間で双方向通信を行う (3)

// MQTT_VPS.js
// MQTT over WebSocket with TLS

const clientId = "BROWSER_" + Math.random().toString(16).substring(2, 8)
const connectUrl = "wss://domain-name:8884/mqtt";
var caFile;

//CA ファイル読み込み 
fetch('./ISRG_Root_X1.pem')
  .then(response => response.text())
  .then(text => {
   caFile = text;
   console.log(caFile);
});

//MQTT option, topic, qos パラメータ設定
const options = {
  keepalive: 60,
  clientId: clientId,
  clean: true,
  connectTimeout: 30 * 1000,
  username: "username",
  password: "password",
  reconnectPeriod: 1000,
  rejectUnauthorized: true, 
  ca: caFile,
  path: '/mqtt',
}
const topic = "MQTT topic";
const qos = 0;

var date2 = "";
var payload = "WebSocket mqtt test" //payload 初期値
var msg_subscribe = "";           //subscribe したメッセージ全文
var msg_publish = "";       //publish するメッセージ初期値

//接続準備
console.log("connecting mqtt client")
const client = mqtt.connect(connectUrl, options)

//接続エラー処理
client.on("error", (err) => {
  console.log("Connection error: ", err)
  document.getElementById("msg_mqtt").innerHTML = "Connection error: ", err
  client.end()
  window.location.reload();
})

//再接続処理
client.on("reconnect", () => {
  console.log("Reconnecting...")
  document.getElementById("msg_mqtt").innerHTML = "Reconnecting..."
})

//接続処理
client.on("connect", () => {
  console.log("Client connected:" + clientId)
  document.getElementById("msg_mqtt").innerHTML = "Client connected:" + clientId
})

//メッセージをサブスクライブして画面に表示する
//   https://github.com/mqttjs/MQTT.js#event-message
client.on("message", (topic, payload) => { 
    //payload を String 形式に変換して msg_subscribe に代入する
    msg_subscribe = payload.toString();
    document.getElementById("msg_sub").innerHTML = msg_subscribe;
    console.log("Received Message: "+msg_subscribe+"\nOn topic: "+topic );
  }
)

//Web ページ(全リソース)が完全に読み込まれたら実行する関数
window.onload = function () {
  sub_msg();  //サブスクライブする関数の呼び出し 
  get_time(); //時刻取得
}

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++//
//                       ここから繰り返し処理                                                      //
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++//
var repeat_duration = 1000;
  setInterval(function(){
  get_time();
},repeat_duration);
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++//

//--------------------- ここから　ボタンbt_offをクリックした時の処理 -----------------------------//
function bt_offClicked(elment){
  const buf = "{\"date\":\""+date2+"\",\"client\":\"BROWSER\",\"state\":\"NULL\",\"control\":\"OFF_\"}"
  pub_msg(buf);    
}

//---------------------- ここから　ボタンbt_onをクリックした時の処理 -----------------------------//
function bt_onClicked(element){
  const buf = "{\"date\":\""+date2+"\",\"client\":\"BROWSER\",\"state\":\"NULL\",\"control\":\"ON__\"}"
  pub_msg(buf);
}

//------------------------ ここから メッセージ msg_publish をパブリッシュする関数 -------------------//
function pub_msg(msg_publish){
  payload = msg_publish;
  client.publish(topic, payload, { qos }, (error) => {
    if (error) {
      console.error(error)
    }
  })
  document.getElementById("msg_pub").innerHTML = payload.toString();
  return;
}

//------------------------ ここから メッセージをサブスクライブする関数 -------------------------------//
function sub_msg(){
  client.subscribe(topic, { qos }, (error) => {
    if (error) {
      console.log("Subscribe error:", error)
      return
    }
    console.log(`Subscribe to topic ${topic}`);
  })
  return;
}

//------------------------ ここから 現在時刻を取得する関数 -----------------------------------------//
function get_time(){
  const date1 = new Date();
  date2 = date1.getFullYear() + "-" + 
  ("0"+(date1.getMonth() + 1)).slice(-2)  + "-" + 
  ("0"+(date1.getDate())).slice(-2) + "T" +
  ("0"+(date1.getHours())).slice(-2) + ":" + 
  ("0"+(date1.getMinutes())).slice(-2) + ":" + 
  ("0"+(date1.getSeconds())).slice(-2) + "." +
  String(date1.getMilliseconds()).padStart(3, "0") ;
  //ミリセカンド( 0 ～ 999 整数)は 0 で埋めて 3 桁に揃える
  document.getElementById("msg_time").innerHTML = date2;
  return;
}

/* MQTT_VPS.css 
   MQTT over WebSocket with TLS
*/
@charset "utf-8";
@media screen and (max-width:1080px) {
	/*　画面サイズが1080px以下の場合ここの記述が適用される　*/
  main { width: 100%; }
}
body { font-family: "Arial", "メイリオ"; }
h1 { font-size:16px; font-weight: normal; text-align: center; }
h2 { font-size:16px; font-weight: normal; text-align: center; }
textarea { resize: none; }
/* # id 参照 */
#msg_time{ text-align: center; }
#msg_pub_ttl{
  font-size: 12px; display:flex; justify-content: center;
}
#msg_sub_ttl{
  font-size: 12px; display:flex; justify-content: center;
}
#msg_pub {
  display: inline-block;
  min-width:340px; min-height: 65px; line-height: 2;
  font-size: 12px; color:black;
  background-color:white; padding: 10px; border-radius: 5%; border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #999;
}
#msg_sub {
  display:inline-flex;
  min-width:340px;  min-height: 65px; line-height: 2;
  font-size: 12px; color:black; 
  background-color:white; padding: 10px; border-radius: 5%; border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #999;
}
/* . class 参照 */
.inline_1{ text-align: center; font-size: 32px; }
.inline_2{ text-align: center; font-size: 12px; }
.inline_3{ text-align: center; font-size: 12px; }
.inline_4{ text-align: center; font-size: 12px; }
.bt_on {
  margin-right:50px;
  display:inline-block; width:140px; height:64px; padding:10px 10px; vertical-align: middle;
  text-decoration:none; font-size:32px; font-weight: bold ;background-color:aliceblue; color: gray;
  border-color:gray; border-radius: 4px;
}
.bt_on:active {
  background-color: tomato;color:aliceblue;
  -webkit-transform: translateY(0px); transform: translateY(0px);
}
.bt_off {
  display:inline-block; width:140px; height:64px; padding:10px 10px; vertical-align: middle;
  text-decoration:none; font-size:32px; font-weight: bold; background-color:aliceblue; color:gray;
  border-color:gray; border-radius: 4px;
}
.bt_off:active {
  background-color: teal; color:aliceblue;
  -webkit-transform: translateY(0px); transform: translateY(0px); 
}