1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
| <!DOCTYPE html> <html>
<head> <meta charset="utf-8" /> <title></title> <!-- <script src=“https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js” type=“text/javascript”> </script> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
<script> var hostname = 'ip', port = 8083, clientId = 'client-' + Math.ceil(Math.random() * 1000), timeout = 5, keepAlive = 100, cleanSession = false, ssl = false, userName = 'mao2080', password = '123', topic = '/World'; client = new Paho.MQTT.Client(hostname, port, clientId); //建立客户端实例 var options = { invocationContext: { host: hostname, port: port, path: client.path, clientId: clientId }, timeout: timeout, keepAliveInterval: keepAlive, cleanSession: cleanSession, useSSL: ssl, userName: userName, password: password, onSuccess: onConnect, onFailure: function (e) { console.log(e); s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onFailure()}"; console.log(s); } }; client.connect(options); //连接服务器并注册连接成功处理事件 function onConnect() { console.log("onConnected"); s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onConnected()}"; console.log(s); client.subscribe(topic); }
client.onConnectionLost = onConnectionLost;
//注册连接断开处理事件 client.onMessageArrived = onMessageArrived;
//注册消息接收处理事件 function onConnectionLost(responseObject) { console.log(responseObject); s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onConnectionLost()}"; console.log(s); if (responseObject.errorCode !== 0) { console.log("onConnectionLost:" + responseObject.errorMessage); console.log("连接已断开"); } }
function onMessageArrived(message) { s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onMessageArrived()}"; console.log(s); console.log("收到消息:" + message.payloadString); }
function send() { var s = document.getElementById("msg").value; if (s) { s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", content:" + (s) + ", from: web console}"; message = new Paho.MQTT.Message(s); message.destinationName = topic; client.send(message); document.getElementById("msg").value = ""; } }
var count = 0;
function start() { window.tester = window.setInterval(function () { if (client.isConnected) { var s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", content:" + (count++) + ", from: web console}"; message = new Paho.MQTT.Message(s); message.destinationName = topic; client.send(message); } }, 1000); }
function stop() { window.clearInterval(window.tester); } function startLED() { message = new Paho.MQTT.Message("1"); message.destinationName = topic; client.send(message); } function stopLED() { message = new Paho.MQTT.Message("0"); message.destinationName = topic; client.send(message); }
Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[ k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } </script> </head>
<body> <input type="text" id="msg" /> <input type="button" value="Send" onclick="send()" /> <input type="button" value="Start" onclick="start()" /> <input type="button" value="Stop" onclick="stop()" />
<input type="button" value="开灯" onclick="startLED()" /> <input type="button" value="关灯" onclick="stopLED()" /> </body>
</html>
|