136 lines
3.7 KiB
HTML
136 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
|
<title>RabbitMQ Web MQTT Example</title>
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
<script src="mqttws31.js" type="text/javascript"></script>
|
|
<style>
|
|
.box {
|
|
width: 440px;
|
|
float: left;
|
|
margin: 0 20px 0 20px;
|
|
}
|
|
|
|
.box div, .box input {
|
|
border: 1px solid;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
width: 100%;
|
|
padding: 5px;
|
|
margin: 3px 0 10px 0;
|
|
}
|
|
|
|
.box div {
|
|
border-color: grey;
|
|
height: 300px;
|
|
overflow: auto;
|
|
}
|
|
|
|
div code {
|
|
display: block;
|
|
}
|
|
|
|
#first div code {
|
|
-moz-border-radius: 2px;
|
|
border-radius: 2px;
|
|
border: 1px solid #eee;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#second div {
|
|
font-size: 0.8em;
|
|
}
|
|
</style>
|
|
<link href="main.css" rel="stylesheet" type="text/css"/>
|
|
</head>
|
|
<body lang="en">
|
|
<h1><a href="index.html">RabbitMQ Web MQTT Examples</a> > Echo Server</h1>
|
|
|
|
<div id="first" class="box">
|
|
<h2>Received</h2>
|
|
<div></div>
|
|
<form><input autocomplete="off" value="Type here..."></input></form>
|
|
</div>
|
|
|
|
<div id="second" class="box">
|
|
<h2>Logs</h2>
|
|
<div></div>
|
|
</div>
|
|
|
|
<script>
|
|
var has_had_focus = false;
|
|
var pipe = function(el_name, send) {
|
|
var div = $(el_name + ' div');
|
|
var inp = $(el_name + ' input');
|
|
var form = $(el_name + ' form');
|
|
|
|
var print = function(m, p) {
|
|
p = (p === undefined) ? '' : JSON.stringify(p);
|
|
div.append($("<code>").text(m + ' ' + p));
|
|
div.scrollTop(div.scrollTop() + 10000);
|
|
};
|
|
|
|
if (send) {
|
|
form.submit(function() {
|
|
send(inp.val());
|
|
inp.val('');
|
|
return false;
|
|
});
|
|
}
|
|
return print;
|
|
};
|
|
|
|
var print_first = pipe('#first', function(data) {
|
|
message = new Paho.MQTT.Message(data);
|
|
message.destinationName = "test";
|
|
debug("SEND ON " + message.destinationName + " PAYLOAD " + data);
|
|
client.send(message);
|
|
});
|
|
|
|
var debug = pipe('#second');
|
|
|
|
var wsbroker = location.hostname; //mqtt websocket enabled broker
|
|
var wsport = 15675; // port for above
|
|
|
|
var client = new Paho.MQTT.Client(wsbroker, wsport, "/ws",
|
|
"myclientid_" + parseInt(Math.random() * 100, 10));
|
|
|
|
client.onConnectionLost = function (responseObject) {
|
|
debug("CONNECTION LOST - " + responseObject.errorMessage);
|
|
};
|
|
|
|
client.onMessageArrived = function (message) {
|
|
debug("RECEIVE ON " + message.destinationName + " PAYLOAD " + message.payloadString);
|
|
print_first(message.payloadString);
|
|
};
|
|
|
|
var options = {
|
|
timeout: 3,
|
|
keepAliveInterval: 30,
|
|
onSuccess: function () {
|
|
debug("CONNECTION SUCCESS");
|
|
client.subscribe("test", {qos: 1});
|
|
},
|
|
onFailure: function (message) {
|
|
debug("CONNECTION FAILURE - " + message.errorMessage);
|
|
}
|
|
};
|
|
|
|
if (location.protocol == "https:") {
|
|
options.useSSL = true;
|
|
}
|
|
|
|
debug("CONNECT TO " + wsbroker + ":" + wsport);
|
|
client.connect(options);
|
|
|
|
$('#first input').focus(function() {
|
|
if (!has_had_focus) {
|
|
has_had_focus = true;
|
|
$(this).val("");
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|