test.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
  7. </head>
  8. <body>
  9. <pre>脫皮機出料儲豆槽狀態_1:{{get_Peel_Output_status[0]}}</pre>
  10. <pre>脫皮機出料儲豆槽狀態_2:{{get_Peel_Output_status[1]}}</pre>
  11. <pre>發酵貨櫃入料儲豆槽狀態_1:{{get_Ferment_Input[0]}}</pre>
  12. <pre>發酵貨櫃入料儲豆槽狀態:{{get_Ferment_Input[1]}}</pre>
  13. <input type ="button" onclick="javascript:location.href='/'" value="回首頁"></input>
  14. <script>
  15. // the URL or IP address of the MQTT server to connect to
  16. //const mqtt_server = "54.248.68.32"
  17. const mqtt_server = "60.250.156.234"
  18. // the port of the MQTT server to connect to
  19. const mqtt_port = 8080
  20. // the MQTT topic to publish to
  21. const mqtt_pub_topic = "AISKY/Coffee/MK-G/b8:27:eb:7e:24:78";
  22. // the MQTT topic to subscribe to
  23. const mqtt_sub_topic = "AISKY/Coffee/MK-G/b8:27:eb:7e:24:78/Log";
  24. var client = false;
  25. // the function to be executed when connected to the MQTT broker
  26. function onConnect() {
  27. // once connected, start subscribing to the topic
  28. console.log("onConnect: start subscribing to the topic");
  29. client.subscribe(mqtt_sub_topic, { qos: Number(2) });
  30. }
  31. // the function to be executed when the message is received
  32. function onMessageArrived(message) {
  33. console.log("onMessageArrived:" + message.payloadString);
  34. // display received messages on the webpage
  35. document.getElementById("mqtt_monitor").innerText = message.payloadString;
  36. }
  37. // send the reboot command
  38. function publish_message_reboot() {
  39. var payload = {
  40. command: "reboot"
  41. }
  42. var message = new Paho.MQTT.Message(JSON.stringify(payload));
  43. message.destinationName = mqtt_pub_topic;
  44. message.qos = Number(2);
  45. client.send(message);
  46. }
  47. // send the report system information command
  48. function publish_message_system_info() {
  49. var payload = {
  50. command: "system_info"
  51. }
  52. var message = new Paho.MQTT.Message(JSON.stringify(payload));
  53. message.destinationName = mqtt_pub_topic;
  54. message.qos = Number(2);
  55. client.send(message);
  56. }
  57. function init() {
  58. // assign the function handler corresponding to each button
  59. document.getElementById("mqtt_reboot").addEventListener('click', publish_message_reboot);
  60. document.getElementById("mqtt_system_info").addEventListener('click', publish_message_system_info);
  61. // assign the client ID for MQTT broker authentication, you can assign it on your own
  62. var MQTT_CLIENT_ID = "iot_web_" + Math.floor((1 + Math.random()) * 0x10000000000).toString(16);
  63. // create a MQTT client instance
  64. // make sure the MQTT broker address and port number are correct
  65. // the port number should be used for websocket, not other protocol
  66. client = new Paho.MQTT.Client(mqtt_server, mqtt_port, '/ws', MQTT_CLIENT_ID);
  67. // the public MQTT broker "iot.eclipse.org" can be used for testing
  68. // client = new Paho.MQTT.Client("iot.eclipse.org", 80, '/ws', MQTT_CLIENT_ID);
  69. // the function to be executed when the message is received
  70. client.onMessageArrived = onMessageArrived;
  71. // connect to the MQTT broker
  72. client.connect({
  73. // if you don't use user name and password, just remove these lines
  74. userName: "aisky-server",
  75. password: "aisky",
  76. // the function to be executed when connected
  77. onSuccess:onConnect
  78. });
  79. }
  80. window.addEventListener('load', init, false);
  81. </script>
  82. <p>
  83. Project Name: AppleFarm<br><br>
  84. Publish Topic: AISKY/AppleFarm/MK-G/00:04:4b:e7:02:18<br><br>
  85. Subscribe Topic: AISKY/AppleFarm/MK-G/00:04:4b:e7:02:18/Log<br>
  86. </p>
  87. <div>
  88. <button id="mqtt_reboot">Reboot</button>
  89. <button id="mqtt_system_info">MQTT傳訊 No.A 清洗貨櫃出料至No.B發酵貨櫃入料儲豆槽</button>
  90. <button id="mqtt_system_info2">MQTT傳訊 No.B入料儲豆槽進行出豆作業No.FX發酵槽 進行入豆作業</button>
  91. </div><br>
  92. <div id="mqtt_monitor">
  93. </div>
  94. </body>
  95. </html