2013-08-08 18:12:27 +08:00
<!DOCTYPE html>
< html > < head >
2019-08-14 09:43:38 +08:00
< script src = "https://code.jquery.com/jquery-3.4.1.min.js" > < / script >
2013-08-08 18:12:27 +08:00
< script src = "stomp.js" > < / 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 >
< title > RabbitMQ Web STOMP Examples : Temporary Queue< / title >
< link href = "main.css" rel = "stylesheet" type = "text/css" / >
< / head > < body lang = "en" >
< h1 > < a href = "index.html" > RabbitMQ Web STOMP Examples< / a > > Temporary Queue< / h1 >
< p > When you type text in the form's input, the application will send a message to the < code > /queue/test< / code > destination
with the < code > reply-to< / code > header set to < code > /temp-queue/foo< / code > .< / p >
< p > The STOMP client sets a default < code > onreceive< / code > callback to receive messages from this temporary queue and display the message's text.< / p >
< p > Finally, the client subscribes to the < code > /queue/test< / code > destination. When it receives message from this destination, it reverses the message's
text and reply by sending the reversed text to the destination defined by the message's < code > reply-to< / code > header.< / p >
< div id = "first" class = "box" >
< h2 > Received< / h2 >
< div > < / div >
< form > < input autocomplete = "off" placeholder = "Type here..." > < / input > < / form >
< / div >
< div id = "second" class = "box" >
< h2 > Logs< / h2 >
< div > < / div >
< / div >
< script >
2017-10-23 17:22:08 +08:00
var ws = new WebSocket('ws://' + window.location.hostname + ':15674/ws');
2013-08-08 18:12:27 +08:00
var client = Stomp.over(ws);
2015-09-09 17:34:11 +08:00
2013-08-08 18:12:27 +08:00
client.debug = function(e) {
$('#second div').append($("< code > ").text(e));
};
2013-08-09 22:37:23 +08:00
2013-08-08 18:12:27 +08:00
// default receive callback to get message from temporary queues
client.onreceive = function(m) {
$('#first div').append($("< code > ").text(m.body));
}
var on_connect = function(x) {
id = client.subscribe("/queue/test", function(m) {
// reply by sending the reversed text to the temp queue defined in the "reply-to" header
var reversedText = m.body.split("").reverse().join("");
2013-11-27 18:53:24 +08:00
client.send(m.headers['reply-to'], {"content-type":"text/plain"}, reversedText);
2013-08-08 18:12:27 +08:00
});
};
var on_error = function() {
console.log('error');
};
client.connect('guest', 'guest', on_connect, on_error, '/');
$('#first form').submit(function() {
var text = $('#first form input').val();
if (text) {
client.send('/queue/test', {'reply-to': '/temp-queue/foo'}, text);
$('#first form input').val("");
}
return false;
});
< / script >
< / body > < / html >
