Skip to content

Instantly share code, notes, and snippets.

@matbor

matbor/00Readme.md

Last active January 4, 2022 14:53
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save matbor/9825309 to your computer and use it in GitHub Desktop.
Save matbor/9825309 to your computer and use it in GitHub Desktop.
Download ZIP
mqtt/websocket html/js example
Raw
00Readme.md
Raw
websocketexample.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="mqttws31.js" type="text/javascript"></script>
<script type="text/javascript">
//sample HTML/JS script that will publish/subscribe to topics in the Google Chrome Console
//by Matthew Bordignon @bordignon on twitter.
var wsbroker = "test.mosquitto.org"; //mqtt websocket enabled broker
var wsport = 8080 // port for above
var client = new Paho.MQTT.Client(wsbroker, wsport,
"myclientid_" + parseInt(Math.random() * 100, 10));
client.onConnectionLost = function (responseObject) {
console.log("connection lost: " + responseObject.errorMessage);
};
client.onMessageArrived = function (message) {
console.log(message.destinationName, ' -- ', message.payloadString);
};
var options = {
timeout: 3,
onSuccess: function () {
console.log("mqtt connected");
// Connection succeeded; subscribe to our topic, you can add multile lines of these
client.subscribe('/World', {qos: 1});
//use the below if you want to publish to a topic on connect
message = new Paho.MQTT.Message("Hello");
message.destinationName = "/World";
client.send(message);
},
onFailure: function (message) {
console.log("Connection failed: " + message.errorMessage);
}
};
function init() {
client.connect(options);
}
</script>
</head>
<body onload="init();">
</body>
</html>
@orpeleg7
Copy link

orpeleg7 commented Dec 2, 2014

Hi,

Thanks for the simple example.
It does look simple, however I tried it - and failed miserably.
I get two errors:
Uncaught ReferenceError: Messaging is not defined
Uncaught TypeError: Cannot read property 'connect' of undefined

You can view the page: http://javalight.mybluemix.net/
please help...

Thanks,
Or

@m-aamir-ashfaq
Copy link

orpeleg7 or Matthew ,, i am having same error... Uncaught ReferenceError: Messaging is not defined.. any suggestion plz

@matbor
Copy link
Author

matbor commented Feb 11, 2015

Sorry, didn't notice you had commented as there is no gist notifications on github, so I'm guessing you wont see this anyway! However I have fixed it for you. The newer version of mqttws31.js connection string has changed. There are better examples on https://eclipse.org/paho/clients/js/ webpage.

@Bergrebell
Copy link

you have to change the port from "80" to "8080" - then it works! but still a very helpful example!! 👍

@matbor
Copy link
Author

matbor commented Aug 23, 2015

@Bergrebell test.mosquitto use to be port 80. For full listing goto there website. Will fix it though.

@ramesh586
Copy link

we have server with tcp:// how can i connect using this

@rifqithomirt
Copy link

why i allways get "Paho is not define" ? what's going on? do i false on a html code.
i guess that this one totally same with yours

<script src="http://www.hivemq.com/demos/websocket-client/js/mqttws31.js" type="text/javascript"></script> <script type="text/javascript"> 
//sample HTML/JS script that will publish/subscribe to topics in the Google Chrome Console
//by Matthew Bordignon @bordignon on twitter.

var wsbroker = "test.mosquitto.org";  //mqtt websocket enabled broker
var wsport = 8080 // port for above

var client = new Paho.MQTT.Client(wsbroker, wsport,
    "myclientid_" + parseInt(Math.random() * 100, 10));

client.onConnectionLost = function (responseObject) {
  console.log("connection lost: " + responseObject.errorMessage);
};

client.onMessageArrived = function (message) {
  console.log(message.destinationName, ' -- ', message.payloadString);
};

var options = {
  timeout: 3,
  onSuccess: function () {
    console.log("mqtt connected");
    // Connection succeeded; subscribe to our topic, you can add multile lines of these
    client.subscribe('/World', {qos: 1});


    //use the below if you want to publish to a topic on connect
    message = new Paho.MQTT.Message("Hello");
    message.destinationName = "/World";
    client.send(message);

  },
  onFailure: function (message) {
    console.log("Connection failed: " + message.errorMessage);
  }
};

function init() {
client.connect(options);
}
</script>

@NancyZY
Copy link

NancyZY commented Oct 28, 2016

Hello, I try to run this example, it works well. BUT when I change the value of wsbroker and wsport, which from BaiduYUN loT I applied, but the chrome console : Connection failed:AMQJS0007E Socket error:undefined. Besides, there is ws information
image

PS: my information for wsbroker and wsport are right, because it passed the websocket test. I don't know what problem it is, Hope you can help me.

@eysam
Copy link

eysam commented Sep 8, 2017

I have a question that is how can i subscribe more than 1 topic,please

@crobles
Copy link

crobles commented Apr 30, 2018

I can not make it work with TLS.
Does someone have an example?

@kaebmoo
Copy link

kaebmoo commented Jul 8, 2018 •
edited

for TLS
var options = {
.
.
.

useSSL: true

};

@Stavros13
Copy link

I have a problem when i want to use username and password for MQTT connection. When i add at options username: "username",
password:"password" i cant connect to MQTT . Is there a specific way to add username and password than add them in to options?

@bartbergman
Copy link

@Stavros13, username should be userName

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment