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>

Solution

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.