用於Web應用程序的MQTT

我正在嘗試使用MQTT Broker開發簡單的Web應用程序。我使用Mosca作爲localhost的代理。首先，我嘗試了一個從網絡複製的程序，以瞭解MQTT的工作原理。這是該計劃。用於Web應用程序的MQTT

home.html的

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
    <script src="mqttws31.js" type="text/javascript"></script> 
    <script src="client.js"> 
    </script> 
    </head> 
    <body onload="init();"> 
    </body> 
</html>

client.js

var wsbroker = "127.0.0.1"; //mqtt websocket enabled broker 
    var wsport = 3000 // port for above 
    var client = new Paho.MQTT.Client(wsbroker, wsport, 
     "myclientid_" + parseInt(Math.random() * 100, 10)); 
    client.onConnectionLost = function (responseObject) { 
     alert("connection lost: " + responseObject.errorMessage); 
    }; 
    client.onMessageArrived = function (message) { 
     alert(message);//.destinationName, ' -- ', message.payloadString); 
    }; 
    var options = { 
     timeout: 3, 
     onSuccess: function() { 
     alert("mqtt connected"); 
     // Connection succeeded; subscribe to our topic, you can add multile lines of these 
     client.subscribe('temp/random', {qos: 1}); 

     //use the below if you want to publish to a topic on connect 
     message = new Paho.MQTT.Message("Hello"); 
     message.destinationName = "/World"; 
     client.send(message); 

     }, 
     onFailure: function (message) { 
     alert("Connection failed: " + message.errorMessage); 
     } 
    }; 
    function init() { 
     client.connect(options); 
    }

這個程序工作時，我試圖在TE網絡瀏覽器訪問home.html的。我可以看到莫斯卡的控制檯中也生成了日誌。但是，如同可見，這個程序並不是一個很好的例子。出於這個原因，我試圖做一些改變，使代碼可讀。

這是我的代碼後，我所做的更改 -

home.html的

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
    <script src="mqttws31.js" type="text/javascript"></script> 
    <script src="client.js"> 
    </script> 
    </head> 
    <body onload="init();"> 
    </body> 
</html>

client.js

var wsbroker = "127.0.0.1"; 
var wsport = 3000 

var client = new Paho.MQTT.Client(wsbroker, wsport,"myclientid_" + parseInt(Math.random() * 100, 10)); 

    function onMessageArrived(message) { 
     document.write(message.payload); 
    }; 

    function onSuccess() { 
     document.write("Connected"); 
     client.subscribe('temp/random'); 
    }; 

    function onFailure(message) { 
     document.write("Connection Failed. Error : " + message.errorMessage); 
    }; 

    function onConnectionLost(message) { 
     document.write("Connection Lost. Error : " + message.errorMessage); 
    }; 

    var options = { 
     timeout: 3, 
     onSuccess: onSuccess, 
     onFailure = onFailure 
    }; 

    function init() { 
     client.connect(options); 
     client.onMessageArrived = onMessageArrived, 
     client.onConnectionLost = onConnectionLost, 

    };

我有一個Python腳本運行的出版價值。但是，沒有輸出正在生成。我檢查了Mosca控制檯，並注意到沒有建立新的連接。我剛開始學習Javascript。我不確定我的新代碼在語法上是否正確。

來源

2015-09-25 apoorvasomani

兩個簡單的問題：1.'wsport'（2號線）應該有一個分號。 2.當函數init（）不在塊內時，是否有原因縮進了'var client'下面的函數？ – jvc26

1.我添加了分號。雖然沒有幫助。 2.沒有特定的縮進原因。 – apoorvasomani

從[docs]（http://www.eclipse.org/paho/files/jsdoc/symbols/Paho.MQTT.Client.html#connect）它表明'onConnectionLost'和'onMessageArrived'似乎不是被'connect'方法接受 - 我無法在接受的參數中看到它們。不知道這是否會解決您的問題，但似乎有潛在的相關性。同樣來自[官方示例]（https://www.eclipse.org/paho/clients/js/），他們將回調處理程序設置爲連接調用的單獨進程。 – jvc26

情侶變化將解決這個問題。

首先，你有onFailure =代替onFailure:

接下來，你要設置你的client.onMessageArrived和client.onConnectionLost你調用connect之前，而不是之後。

這2個變化導致

var wsbroker = "127.0.0.1"; 
var wsport = 3000 

var client = new Paho.MQTT.Client(wsbroker, wsport,"myclientid_" + parseInt(Math.random() * 100, 10)); 

    function onMessageArrived(message) { 
     document.write(message.payload); 
    }; 

    function onSuccess() { 
     document.write("Connected"); 
     client.subscribe('temp/random'); 
    }; 

    function onFailure(message) { 
     document.write("Connection Failed. Error : " + message.errorMessage); 
    }; 

    function onConnectionLost(message) { 
     document.write("Connection Lost. Error : " + message.errorMessage); 
    }; 

    var options = { 
     timeout: 3, 
     onSuccess: onSuccess, 
     onFailure: onFailure, 
    }; 

    function init() { 
    console.log('connecting') 
     client.onMessageArrived = onMessageArrived, 
     client.onConnectionLost = onConnectionLost, 
     client.connect(options); 

    };

來源

2016-05-11 14:15:51

用於Web應用程序的MQTT

回答

相關問題