99 lines
3.1 KiB
HTML
99 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html><head>
|
|
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
|
<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>
|
|
var ws = new WebSocket('ws://' + window.location.hostname + ':15674/ws');
|
|
var client = Stomp.over(ws);
|
|
|
|
client.debug = function(e) {
|
|
$('#second div').append($("<code>").text(e));
|
|
};
|
|
|
|
// 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("");
|
|
client.send(m.headers['reply-to'], {"content-type":"text/plain"}, reversedText);
|
|
});
|
|
};
|
|
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>
|