MQTT WebSocket 连接失败

Question

我是编程新手，遇到了障碍。我正在做一个 DRTLS 项目并且遇到了问题。每当我运行我的代码并在我的 Chrome 浏览器的控制台中查看时，我不断得到与 'ws://192.168.0.156:1883/' 的 WebSocket 连接失败：”。有高手帮忙吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.0.min.js"
    crossorigin="anonymous"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.0.min.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.0.min.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.0.min.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.0.min.js"
        crossorigin="anonymous"></script>
    <script type="text/javascript">
        Bokeh.set_log_level("info");
    </script>
</head>
<body>
  <div id="map0"></div>
  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
  <script>
    if(window.screen.width > 600){
        var width = window.screen.width/2 - 40
    }else{
        var width = window.screen.width
    }
    var height = 700;
    var i = 0;
    async function fetch_plot(){
        const response = await fetch('/api-Map-w='+width+'&h='+height);
        var item = await response.json();
        Bokeh.embed.embed_item(item, "map0");
    }
    async function fetch_path(count, startPoint, endPoint){
        document.getElementById("map" + count).remove();
        var elemDiv = document.createElement('div');
        count = count + 1;
        elemDiv.id = "map" + count;
        document.body.appendChild(elemDiv);
        const response = await fetch('/api-Path-s='+startPoint+'&e='+endPoint);
        var newItem = await response.json();
        Bokeh.embed.embed_item(newItem, "map" + i);
    }
    fetch_plot();
    // var options = {
    // mqtt_user: "dwmuser",
    // mqtt_password: "dwmpass",
    //     will: {
    //         mqtt_topic_prefix: 'dwm',
    //     }
    // }
    const client = mqtt.connect("ws://192.168.0.156:1883", { clientId: "ee9ea05d56814fd9992bf1ef34119683", username: "dwmuser", password: "dwmpass" });

    // var client = mqtt.connect('ws://192.168.0.156:1883', options=options);
    // console.log(client);
    
    // function insertpoint(name, x, y) {
    //     var ds = Bokeh.documents[0].get_model_by_name(name)
    //     var len = ds.data.x.push(x)
    //     ds.data.y.push(y)
    //     if(len > 5){
    //         ds.data.x.shift()
    //         ds.data.y.shift()
    //     }
    //     ds.change.emit()
    // }
  </script>
</body>

Answer 1

对于几乎所有 MQTT 代理（包括 mosquitto），您需要为本机 MQTT 和基于 WebSockets 的 MQTT 配置单独的侦听器。

本机 MQTT 的默认端口是 1883，您将无法从浏览器使用 Paho JavaScript MQTT 客户端库连接到此端口。

您需要确保您的代理正确配置了 MQTT over WebSockets 侦听器，然后确保在连接时使用网页中的连接端口。

屏幕截图中的 MQTTfx 正在连接到本机 MQTT。

Answer 2

事实证明，WebSocket 使用与 MQTT 不同的端口。这可以在 mosquitto.conf 文件下检查。对于那些要来此线程寻找 WebSocket 端口号的人，默认情况下是 15675。

MQTT WebSocket 连接失败

MQTT WebSocket Connection Failed

websocket

mqtt