Skip to content

Instantly share code, notes, and snippets.

@jenschr
Last active Jun 10, 2021
Embed
What would you like to do?
Paho MQTT websocket example. I had a hard time finding working examples of using the 1.1.0 version of this lib. Here' a basic setup keeping track of connection and unsent messages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Konkurranse Nespresso</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js" integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- MQTT comms -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/paho-mqtt.min.js" type="text/javascript"></script>
<script>
// client, user and device details
var serverUrl = "my.mqtt.server.com"; // i.e. "great-server.cloudmqtt.com"
var serverPort = 443; // cloudmqtt only accepts WSS sockets on this port. Others will use 9001, 8883 or others
var clientId = "wsbrowser_"+new Date().getUTCMilliseconds(); // make client name unique
var username = "writeUsernameHere"; // fill in here
var password = "writePasswordHere"; // fill in here
var undeliveredMessages = []; // keep track of undelivered messages in this object (so you can resend later)
// configure the client to Cumulocity
var client = new Paho.Client(serverUrl, Number(serverPort), clientId);
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
client.onMessageDelivered = onMessageDelivered;
function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0){
log("onConnectionLost:"+responseObject.errorMessage);
}
};
// display all incoming messages
function onMessageArrived(message) {
log('Received message "' + message.payloadString + '"');
};
// display all delivered messages
function onMessageDelivered (message) {
log('Message "' + message.payloadString + '" delivered');
var undeliveredMessage = undeliveredMessages.pop(); // Note that this just pops the last msg. Could be smarter!
if (undeliveredMessage.onMessageDeliveredCallback) {
undeliveredMessage.onMessageDeliveredCallback();
}
}
function onConnected () {
log("Connected");
}
// send a message
function publish (topic, message, onMessageDeliveredCallback) {
message = new Paho.Message(message);
message.destinationName = topic;
message.qos = 2;
undeliveredMessages.push({
message: message,
onMessageDeliveredCallback: onMessageDeliveredCallback
});
client.send(message);
log("sent: "+message+" to "+topic);
}
// connect the client to Cumulocity
function init () {
client.connect({
userName: username,
password: password,
onSuccess: onConnected,
useSSL: true
});
}
// display all messages on the page
function log (message) {
console.log(message);
}
$( document ).ready(function() {
$( "#sendit" ).click(function() {
log("Send!");
publish("/home/registrering","{sent:1}");
});
});
init();
</script>
</head>
<body>
<div id="root">
<div class="input"><input type="text" name="characters"><input type="button" name="Submit" id="sendit" value="Send"></div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment