Mosquitto broker using Websockets on Raspberry Pi

TL;DR
Any ideas why websockets might not be working correctly for a Mosquitto broker working on a raspberry pi ?

Longer story:
I’m trying to install my own Mosquitto broker on a rasp 4 running Raspbian GNU/Linux 11 (bullseye) following these instructions
Installing the Mosquitto MQTT Server to the Raspberry Pi - Pi My Life Up)

I’m able to run my broker fine using port 1883 following the examples in the tutorial link above. I am not however able to get things working on websockets. I’m using websockets because i’m trying to link an MQTT app on the Pi to a GUI built using P5.js which runs on a browser. I need this all to be local since the device will not always be attached to the internet.

I have the following in my mosquitto.conf

Place your local configuration in /etc/mosquitto/conf.d/

A full description of the configuration file is at

/usr/share/doc/mosquitto/examples/mosquitto.conf.example

pid_file /run/mosquitto/mosquitto.pid

persistence true
persistence_location /var/lib/mosquitto/

log_dest file /var/log/mosquitto/mosquitto.log

include_dir /etc/mosquitto/conf.d
listener 9001
protocol websockets

I am starting mosquitto this way for test

sudo mosquitto -c mosquitto.conf

(I use sudo because otherwise it says ints not able to write the pid file)
I see the following in my /var/log/mosquitto/mosquitto.log

1665660690: mosquitto version 2.0.11 starting
1665660690: Config loaded from mosquitto.conf.
1665660690: Opening websockets listen socket on port 9001.

I then load my P5.js script on a browser on a. device thats on the same wifi network as my Rasberry pi.

This P5.js code uses **mqttws31.min.js ** to open an MQTT session over websockets. Here’s a fragment.


// MQTT client details:
let broker = {
  hostname: "test.mosquitto.org",
  port: 8081,
};
// MQTT client:
let client;
// client credentials:
let creds = {
  clientID: "p5Clientxyz", // choose whatever name you want
  userName: "public", // unique Key from token
  password: "public", // unique Secret from token
};
// topic to subscribe to when you connect:
let topic = "jcp5js/sendLift";

// ==== stuff omitted

function setup() {
  createCanvas(800, 800);

// ==== stuff omitted

  // Create an MQTT client:
  client = new Paho.MQTT.Client(
    broker.hostname,
    Number(broker.port),
    creds.clientID
  );
  // set callback handlers for the client:
  client.onConnectionLost = onConnectionLost;
  client.onMessageArrived = onMessageArrived;
  // connect to the MQTT broker:
  client.connect({
    onSuccess: onConnect, // callback function for when you connect
    userName: creds.userName, // username
    password: creds.password, // password
    useSSL: true, // use SSL
  });

  // called when the client connects
  function onConnect() {
    client.subscribe(topic);
    console.log("connected");
  }
// ==== stuff omitted -- rest of functional code

When I point it at test.mosquitto.org and port 8081 … it connects just fine

When I point it at 192.168.10.241 and port 9001 (the ip address of my pi)

the Javascript console says something like

Cannot connect to “192.168.10.241:9001”

Note: I apologize I dont have the exact message . I can post that this evening when I can get in the same wifi network

PHEW… sorry for the long explanation>> Again Any ideas why websockets might not be working correctly on a raspberry pi ?

Any help appreciated !
-jc

Hi John,
welcome to the Forum.
Looking into your config you are not specifiying any SSL/TLS options. This way the mosquitto will open an unencrypted Websocket. Which is in general a good start as adding TLS/SSL adds additional complexity and may cause different problems. So always good to start without encryption and add it later. The matching port using the same setup without encryption on the test.mosquitto.org would be 8090.
In your Paho-Client you are specifying to use SSL (using the useSSL: true). This way the Paho-Client expects to get SSL information he will not get from your broker. I would suggest to try it setting useSSL: false.

here’s the javascript console info


Default levels

1 Issue:
1


mqttws31.js:979 WebSocket connection to ‘wss://192.168.0.241:8081/mqtt’ failed:
Paho.MQTT.ClientImpl._doConnect @ mqttws31.js:979
Paho.MQTT.ClientImpl.connect @ mqttws31.js:849
Client.connect @ mqttws31.js:1799
setup @ sketch.js:68
_setup @ p5.js:64253
_start @ p5.js:64176
p5 @ p5.js:64529
_globalInit @ p5.js:63432
mqttws31.js:977 WebSocket connection to ‘wss://192.168.0.241:8081/mqtt’ failed:
Paho.MQTT.ClientImpl._doConnect @ mqttws31.js:977
Paho.MQTT.ClientImpl._disconnected @ mqttws31.js:1457
Paho.MQTT.ClientImpl._on_socket_error @ mqttws31.js:1345
(anonymous) @ mqttws31.js:157

here’s a few lines about where the error is

ClientImpl.prototype._doConnect = function (wsurl) {
// When the socket is open, this client will send the CONNECT WireMessage using the saved parameters.
if (this.connectOptions.useSSL) {
var uriParts = wsurl.split(“:”);
uriParts[0] = “wss”;
wsurl = uriParts.join(“:”);
}
this.connected = false;
if (this.connectOptions.mqttVersion < 4) {
this.socket = new WebSocket(wsurl, [“mqttv3.1”]);
} else {
this.socket = new WebSocket(wsurl, [“mqtt”]);
}
this.socket.binaryType = ‘arraybuffer’;

does that help ?