2015-03-03 292 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

相关问题