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
| <span><!</span><span>DOCTYPE html</span><span>></span> <span><</span><span>html</span><span>></span>
<span><</span><span>head</span><span>></span> <span><</span><span>meta </span><span>charset</span><span>="utf-8"</span> <span>/></span> <span><</span><span>title</span><span>></</span><span>title</span><span>></span> <span><!--</span><span> <script src=“https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js” type=“text/javascript”> </script> </span><span>--></span> <span><</span><span>script </span><span>src</span><span>="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"</span><span> type</span><span>="text/javascript"</span><span>></</span><span>script</span><span>></span>
<span><</span><span>script</span><span>></span> <span>var</span><span> hostname </span><span>=</span> <span>'</span><span>127.0.0.1</span><span>'</span><span>, </span><span>//</span><span>'192.168.1.2',</span> <span> port </span><span>=</span> <span>8083</span><span>, clientId </span><span>=</span> <span>'</span><span>client-mao2080</span><span>'</span><span>, timeout </span><span>=</span> <span>5</span><span>, keepAlive </span><span>=</span> <span>100</span><span>, cleanSession </span><span>=</span> <span>false</span><span>, ssl </span><span>=</span> <span>false</span><span>, </span><span>//</span><span> userName = 'mao2080', </span> <span>//</span><span> password = '123', </span> <span> topic </span><span>=</span> <span>'</span><span>/World</span><span>'</span><span>; client </span><span>=</span> <span>new</span><span> Paho.MQTT.Client(hostname, port, clientId); </span><span>//</span><span>建立客户端实例 </span> <span>var</span><span> options </span><span>=</span><span> { invocationContext: { host: hostname, port: port, path: client.path, clientId: clientId }, timeout: timeout, keepAliveInterval: keepAlive, cleanSession: cleanSession, useSSL: ssl, </span><span>//</span><span> userName: userName, </span> <span>//</span><span> password: password, </span> <span> onSuccess: onConnect, onFailure: </span><span>function</span><span> (e) { console.log(e); s </span><span>=</span> <span>"</span><span>{time:</span><span>"</span> <span>+</span> <span>new</span><span> Date().Format(</span><span>"</span><span>yyyy-MM-dd hh:mm:ss</span><span>"</span><span>) </span><span>+</span> <span>"</span><span>, onFailure()}</span><span>"</span><span>; console.log(s); } }; client.connect(options); </span><span>//</span><span>连接服务器并注册连接成功处理事件 </span> <span>function</span><span> onConnect() { console.log(</span><span>"</span><span>onConnected</span><span>"</span><span>); s </span><span>=</span> <span>"</span><span>{time:</span><span>"</span> <span>+</span> <span>new</span><span> Date().Format(</span><span>"</span><span>yyyy-MM-dd hh:mm:ss</span><span>"</span><span>) </span><span>+</span> <span>"</span><span>, onConnected()}</span><span>"</span><span>; console.log(s); client.subscribe(topic); }
client.onConnectionLost </span><span>=</span><span> onConnectionLost;
</span><span>//</span><span>注册连接断开处理事件 </span> <span> client.onMessageArrived </span><span>=</span><span> onMessageArrived;
</span><span>//</span><span>注册消息接收处理事件 </span> <span>function</span><span> onConnectionLost(responseObject) { console.log(responseObject); s </span><span>=</span> <span>"</span><span>{time:</span><span>"</span> <span>+</span> <span>new</span><span> Date().Format(</span><span>"</span><span>yyyy-MM-dd hh:mm:ss</span><span>"</span><span>) </span><span>+</span> <span>"</span><span>, onConnectionLost()}</span><span>"</span><span>; console.log(s); </span><span>if</span><span> (responseObject.errorCode </span><span>!==</span> <span>0</span><span>) { console.log(</span><span>"</span><span>onConnectionLost:</span><span>"</span> <span>+</span><span> responseObject.errorMessage); console.log(</span><span>"</span><span>连接已断开</span><span>"</span><span>); } }
</span><span>function</span><span> onMessageArrived(message) { s </span><span>=</span> <span>"</span><span>{time:</span><span>"</span> <span>+</span> <span>new</span><span> Date().Format(</span><span>"</span><span>yyyy-MM-dd hh:mm:ss</span><span>"</span><span>) </span><span>+</span> <span>"</span><span>, onMessageArrived()}</span><span>"</span><span>; console.log(s); console.log(</span><span>"</span><span>收到消息:</span><span>"</span> <span>+</span><span> message.payloadString); }
</span><span>function</span><span> send() { </span><span>var</span><span> s </span><span>=</span><span> document.getElementById(</span><span>"</span><span>msg</span><span>"</span><span>).value; </span><span>if</span><span> (s) { s </span><span>=</span> <span>"</span><span>{time:</span><span>"</span> <span>+</span> <span>new</span><span> Date().Format(</span><span>"</span><span>yyyy-MM-dd hh:mm:ss</span><span>"</span><span>) </span><span>+</span> <span>"</span><span>, content:</span><span>"</span> <span>+</span><span> (s) </span><span>+</span> <span>"</span><span>, from: web console}</span><span>"</span><span>; message </span><span>=</span> <span>new</span><span> Paho.MQTT.Message(s); message.destinationName </span><span>=</span><span> topic; client.send(message); document.getElementById(</span><span>"</span><span>msg</span><span>"</span><span>).value </span><span>=</span> <span>""</span><span>; } }
</span><span>var</span><span> count </span><span>=</span> <span>0</span><span>;
</span><span>function</span><span> start() { window.tester </span><span>=</span><span> window.setInterval(</span><span>function</span><span> () { </span><span>if</span><span> (client.isConnected) { </span><span>var</span><span> s </span><span>=</span> <span>"</span><span>{time:</span><span>"</span> <span>+</span> <span>new</span><span> Date().Format(</span><span>"</span><span>yyyy-MM-dd hh:mm:ss</span><span>"</span><span>) </span><span>+</span> <span>"</span><span>, content:</span><span>"</span> <span>+</span><span> (count</span><span>++</span><span>) </span><span>+</span> <span>"</span><span>, from: web console}</span><span>"</span><span>; message </span><span>=</span> <span>new</span><span> Paho.MQTT.Message(s); message.destinationName </span><span>=</span><span> topic; client.send(message); } }, </span><span>1000</span><span>); }
</span><span>function</span><span> stop() { window.clearInterval(window.tester); }
Date.prototype.Format </span><span>=</span> <span>function</span><span> (fmt) { </span><span>//</span><span>author: meizz </span> <span>var</span><span> o </span><span>=</span><span> { </span><span>"</span><span>M+</span><span>"</span><span>: </span><span>this</span><span>.getMonth() </span><span>+</span> <span>1</span><span>, </span><span>//</span><span>月份 </span> <span>"</span><span>d+</span><span>"</span><span>: </span><span>this</span><span>.getDate(), </span><span>//</span><span>日 </span> <span>"</span><span>h+</span><span>"</span><span>: </span><span>this</span><span>.getHours(), </span><span>//</span><span>小时 </span> <span>"</span><span>m+</span><span>"</span><span>: </span><span>this</span><span>.getMinutes(), </span><span>//</span><span>分 </span> <span>"</span><span>s+</span><span>"</span><span>: </span><span>this</span><span>.getSeconds(), </span><span>//</span><span>秒 </span> <span>"</span><span>q+</span><span>"</span><span>: Math.floor((</span><span>this</span><span>.getMonth() </span><span>+</span> <span>3</span><span>) </span><span>/</span> <span>3</span><span>), </span><span>//</span><span>季度 </span> <span>"</span><span>S</span><span>"</span><span>: </span><span>this</span><span>.getMilliseconds() </span><span>//</span><span>毫秒 </span> <span> }; </span><span>if</span><span> (</span><span>/</span><span>(y+)</span><span>/</span><span>.test(fmt)) fmt </span><span>=</span><span> fmt.replace(RegExp.$</span><span>1</span><span>, (</span><span>this</span><span>.getFullYear() </span><span>+</span> <span>""</span><span>).substr(</span><span>4</span> <span>-</span><span> RegExp.$</span><span>1</span><span>.length)); </span><span>for</span><span> (</span><span>var</span><span> k </span><span>in</span><span> o) </span><span>if</span><span> (</span><span>new</span><span> RegExp(</span><span>"</span><span>(</span><span>"</span> <span>+</span><span> k </span><span>+</span> <span>"</span><span>)</span><span>"</span><span>).test(fmt)) fmt </span><span>=</span><span> fmt.replace(RegExp.$</span><span>1</span><span>, (RegExp.$</span><span>1</span><span>.length </span><span>==</span> <span>1</span><span>) </span><span>?</span><span> (o[ k]) : ((</span><span>"</span><span>00</span><span>"</span> <span>+</span><span> o[k]).substr((</span><span>""</span> <span>+</span><span> o[k]).length))); </span><span>return</span><span> fmt; } </span><span></</span><span>script</span><span>></span> <span></</span><span>head</span><span>></span>
<span><</span><span>body</span><span>></span> <span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="msg"</span> <span>/></span> <span><</span><span>input </span><span>type</span><span>="button"</span><span> value</span><span>="Send"</span><span> onclick</span><span>="send()"</span> <span>/></span> <span><</span><span>input </span><span>type</span><span>="button"</span><span> value</span><span>="Start"</span><span> onclick</span><span>="start()"</span> <span>/></span> <span><</span><span>input </span><span>type</span><span>="button"</span><span> value</span><span>="Stop"</span><span> onclick</span><span>="stop()"</span> <span>/></span> <span></</span><span>body</span><span>></span>
<span></</span><span>html</span><span>></span>
|