Send RabbitMQ messages to Websocket using Apache Camel - angularjs

Question

As described in the title I would like to send messages to a Websocket using RabbitMQ. Using AngularJS frontend I want to read the RabbitMQ messages from the Websocket and print them to the console.
In principle my code seems the work, though I can't figure out how to get the actual (string) content of my messages?
Backend:
To create the Websocket and do the routing i am using Spring Boot and Apache Camel: http://camel.apache.org/spring-boot.html.
Routing with Camel is easy and my complete Java Code looks like this:
#Component
public final class CamelRoute extends RouteBuilder {
#Override
public final void configure() throws Exception {
from("rabbitmq:localhost/myExchange")
.to("websocket://myEndpoint?sendToAll=true");
}
}
Running the SpringBoot application works without errors and the logs look good:
Route: route1 started and consuming from: rabbitmq://localhost/myExchange
RabbitMQ:
RabbitMQ runs on my localhost. When I go to http://localhost:15672/ I can see that SpringBoot created the myExchange and I can send messages to it using Publish Message in the UI.
For instance I specify "HelloWorld!" as Payload (without any headers etc.) and click on send.
Frontend:
To read messages from the websocket I basically do the following in my AngularJS controller:
var socket = {
start: function () {
var location = "ws://localhost:9292/myEndpoint";
this._ws = new WebSocket(location);
this._ws.onmessage = this._onmessage;
this._ws.onclose = this._onclose;
},
_onmessage: function (m) {
//Log received RabbitMQ messages from the Websocket
console.log(m);
},
_onclose: function (m) {
if (this._ws) {
this._ws.close();
}
}
};
Receiving the messages seems to work in principle.
When I go to my webpage (localhost:8080/) and open the console in Chrome, it prints a "MessageEvent" object with many properties.
None of these properties though seem tocontain the actual message string, i.e.: "HelloWorld!"?
Update:
Instead of using RabbitMQ to deliver messages, I tried doing the same with Apache Kafka instead, and it worked. Here is what I did:
To test I simply setup a Topic called "test" on a local Kafka Broker using a docker-image.
My route config now looks like this:
from("kafka:localhost:9092?topic=test&groupId=camelgroupid&autoOffsetReset=earliest&consumersCount=1")
.to("websocket://dashboard?sendToAll=true");
To send messages I use the official kafka clients library.
Using the same JS code as posted above, I can now see the messages in the MessageObject.data.
I still wonder why the same approach doesn't work with RabbitMQ? Anyone has an idea?

Answer 1

Finally solved my problem.
The problem was at the client-side. RabbitMQ sends messages via byte[]. The byte[] needs to be decoded correctly when reading the the message from the Websocket.
Here is my updated and working client code:
var socket = {
start: function () {
var location = "ws://localhost:9292/myEndpoint";
this._ws = new WebSocket(location);
// RabbitMQ transmits a byte[], therefore we need to change the binary type:
this._ws.binaryType = 'arraybuffer';
this._ws.onmessage = this._onmessage;
this._ws.onclose = this._onclose;
},
_onmessage: function (m) {
// Decode the byte[]:
var messageString = new TextDecoder('UTF-8').decode(m.data);
console.log(messageString);
},
_onclose: function (m) {
if (this._ws) {
this._ws.close();
}
}
};