来自浏览器的 WebSocket 连接建立错误答案

【问题标题】：WebSocket connection establishment error from browser来自浏览器的 WebSocket 连接建立错误
【发布时间】：2015-03-03 02:34:15
【问题描述】：

我的机器上运行着 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

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

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

【问题讨论】：

标签： websocket mqtt mosquitto paho

【解决方案1】：

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

尝试将以下内容放入您的配置文件中：

listener 8080
protocol websockets

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

【讨论】：

另外你确定你运行的是 mosqitto 1.4 版
我尝试连接到“test.mosquitto.org”并收到此错误：WebSocket 连接到“ws://test.mosquitto.org/:1883/mqtt”失败：WebSocket 握手期间出错：意外响应代码：404。
另外，我在 /etc/mosquitto/conf.d 中创建了一个 local.conf 并在其中放置了以上 2 个设置，并获得了与 'ws://127.0.0.1:1883/mqtt' 的 WebSocket 连接失败：WebSocket 握手期间出错：net::ERR_CONNECTION_RESET
@hardillb 是的，我使用的是 1.4 版
Mosquitto 不会为本地 MQTT 和 websocket 连接重用相同的端口。默认的 1883 端口不允许 websocket 连接，您应该尝试使用 test.mosquitto.org 的 8080 端口。对于本地连接，您需要将侦听器添加到本地配置文件，然后连接到 localhost:8080 而不是 localhost:1883

【解决方案2】：

这是一个运行“MQTT over Websockets”服务器的站点，其中 URL 可以充当客户端，以便您可以发布，然后让您自己的浏览器充当订阅给定主题的客户端

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

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

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

【讨论】：

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

【解决方案3】：

根据你的评论@toothie

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

您发送的连接字符串格式似乎错误。你是如何建造它的？

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

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

也许有些东西对你有帮助。

【讨论】：