How do you watch RabbitMQ messages without consuming them?
You may find yourself needing to live monitor messages from a web page as they are being processed through RabbitMQ. This can be useful to monitor a logging message queue, obtain the processing status of a system as it’s state changes, etc. Here, we’ll explore an approach to getting this done. Even better, we’ll do this with pure HTML and javascript for a light-weight front-end only approach, leaving server backend code, behind.
RabbitMQ, WebSockets & WebStomp
To be able to make RabbitMQ subscriptions and view live updates through javascript, we’ll need to make use of WebSocket and fortunately, the RabbitMQ Web-Stomp Plugin is available for this purpose.
Installing RabbitMQ WebStomp Plugin
The plugin is included with RabbitMQ so if you already have RabbitMQ on your server, you can enable the RabbitMQ WebStomp Plugin with this command:
rabbitmq-plugins enable rabbitmq_web_stomp
A Basic Example
Here we’ll include stomp.js and jquery.tiny-pubsub so we can publish the messages as they arrive and subscribe to them in a script elsewhere.
Notice that the client.subscribe is pointing to an exchange endpoint not a queue endpoint and we’ve added a ‘reply-to’ header set up a temporary queue. This will prevent the messages from being consumed here and preventing the application that is handling them from processing them. This will also allow multiple instances of this page to monitor without loosing the messages because they were consumed in another location.
//-- rabbitmq.js
requirejs(['stomp', 'jquery.tiny-pubsub'], function() {
if (window.ras === undefined) window.ras = {};
window.ras.rabbitmq = {
client: Stomp.client('ws://localhost:15674/ws'),
subscription: {},
on_connect: function() {
ras.rabbitmq.subscription = ras.rabbitmq.client.subscribe('/exchange/someexchangename', function(message) {
$.publish('/rabbitmq-message/', message);
message.ack();
}, {
'reply-to': '/temp-queue/bar',
ack: 'client',
id: 1
});
},
on_error: function() {
console.log('error');
client.disconnect(function() {
console.log('disconnected');
});
},
connect: function() {
console.log('connecting to rabbitmq...');
this.client.connect('webstomp', 'webstomp',
this.on_connect, this.on_error, '/');
},
};
ras.rabbitmq.client.heartbeat.outgoing = 0;
ras.rabbitmq.client.heartbeat.incoming = 0;
ras.rabbitmq.connect();
});
… and a small script on the subscriber side of the pub/sub…
//-- monitor.js
requirejs(['rabbitmq', 'jquery.tiny-pubsub'], function() {
if (window.ras === undefined) window.ras = {};
window.ras.monitor = {
handleMessage: function(e, message) {
var results = $.parseJSON(message.body);
//-- do something useful
},
init: function() {
$.subscribe('/rabbitmq-message/', this.handleMessage);
},
}
window.ras.monitor.init();
});
