test.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. {% extends "bootstrap/base.html" %}
  2. {% block title %}Flask-MQTT example{% endblock %}
  3. {% block styles %}
  4. {{ super() }}
  5. {% endblock %}
  6. {% block scripts %}
  7. {{ super() }}
  8. <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
  9. <script type="text/javascript" charset="utf-8">
  10. $(document).ready(function() {
  11. //建立連接
  12. var socket = io.connect('http://' + document.domain + ':' + location.port);
  13. MQTT();
  14. var duration = 1000 * 60 * 2;
  15. var timer = setInterval(MQTT, duration);
  16. function MQTT(){
  17. console.log("start to send mqtt...");
  18. var topic = $('#topic').val();
  19. var command = $('#command').val();
  20. var qos = $('#qos').val();
  21. var data = '{"topic": "' + topic + '", "command": "' + command + '", "qos": ' + qos + '}';
  22. //發送訊息到app.py
  23. socket.emit('publish', data=data);
  24. };
  25. //接收回傳訊息
  26. socket.on('mqtt_message', function(data) {
  27. var text = data['payload'];
  28. var $textarea = $('#subscribe_messages');
  29. $textarea.val($textarea.val() + text + '\n');
  30. console.log("recieve mqtt message...");
  31. })
  32. });
  33. </script>
  34. {% endblock %}
  35. {% block content %}
  36. <div class="container-fluid">
  37. <div class="row">
  38. <div class="col-xs-12">
  39. <h1>LandGreen-MQTT</h1>
  40. </div>
  41. </div>
  42. <div class="row">
  43. <div class="col-xs-6">
  44. <div class="panel panel-default">
  45. <div class="panel-heading">
  46. <h3 class="panel-title">Publish MQTT Message</h3>
  47. </div>
  48. <div class="panel-body">
  49. <div class="col-xs-12">
  50. <div class="row">
  51. <div class="form-horizontal">
  52. <div class="form-group">
  53. <label class="control-label col-xs-4">Topic: </label>
  54. <div class="col-xs-8">
  55. <input id="topic" class="form-control" value="AISKY/AppleFarm/MK-G/9c:65:f9:1e:66:b3">
  56. </div>
  57. </div>
  58. <div class="form-group">
  59. <label class="control-label col-xs-4">Command: </label>
  60. <div class="col-xs-8">
  61. <input id="command" class="form-control">
  62. </div>
  63. </div>
  64. <div class="form-group">
  65. <label class="control-label col-xs-4">Qos: </label>
  66. <div class="col-xs-8">
  67. <select id="qos" class="form-control">
  68. <option value=0>0</option>
  69. <option value=1>1</option>
  70. <option value=2>2</option>
  71. </select>
  72. </div>
  73. </div>
  74. <div class="form-group">
  75. <div class="col-xs-8 col-xs-offset-4">
  76. <button id="publish" class="btn btn-primary">Publish</button>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. <div class="col-xs-6">
  86. <div class="panel panel-default">
  87. <div class="panel-heading">
  88. <h3 class="panel-title">Subscribe MQTT Messages</h3>
  89. </div>
  90. <div class="panel-body">
  91. <div class="col-xs-12">
  92. <div class="row">
  93. <div class="form-horizontal">
  94. <div class="form-group">
  95. <label class="control-label col-xs-4">Messages:</label>
  96. <div class="col-xs-8">
  97. <textarea id="subscribe_messages" class="form-control" rows=10></textarea>
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. {% endblock %}