MQTT для веб-приложения

Я пытался разработать простую веб-приложение, используя MQTT Broker. Я использовал Mosca в качестве брокера на локальном хосте. Сначала я попробовал программу, скопированную из Интернета, чтобы посмотреть, как работает MQTT. Это программа.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); 
    }

Эта программа работала, когда я попытался получить доступ к home.html в тэ веб-браузер. Я мог видеть, как журнал создается на консоли Mosca. Однако, как видно, эта программа была не очень аккуратным примером. По этой причине я попытался внести несколько изменений, чтобы прочитать код.

Это мой код после того, как я сделал изменения -

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. Есть ли причина, по которой вы отклонили функции ниже «var client» и перед функцией 'init()', когда они не находятся внутри блока? – 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 перед вызовом подключения, а не после.

Те 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

MQTT для веб-приложения

ответ

Смежные вопросы