<body> <input id="_message" width="300px" height="200px"> <button id="_sendBtn">發送消息</button> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </body> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" ></script> <script src="https://unpkg.com/mqtt/dist/mqtt.min.js" ></script> <script type="text/javascript"> $(function () { const options = { clean: true, connectTimeout: 4000, clientId: 'client_id', username: "admin", password: 'public' } const connectUrl = 'ws://192.168.1.201:8083/mqtt' const client = mqtt.connect(connectUrl, options); //當重新連接啟動觸發回調 client.on('reconnect', () => { $("#div1").text("正在重連....."); }); //連接斷開后觸發的回調 client.on("close",function () { $("#div1").text("客戶端已斷開連接....."); }); //從broker接收到斷開連接的數據包后發出。MQTT 5.0特性 client.on("disconnect",function (packet) { console.log("從broker接收到斷開連接的數據包....."+packet); }); //客戶端脫機下線觸發回調 client.on("offline",function () { $("#div1").text("客戶端脫機下線....."); }); //當客戶端無法連接或出現錯誤時觸發回調 client.on("error",(error) =>{ $("#div1").text("客戶端出現錯誤....."+error); }); //當客戶端發送任何數據包時發出。這包括published()包以及MQTT用於管理訂閱和連接的包 client.on("packetsend",(packet)=>{ /** * packet包數據格式 * * cmd: "publish" * dup: false * messageId: 18467 * payload: "111" * qos: 2 * retain: false * topic: "/tra_topic" */ console.log("客戶端已發出數據包....."+packet.payload); }); //當客戶端接收到任何數據包時發出。這包括來自訂閱主題的信息包以及MQTT用於管理訂閱和連接的信息包 client.on("packetreceive",(packet)=>{ console.log(packet); }); //成功連接后觸發的回調 client.on("connect",function (connack) { $("#div1").text("成功連接上服務器"+new Date()); /** * 訂閱某主題 * client.subscribe(topic/topic array/topic object, [options], [callback]) * topic:一個string類型的topic或者一個topic數組,也可以是一個對象 * options */ // client.subscribe("/tra_topic",{qos:2}); }); $("#_sendBtn").on('click',function () { //發布數據 var message = $("#_message").val(); if (message==''){ alert("請輸入發送內容"); return; } client.publish("/tra_topic",message,{qos:2}); $("#div2").text("發送成功"); $("#_message").val(""); }) //當客戶端接收到發布消息時觸發回調 /** * topic:收到的數據包的topic * message:收到的數據包的負載playload * packet:收到的數據包 */ client.on('message', (topic, message,packet) => { $("#div3").text("客戶端收到訂閱消息,topic="+topic+";消息數據:"+message+";數據包:"+packet); }); //頁面離開自動斷開連接 $(window).bind("beforeunload",()=>{ $("#div1").text("客戶端窗口關閉,斷開連接"); client.disconnect(); }) }); </script>
如果mqtt.js的速度慢，可以換成
https://cdn.bootcdn.net/ajax/libs/mqtt/4.1.0/mqtt.min.js