CODEWITHSUNDEEP
websocketmqtt
Zeng Jiawei
Zeng Jiawei

Reputation: 11

MQTT WebSocket Connection Failed

I am new to programming and having a roadblock. I am doing a DRTLS project and having issues with it. Whenever I run my code and view in Console of my Chrome browser I keep getting WebSocket connection to 'ws://192.168.0.156:1883/' failed:". Any pros could help out?

MQTT.fx Connection Profiles

WebSocket Connection Failed

<!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>

Upvotes: 0

Views: 7609

Answers (3)

mainak
mainak

Reputation: 2311

this config worked for me

const URL = "ws://x.xxx.xx.xxx:8000";

  mqtt.connect(URL, {
      connectTimeout: 5000,
      hostname: "x.xxx.xx.xxx",
      port: 8000,
      path: "/mqtt",
    });

Upvotes: 0

Zeng Jiawei
Zeng Jiawei

Reputation: 11

So as it turned out, WebSocket uses a different port from MQTT. This can be checked under mosquitto.conf file. For those who're going to come to this thread looking for the port number for WebSocket, it is 15675 by default.

Upvotes: 1

hardillb
hardillb

Reputation: 59781

For nearly all MQTT brokers (including mosquitto) you need to configure separate listeners for native MQTT and MQTT over WebSockets.

The default port for native MQTT is 1883, you will not be able to connect to this port using the Paho JavaScript MQTT client library from the browser.

You will need to make sure that your broker is correctly configured with a MQTT over WebSockets listener, then make sure you use the connect port in the web page when connecting.

MQTTfx in the screen shot is connecting to native MQTT.

Upvotes: 3

Related Questions