diff options
Diffstat (limited to 'deps/rabbitmq_web_stomp_examples/priv/temp-queue.html')
-rw-r--r-- | deps/rabbitmq_web_stomp_examples/priv/temp-queue.html | 98 |
1 files changed, 98 insertions, 0 deletions
diff --git a/deps/rabbitmq_web_stomp_examples/priv/temp-queue.html b/deps/rabbitmq_web_stomp_examples/priv/temp-queue.html new file mode 100644 index 0000000000..f19c6ed4bf --- /dev/null +++ b/deps/rabbitmq_web_stomp_examples/priv/temp-queue.html @@ -0,0 +1,98 @@ +<!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> |