Question

我的机器上运行了mosquitto MQTT代理。我想从浏览器运行MQTT客户端。这就是我在Django应用程序中所做的：

<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

我是新手，所以我无法解决这个问题。有什么帮助吗？

EDIT1：我调整了配置文件，现在它成功连接到test.mosquitto.org:8080。我订阅了＃，但它无法检索已发布的消息。我认为函数onMessageArrived(message)不起作用。控制台中没有错误，因此无法识别任何错误。

enter image description here

Answer 1

您确定已将代理配置为接受端口1883上的websockets连接吗？默认情况下，您希望这是监听MQTT连接，而不是websockets。

尝试在配置文件中添加以下内容：

listener 8080
protocol websockets

正如斯科特所说，您可以尝试将您的客户端连接到test.mosquitto.org:8080以查看它是否有效。

Answer 2

这是一个运行＆＃34; MQTT over Websockets＆＃34; URL可以充当客户端的服务器，以便您可以发布，然后让您自己的浏览器充当订阅给定主题的客户端

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

它可能会让你分开连接问题......这里还有另一个实现类似功能的nodejs库

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

Answer 3

根据您的评论@toothie

“我尝试连接到'test.mosquitto.org'并收到此错误：与'ws：//test.mosquitto.org/：1883 / mqtt'的WebSocket连接失败：WebSocket握手期间出错：意外的响应代码： 404“

您正在发送的连接字符串格式错误。您是如何建造的？

对我来说，使用JSON对象定义实例库来分离关注点使我免于头痛：

{
    protocol: 'wss',
    host: `${process.env.MQTT_ENDPOINT}`,
    port: 9001,
    username: 'admin',
    password: '123'
}

也许对您有帮助。

浏览器的WebSocket连接建立错误

3 个答案: