Guest User

Untitled

a guest
Oct 24th, 2017
94
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.10 KB | None | 0 0
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Mosquitto Websockets</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta charset="utf-8">
  8. <script src="mqttws31.js" type="text/javascript"></script>
  9. <script src="jquery.min.js" type="text/javascript"></script>
  10. <script src="config.js" type="text/javascript"></script>
  11.  
  12. <script type="text/javascript">
  13. var mqtt;
  14. var reconnectTimeout = 2000;
  15. var selectedtopic='#';
  16. function MQTTconnect(selectedtopic) {
  17. if (typeof path == "undefined") {
  18. path = '/mqtt';
  19. }
  20. mqtt = new Paho.MQTT.Client(
  21. host,
  22. port,
  23. path,
  24. "web_" + parseInt(Math.random() * 100, 10)
  25. );
  26. var options = {
  27. timeout: 3,
  28. useSSL: useTLS,
  29. cleanSession: cleansession,
  30. onSuccess: onConnect,
  31. onFailure: function (message) {
  32. $('#status').val("Connection failed: " + message.errorMessage + "Retrying");
  33. setTimeout(MQTTconnect, reconnectTimeout);
  34. }
  35. };
  36.  
  37. mqtt.onConnectionLost = onConnectionLost;
  38. mqtt.onMessageArrived = onMessageArrived;
  39.  
  40. if (username != null) {
  41. options.userName = username;
  42. options.password = password;
  43. }
  44. console.log("Host="+ host + ", port=" + port + ", path=" + path + " TLS = " + useTLS + " username=" + username + " password=" + password);
  45. mqtt.connect(options);
  46. }
  47.  
  48. function onConnect() {
  49. $('#status').val('Connected to ' + host + ':' + port + path);
  50. // Connection succeeded; subscribe to our topic
  51. console.log("subscribed to "+selectedtopic);
  52. mqtt.subscribe(selectedtopic, {qos: 0});
  53. $('#topic').val(selectedtopic);
  54. }
  55.  
  56. function onConnectionLost(response) {
  57. setTimeout(MQTTconnect, reconnectTimeout);
  58. $('#status').val("connection lost: " + responseObject.errorMessage + ". Reconnecting");
  59.  
  60. };
  61.  
  62. function onMessageArrived(message) {
  63.  
  64. var topic = message.destinationName;
  65. var payload = message.payloadString;
  66.  
  67. $('#ws').prepend('<li>' + topic + ' = ' + payload + '</li>');
  68. };
  69.  
  70.  
  71. $(document).ready(function() {
  72. MQTTconnect(selectedtopic);
  73. $('#topic').change(function()
  74. {
  75. selectedtopic = $(this).val();
  76. console.log("change "+selectedtopic);
  77. })
  78. });
  79.  
  80. </script>
  81. </head>
  82. <body>
  83. <h1>Things</h1>
  84. <div>
  85. <div>Location
  86. <select id="topic">
  87. <option value="#">All</option>
  88. <option value="emergency-room/#">Emergency room</option>
  89. <option value="ward/#">Ward</option>
  90. </select>
  91. Status: <input type='text' id='status' size="80" disabled /></div>
  92.  
  93. <ul id='ws' style="font-family: 'Courier New', Courier, monospace;"></ul>
  94. </div>
  95. </body>
  96. </html>
Add Comment
Please, Sign In to add comment