Not receiving payloads from mosquitto via websockets - websocket

Question

I'm using a VPS and I'm sending data from my Arduino to the server via MQTT.
Mosquitto print payloads via terminal successfully but when I try to print it in real time via a web page nothing happens.
Knowing that I've already allowed websockets in Mosquitto conf, if I run :
sudo netstat -plnt
I get :
tcp 0 0 0.0.0.0:1883 0.0.0.0:* LISTEN
13248/mosquitto
tcp 0 0 0.0.0.0:1884 0.0.0.0:* LISTEN
20169/mosquitto
tcp6 0 0 :::1883 :::* LISTEN 13248/mosquitto
the topic I'm sending name : /pression and the code I'm using is:
<script>
var websocket="myserver.ovh.net";
var port= 1884;
var user="username";
var pass="password";
client = new Paho.MQTT.Client(websocket, port, "innovation");
// set callback handlers
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
var options = {
useSSL: false,
userName: user,
password: pass,
onSuccess:onConnect,
onFailure:doFail
}
// connect the client
client.connect(options);
// called when the client connects
function onConnect() {
// Once a connection has been made, make a subscription and send a
message.
document.getElementById("connstatus").innerHTML = "Mqtt Connected";
console.log("Mqtt Connected");
client.subscribe("/pression");
}
function doFail(e){
console.log(e);
}
// called when the client loses its connection
function onConnectionLost(responseObject) {
document.getElementById("connstatus").innerHTML = "Mqtt Not Connected";
if (responseObject.errorCode !== 0) {
console.log("onConnectionLost:"+responseObject.errorMessage);
}
}
function onMessageArrived(message) {
console.log("Pression is :");
document.getElementById("connstatus").innerHTML = message.payloadString;
console.log(message.payloadString);
}
</script>
when I run the script it says "Mqtt Connected" than nothing happened.
However if I run in the terminal :
mosquitto_sub -t '/pression'
I get the pressure values.
if I keep the web page on for some minutes I get this message :
Mqtt Connected
test.html:76 onConnectionLost:AMQJS0008I Socket closed.
config file :
# 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 /var/run/mosquitto.pid
persistence true
persistence_location /var/lib/mosquitto/
log_dest file /var/log/mosquitto/mosquitto.log
include_dir /etc/mosquitto/conf.d
#password_file /etc/mosquitto/passwd
#allow_anonymous false
listener 1884
protocol websockets
mosquitto log :
1557922249: Config loaded from /etc/mosquitto/mosquitto.conf.
1557922249: Opening websockets listen socket on port 1884.
1557922254: New client connected from xx.xx.11.163 as innovation (c1, k60, u'innovation').
1557922279: Socket error on client innovation, disconnecting.
1557922279: New client connected from xx.xx.11.163 as innovation (c1, k60, u'innovation').
1557922318: Socket error on client innovation, disconnecting.
1557922318: New client connected from xx.xx.11.163 as innovation (c1, k60, u'innovation').
1557922346: Socket error on client innovation, disconnecting.
1557922346: New client connected from xx.xx.11.163 as innovation (c1, k60, u'innovation').
1557922363: Socket error on client innovation, disconnecting.
1557922364: New client connected from xx.xx.11.163 as innovation (c1, k60, u'innovation').
1557922463: Socket error on client innovation, disconnecting.

Answer 1

OK, the problem here is most likely that you are using a fixed client id (innovation) in the HTML.
You can only ever have 1 client connected with a given client id, so the broker will disconnect the oldest one when a new client with the same id connects (e.g. when you reload the page).
Try changing the connection line to something like this:
var clientID = "innovation_" + new Date().getTime();
client = new Paho.MQTT.Client(websocket, port, clientID);