STOMP - SSL - JavaScript
Updated on 20 Sep 2023
To retrieve a message and display it, we’ll use JavaScript. First lets download the stomp client. This comes from the excellent Stomp over Websocket website.
If you recall from an earlier section we did this
sudo rabbitmq-diagnostics listeners
Notice that https/web-stomp protocol uses port 15673. This is inline with how we set up the rabbitmq.conf file earlier.
Line 8 is where we make a change from our previous JavaScript.
var url = "wss://localhost:15673/ws"
$(document).ready(function() {
//-----
//--this is using rabbitmq
//-----
//this works
var url = "wss://localhost:15673/ws";
var client = Stomp.client(url);
//client.heartbeat.incoming = 0;
//client.heartbeat.outgoing = 0;
//-----
connect_callback = function() {
// called after the client is connected and
// authenticated to the STOMP server
client.subscribe("/queue/q1", stomp_callback);
};
error_callback = function(error) {
// display the error's message header:
alert(error);
};
//user, pass, connect_event, error_event, host (host does not work with command line stomp from python)
//client.connect('demo_user', 'demo_pass', connect_callback, error_callback, 'demo_host');
var headers = {
login: 'demo_user',
passcode: 'demo_pass',
host: 'demo_host',
// additional header
'client-id': 'my-client-id'
};
client.connect(headers, connect_callback, error_callback);
//-- called when the client receives a STOMP message from the server
function stomp_callback(message)
{
if(message.body) {
//-----
//--avoid double up of information displayed.
//-----
var text = message.body;
text = text.substring(text.indexOf("\r") + 1);
//-----
//--convert the newline character to <br />
html = text.split("\n").join("<br />");
$("#debug").append(html);
$("#debug").append('<br>');
}
}
//-----
//--button send... (WORKS)
//-----
$('#send').click(function(){
//--send a message
client.send("/queue/q1",
{"content-type":"text/plain"},
"Hello from my webpage, STOMP\n");
});
//-----
});
HTML
Now lets build a webpage. The important parts are
- stomp.js → we got that from the stomp client link above.
- myStomp.js → that is the JavaScript code above.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="css/favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/starter-template.css" rel="stylesheet">
<script src="js/jquery3.js"></script>
<script src="js/stomp.js"></script>
<script src="js/myStomp.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>Call API's with JavaScript</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
<div class="row">
<div class="col-sm">
<p>Open 1 - simple API call that returns a string</p>
<button id="open1" type="button" class="btn btn-primary">Primary</button>
</div>
<div class="col-sm">
<p>Post 1 - Pass JSON to API endpoint</p>
<button id="post1" type="button" class="btn btn-primary">Primary</button>
</div>
<div class="col-sm">
<p>Post 2 - Pass XML to an API endpoint</p>
<button id="post2" type="button" class="btn btn-primary">Primary</button>
</div>
</div>
<hr />
<div class="row">
<h2>Important Links</h2>
<p></p>
<ul>
<li><a href="http://jmesnil.net/stomp-websocket/doc/">http://jmesnil.net/stomp-websocket/doc/</a></li>
<li><a href="https://stomp-js.github.io/stomp-websocket/codo/extra/docs-src/Usage.md.html">https://stomp-js.github.io/stomp-websocket/codo/extra/docs-src/Usage.md.html</a></li>
<li><a href="https://github.com/stomp-php/stomp-php-examples">https://github.com/stomp-php/stomp-php-examples</a></li>
<li><a href="https://linux.die.net/man/1/amqp-publish">https://linux.die.net/man/1/amqp-publish</a></li>
<li><a href="https://www.rabbitmq.com/management-cli.html">https://www.rabbitmq.com/management-cli.html</a></li>
</ul>
</div>
<hr />
</div>
<button id="send" type="button" class="btn btn-success">Send Stomp Message</button>
<div id="debug"></div>
<hr />
</main><!-- /.container -->
</body>
</html>
Send a message
Lets send a message.
./send.py "hello world from Python -ssl"
And check it in the queue.
rabbitmqadmin get queue=q1 --vhost=demo_host -u guest -p guest
And finally see it in the web-browser
