Skip to content
This repository was archived by the owner on Nov 16, 2020. It is now read-only.

Commit fe7d112

Browse files
essenessen
committed
Make the example like Web STOMP's echo example
Everything works as intended so far.
1 parent b991b18 commit fe7d112

File tree

2 files changed

+157
-42
lines changed

2 files changed

+157
-42
lines changed

‎priv/example/index.html‎

Lines changed: 119 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,52 +2,129 @@
22
<html>
33
<head>
44
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
5+
<title>RabbitMQ Web MQTT Example</title>
6+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
57
<script src="mqttws31.js" type="text/javascript"></script>
6-
<script type="text/javascript">
7-
8-
//sample HTML/JS script that will publish/subscribe to topics in the Google Chrome Console
9-
//by Matthew Bordignon @bordignon on twitter.
10-
11-
var wsbroker = "localhost"; //mqtt websocket enabled broker
12-
var wsport = 15675 // port for above
13-
14-
var client = new Paho.MQTT.Client(wsbroker, wsport, "/ws",
15-
"myclientid_" + parseInt(Math.random() * 100, 10));
16-
17-
client.onConnectionLost = function (responseObject) {
18-
console.log("connection lost: " + responseObject.errorMessage);
19-
};
20-
21-
client.onMessageArrived = function (message) {
22-
console.log(message.destinationName, ' -- ', message.payloadString);
23-
};
24-
25-
var options = {
26-
timeout: 3,
27-
onSuccess: function () {
28-
console.log("mqtt connected");
29-
// Connection succeeded; subscribe to our topic, you can add multile lines of these
30-
client.subscribe('/World', {qos: 1});
31-
32-
33-
//use the below if you want to publish to a topic on connect
34-
message = new Paho.MQTT.Message("Hello");
35-
message.destinationName = "/World";
36-
client.send(message);
37-
38-
},
39-
onFailure: function (message) {
40-
console.log("Connection failed: " + message.errorMessage);
8+
<style>
9+
.box {
10+
width: 440px;
11+
float: left;
12+
margin: 0 20px 0 20px;
4113
}
42-
};
4314

44-
function init() {
45-
client.connect(options);
46-
}
15+
.box div, .box input {
16+
border: 1px solid;
17+
-moz-border-radius: 4px;
18+
border-radius: 4px;
19+
width: 100%;
20+
padding: 5px;
21+
margin: 3px 0 10px 0;
22+
}
4723

48-
</script>
24+
.box div {
25+
border-color: grey;
26+
height: 300px;
27+
overflow: auto;
28+
}
29+
30+
div code {
31+
display: block;
32+
}
33+
34+
#first div code {
35+
-moz-border-radius: 2px;
36+
border-radius: 2px;
37+
border: 1px solid #eee;
38+
margin-bottom: 5px;
39+
}
40+
41+
#second div {
42+
font-size: 0.8em;
43+
}
44+
</style>
45+
<link href="main.css" rel="stylesheet" type="text/css"/>
4946
</head>
50-
<body onload="init();">
51-
</body>
47+
<body lang="en">
48+
<h1>RabbitMQ Web MQTT Example</h1>
49+
50+
<div id="first" class="box">
51+
<h2>Received</h2>
52+
<div></div>
53+
<form><input autocomplete="off" value="Type here..."></input></form>
54+
</div>
55+
56+
<div id="second" class="box">
57+
<h2>Logs</h2>
58+
<div></div>
59+
</div>
60+
61+
<script>
62+
var has_had_focus = false;
63+
var pipe = function(el_name, send) {
64+
var div = $(el_name + ' div');
65+
var inp = $(el_name + ' input');
66+
var form = $(el_name + ' form');
5267

68+
var print = function(m, p) {
69+
p = (p === undefined) ? '' : JSON.stringify(p);
70+
div.append($("<code>").text(m + ' ' + p));
71+
div.scrollTop(div.scrollTop() + 10000);
72+
};
73+
74+
if (send) {
75+
form.submit(function() {
76+
send(inp.val());
77+
inp.val('');
78+
return false;
79+
});
80+
}
81+
return print;
82+
};
83+
84+
var print_first = pipe('#first', function(data) {
85+
message = new Paho.MQTT.Message(data);
86+
message.destinationName = "/topic/test";
87+
debug("SEND ON " + message.destinationName + " PAYLOAD " + data);
88+
client.send(message);
89+
});
90+
91+
var debug = pipe('#second');
92+
93+
var wsbroker = "localhost"; //mqtt websocket enabled broker
94+
var wsport = 15675 // port for above
95+
96+
var client = new Paho.MQTT.Client(wsbroker, wsport, "/ws",
97+
"myclientid_" + parseInt(Math.random() * 100, 10));
98+
99+
client.onConnectionLost = function (responseObject) {
100+
debug("CONNECTION LOST - " + responseObject.errorMessage);
101+
};
102+
103+
client.onMessageArrived = function (message) {
104+
debug("RECEIVE ON " + message.destinationName + " PAYLOAD " + message.payloadString);
105+
print_first(message.payloadString);
106+
};
107+
108+
var options = {
109+
timeout: 3,
110+
onSuccess: function () {
111+
debug("CONNECTION SUCCESS");
112+
client.subscribe('/topic/test', {qos: 1});
113+
},
114+
onFailure: function (message) {
115+
debug("CONNECTION FAILURE - " + message.errorMessage);
116+
}
117+
};
118+
119+
debug("CONNECT TO " + wsbroker + ":" + wsport);
120+
client.connect(options);
121+
122+
$('#first input').focus(function() {
123+
if (!has_had_focus) {
124+
has_had_focus = true;
125+
$(this).val("");
126+
}
127+
});
128+
</script>
129+
</body>
53130
</html>

‎priv/example/main.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
body {
2+
font-family: "Arial";
3+
color: #444;
4+
}
5+
6+
h1, h2 {
7+
color: #f60;
8+
font-weight: normal;
9+
}
10+
11+
h1 {
12+
font-size: 1.5em;
13+
}
14+
15+
h2 {
16+
font-size: 1.2em;
17+
margin: 0;
18+
}
19+
20+
a {
21+
color: #f60;
22+
border: 1px solid #fda;
23+
background: #fff0e0;
24+
border-radius: 3px; -moz-border-radius: 3px;
25+
padding: 2px;
26+
text-decoration: none;
27+
/* font-weight: bold; */
28+
}
29+
30+
ul.menu {
31+
list-style-type: none;
32+
padding: 0;
33+
margin: 0;
34+
}
35+
36+
ul.menu li {
37+
padding: 5px 0;
38+
}

0 commit comments

Comments
 (0)