2015-03-03 107 views
1

我在我的機器上運行了mosquitto MQTT代理。我想從瀏覽器運行MQTT客戶端。這是我在一個Django應用程序都做:來自瀏覽器的WebSocket連接建立錯誤

<html> 
    <head> 
    <title>Mosquitto Websockets</title> 
    {% load staticfiles %} 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script src="{% static 'js/mqttws31-min.js' %}" type="text/javascript"></script> 
    <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script> 
    <script src="{% static 'js/config.js' %}" type="text/javasacript"></script> 
    <script type="text/javascript"> 
    var mqtt; 
    var reconnectTimeout = 2000; 

    function MQTTconnect() { 
     host = '127.0.0.1'; 
     port = 1883; 
     useTLS = false; 
     cleansession = true; 
     username = null; 
     password = null; 
     mqtt = new Paho.MQTT.Client(host, port, 
        "myclientid_" + parseInt(Math.random() * 100, 10)); 

     /*mqtt = new Messaging.Client(
         host, 
         port, 
         "web_" + parseInt(Math.random() * 100, 
         10)); 
     */ 
     var options = { 
      timeout: 3, 
      useSSL: useTLS, 
      cleanSession: cleansession, 
      onSuccess: onConnect, 
      onFailure: function (message) { 
       $('#status').val("Connection failed: " + message.errorMessage + "Retrying"); 
       setTimeout(MQTTconnect, reconnectTimeout); 
      } 
     }; 

     mqtt.onConnectionLost = onConnectionLost; 
     mqtt.onMessageArrived = onMessageArrived; 

     if (username != null) { 
      options.userName = username; 
      options.password = password; 
     } 
     console.log("Host="+ host + ", port=" + port + " TLS = " + useTLS + " username=" + username + " password=" + password); 
     mqtt.connect(options); 
    } 

    function onConnect() { 
     $('#status').val('Connected to ' + host + ':' + port); 
     // Connection succeeded; subscribe to our topic 
     mqtt.subscribe(topic, {qos: 0}); 
     $('#topic').val(topic); 
    } 

    function onConnectionLost(response) { 
     setTimeout(MQTTconnect, reconnectTimeout); 
     $('#status').val("connection lost: " + responseObject.errorMessage + ". Reconnecting"); 

    }; 

    function onMessageArrived(message) { 

     var topic = message.destinationName; 
     var payload = message.payloadString; 

     $('#ws').prepend('<li>' + topic + ' = ' + payload + '</li>'); 
    }; 


    $(document).ready(function() { 
     MQTTconnect(); 
    }); 

    </script> 
    </head> 
    <body> 
    <h1>Mosquitto Websockets</h1> 
    <div> 
     <div>Subscribed to <input type='text' id='topic' disabled /> 
     Status: <input type='text' id='status' size="80" disabled /></div> 

     <ul id='ws' style="font-family: 'Courier New', Courier, monospace;"></ul> 
    </div> 
    </body> 
</html> 

我得到

WebSocket connection to 'ws://127.0.0.1:1883/mqtt' failed: Error during WebSocket handshake: net::ERR_CONNECTION_RESET mqttws31-min.js:15 
Host=127.0.0.1, port=1883 TLS = false username=null password=null (index):47 

我是新來這個使我無法解決這個問題。任何幫助?

編輯1: 我調整了配置文件,現在它成功連接到test.mosquitto.org:8080。我訂閱了#,但無法檢索發佈的消息。我認爲功能onMessageArrived(message)不起作用。控制檯中沒有錯誤,因此無法識別任何錯誤。

enter image description here

回答

1

這裏是運行在「過度的WebSockets MQTT」網站所在的服務器的URL可以作爲一個客戶端,這樣就可以發佈,然後有自己的瀏覽器充當客戶端訂閱特定主題

http://test.mosquitto.org/ws.html 

它可能讓你梳理出連接問題......這裏還是實現類似功能的其他庫的NodeJS

https://www.npmjs.com/package/mqtt-ws 
+0

我試圖連接到'test.mosquitto.org'並得到這個錯誤:WebSocket連接到'ws://test.mosquitto.org/:1883/mqtt'失敗:WebSocket握手期間出錯:意外的響應代碼:404 – toothie 2015-03-03 14:11:23

3

是否確定已將代理配置爲接受端口1883上的websockets連接?默認情況下,你會希望這是監聽MQTT連接,而不是websockets。

嘗試把你的配置文件如下:

listener 8080 
protocol websockets 

正如斯科特說,你可以試試你的客戶端連接到test.mosquitto.org:8080,看看它是否工作。

+1

你也確定你正在運行mosqitto版本1.4 – hardillb 2015-03-03 08:28:16

+0

我試圖連接到'test.mosquitto.org'並得到這個錯誤:WebSocket連接到'ws://test.mosquitto.org/:1883/mqtt'失敗:錯誤在WebSocket握手期間:意外的響應代碼:404。 – toothie 2015-03-03 12:24:48

+0

另外,我在/etc/mosquitto/conf.d中創建了一個local.conf,並在其中放置了2個設置,並將WebSocket連接到'ws://127.0.0.1:1883/mqtt'失敗:WebSocket握手期間出錯:net :: ERR_CONNECTION_RESET – toothie 2015-03-03 12:27:19

相關問題