Using The JavaScript MQTT Client With Websockets

I was testing the public broker test.mosquitto.org from a webpage using your JS client (http://www.steves-internet-guide.com/using-javascript-mqtt-client-websockets/) for WSS and TLS and it works fine. Then I installed the Mosquitto broker on my own server and configured it accordingly:

listener 9001
protocol websockets
allow_anonymous true
#password_file pw.txt
cafile certs\ca.crt
certfile certs\server.pem
keyfile certs\server.key
require_certificate false

The server uses a self-signed certificate.

Access via the MQTT Explorer (wss) works perfectly. However, access via your above-mentioned client always gives errors:

WebSocket connection to ‘wss://85.214.218.90:9001/mqtt’ failed:

It seems that the self-signed certificate on the server is not accepted by the client (?). Then why does it work with test.mosquitto.org? Maybe my conf file for the broker is not correct? It would be nice if I could get some ideas from you.

Many thanks.

I am using a local broker and I have configured for websockets. My config file is

allow_anonymous true
listener 1883
protocol mqtt
allow_anonymous true
listener 9001 0.0.0.0
protocol websockets

when I start the broker I get the correct message
C:\Program Files\mosquitto>mosquitto -v -c mos.conf
1657519617: mosquitto version 2.0.14 starting
1657519617: Config loaded from mos.conf.
1657519617: Opening ipv6 listen socket on port 1883.
1657519617: Opening ipv4 listen socket on port 1883.
1657519617: Opening websockets listen socket on port 9001.
1657519617: mosquitto version 2.0.14
When I give ‘Localhost’ in the java script for host, it connects.
var mqtt;
var recontime = 2000;
var host = ‘localhost’;
var port = 9001;
function onConnect()

But when I provide IPaddress of the system or 127.0.0.1, it fails to connect. I have tried adding the IP address or 0.0.0.0 after listener but no effect. I have opened the firewall and also tried disabling the fire wall. Can you please help

package com.hascode.tutorial.mqtt;

import java.io.IOException;
import java.util.Arrays;
import java.util.List;

import org.eclipse.paho.client.mqttv3.MqttClient;
import org.eclipse.paho.client.mqttv3.MqttConnectOptions;
import org.eclipse.paho.client.mqttv3.MqttException;
import org.eclipse.paho.client.mqttv3.MqttMessage;
import org.eclipse.paho.client.mqttv3.persist.MemoryPersistence;
import org.eclipse.paho.client.mqttv3.MqttCallback;
import org.eclipse.paho.client.mqttv3.IMqttDeliveryToken;

import io.moquette.interception.AbstractInterceptHandler;
import io.moquette.interception.InterceptHandler;
import io.moquette.interception.messages.InterceptPublishMessage;
import io.moquette.server.Server;
import io.moquette.server.config.ClasspathConfig;
import io.moquette.server.config.IConfig;

public class Main {
static MqttClient sampleClient;
static MqttClient sampleClient_RP;
static MqttClient sampleClient_RP2;
static MqttConnectOptions connOpts;
static MqttConnectOptions connOpts_RP;
static MqttConnectOptions connOpts_RP2;
static int qos = 1;
static int Exe_Flag=0;

static class PublisherListener extends AbstractInterceptHandler {
@Override
public void onPublish(InterceptPublishMessage message) {
String text_message = new String(message.getPayload().array());
//System.out.println(“moquette mqtt broker message intercepted, topic: ” + message.getTopicName()
// + “, content: ” + new String(message.getPayload().array()));
/*System.out.println(“******MESSAGE RECEIVED ” + message.getTopicName()
+ “, CONTENT: ” + text_message + “\n”);*/

System.out.println(“————————————————-“);
System.out.println(“| Received ****”);
System.out.println(“| Topic: “+message.getTopicName());
System.out.println(“| Message: “+text_message);
System.out.println(“| QoS: {1}”+message.getQos());
System.out.println(“————————————————-“);

}

public static class SimpleMqttCallBack implements MqttCallback {

public void connectionLost(Throwable throwable) {
System.out.println(“Connection to MQTT broker lost!”);
}

public void messageArrived(String s, MqttMessage mqttMessage) throws Exception {
System.out.println(“Message received:\n\t”+ new String(mqttMessage.getPayload()) );
}

public void deliveryComplete(IMqttDeliveryToken iMqttDeliveryToken) {
// not used in this example
}
}

public static void main(String[] args) throws InterruptedException, IOException {

// Creating a MQTT Broker using Moquette
final IConfig classPathConfig = new ClasspathConfig();

final Server mqttBroker = new Server();

final List userHandlers = Arrays.asList(new PublisherListener());
//final List userHandlers = Collections.singletonList(new PublisherListener());
mqttBroker.startServer(classPathConfig, userHandlers);

System.out.println(“moquette mqtt broker started, press ctrl-c to shutdown..”);
Runtime.getRuntime().addShutdownHook(new Thread() {
@Override
public void run() {
System.out.println(“stopping moquette mqtt broker..”);
mqttBroker.stopServer();
}
});

Thread.sleep(4000);

// Creating a MQTT Client using Eclipse Paho
String topic = “news”;
String content = “Hi, I am Global Coordinator from nida’s system! :D”;

//First Peer Node
String broker_RP = “tcp://10.103.72.87:1883”;
String clientId_RP = “Main_RP1″+broker_RP;
System.out.println(“clientId_RP =”+clientId_RP);

try {

/************************************RP CLIENT START**********************************/
sampleClient_RP = new MqttClient(broker_RP, clientId_RP, new MemoryPersistence());
connOpts_RP = new MqttConnectOptions();
connOpts_RP.setMqttVersion(MqttConnectOptions.MQTT_VERSION_3_1_1);
connOpts_RP.setCleanSession(true);
//connOpts_RP.setConnectionTimeout(1000);
connOpts_RP.setKeepAliveInterval(1000);
connOpts_RP.setAutomaticReconnect(true);

sampleClient_RP.connect(connOpts_RP);
System.out.println(“connected to system”);
sampleClient_RP.subscribe(“iot_data”, qos);
sampleClient_RP.subscribe(“service_execution”, qos);
sampleClient_RP.subscribe(“service_execution_RP1”, qos);
System.out.println(“Broker subscribed to topic iot_data”);

sampleClient_RP.setCallback( new SimpleMqttCallBack() {
public void connectionLost(Throwable throwable) {
System.out.println(“Here Connection to Raspberry Pi lost!”);
}

public void messageArrived(String topic, MqttMessage mqttMessage) throws Exception {
System.out.println(“————————————————-“);
System.out.println(“| Received from Raspberry Pi 1”);
System.out.println(“| Topic: “+topic);
System.out.println(“| Message: “+new String(mqttMessage.getPayload()));
System.out.println(“| QoS: {“+mqttMessage.getQos()+”}”);
System.out.println(“————————————————-“);

}

public void deliveryComplete(IMqttDeliveryToken iMqttDeliveryToken) {
System.out.println(“Delivery Complete”);
}
});

} catch (MqttException me) {
me.printStackTrace();
}
}
}
}

Hi, Above is my java code.. i am using this to getting message to compare on the java console and webtool console. i am getting all subscribed message on java console but couldn’t get on webtool console. I have subscribed to these three:
sampleClient_RP.subscribe(“iot_data”, qos);
sampleClient_RP.subscribe(“service_execution”, qos);
sampleClient_RP.subscribe(“service_execution_RP1”, qos);
but i am getting message only “iot_data” through your code on the webtool console.. could you please guide why I couldn’t get the “service_execution” message? how can I get it? which code is missing in javascript mqtt client websockets?

Hi,

Is it possible to get the id of the user connecting to mqtt using websocket from mqtt broker and display it on the website?

I created an mqtt broker by reading their article and provided a link to the broker via websocket from their website. I can follow the topics through the website. but again I want to know how many users are connected through the website and the name of the connected users. How can I display this on my website with javascript?

Hi Steve.
I use mosquito websocket working fine but websocket +ssl not working. pls helps
mosquitto.cofig
listener 3000
protocol websockets
allow_anonymous false
password_file C:\Program Files\Mosquitto\p2.txt

listener 8883
protocol websockets
cafile C:\Program Files\Mosquitto\ca.crt
keyfile C:\Program Files\Mosquitto\server.key
certfile C:\Program Files\Mosquitto\server.crt
tls_version tlsv1.3

— javasctipt paho–

var mqtt;
var reconnectTimeout = 2000;

var host=”pc-hostname”;
var port=8883;

function onConnect() {
// Once a connection has been made, make a subscription and send a message.

console.log(“Connected “);

message = new Paho.MQTT.Message(“Hello World”);
message.destinationName = “sensor1”;
mqtt.send(message);
}
function MQTTconnect() {
console.log(“connecting to “+ host +” “+ port);
var x=Math.floor(Math.random() * 10000);
var cname=”orderform-“+x;
mqtt = new Paho.MQTT.Client(host,port,cname);
//document.write(“connecting to “+ host);
var options = {
useSSL:true,
timeout: 3,
onSuccess: onConnect,

};

mqtt.connect(options); //connect
}

Thanks.

Hi,
I’m using self-signed CA certificate, does it work with paho javascript client over websockets when i use SSL to connect to broker?

Thanks.

Hi Steve,
Thank you for this article (and all the other ones as well :))
If I have:
client = new Paho.MQTT.Client(host, port);
And
message = new Paho.MQTT.Message(text);
message.destinationName = topic;
Can you please explain what is the different between:
client.send(message) And client.publish(topic, test)
Thanks,
Matan

Hi, again.
Successes.
I have spent a long time on my mini project. This and your other websockets stuff, plus Node Red stuff has been invaluable.
It has taken a lot of learning but finally. Now I hit my link, the new page loads and Node Red via MQTT knows what I have done and my model railway does what I need it to do.
My pinch points were lack of familiarity with HTML and scripts but here you helped a lot.
Also using a “User” and “Password” on my MQTT took a while but I got there and then the fun of integrating what you had produced, that I had modified, into my graphical web site having constructed it using “openElement”.
I ended up hand editing the code to integrate the websockets function.
So, THANKS. Never give In, Never Surrender!

Hi Steve, I have a question that I’d appreciate if you could shed some light on it. Im working on sensors and I would have liked for the readings to be displayed onto the browser. No exact preference for Real time. Would it be possible to somehow allow the readings to be displayed on the browser? Would I have to run a Paho MQTT Client script, then an “mqtt.htm” script to see those readings, and is there a function that sends the readings to the JavaScript MQTT Client (mqtt.htm) ?

Thank you very much!

Hi,

I am new in mqtt. I make my project it work in PC browser, but it not work in mobile Chrome or Safari.
client = mqtt.connect(connectUrl, options) will not connect in mobile browser, and no error event.

Hope some one can help me. Thanks.

Jacky

Hi I downloaded mosquitto and changed conf file. listener 9001 protocol websockets. I created random tag and mqtt client on kepserver. I did the same things what you did on web page but It gives me an error. It says “WebSocket connection to ‘ws://localhost:9001/mqtt’ failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED”. Could you help me with this?

I followed the steps. After running web socket for few hours it crashes without any message in console. So I tried to disconnect and reconnect every hour. Now I got this error in console when crashed “Invalid state. Not connectiong or connected”

Do you know how to connect to mqtt broker ?
I implemented mqtt broker using java. so I wish connect that your implemented client using javascript.
I did change the host address and port number. but that was useless.

Hi Steve,
Suppose I subscribed to two topics:

client.subscribe(“topic1”);
client.subscribe(“topic2″);

how can I extract value of both topics in onMessageArrived function and store in two variables:

function onMessageArrived(message) {
var strtop1=””;
var strtop2=””;
}