Using The JavaScript MQTT Client With Websockets

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=””;
}