How do I connect to RabbitMQ from my ReactJS application? - reactjs

Question

Im having trouble connecting to a RabbitMQ instance and can not find a good tutorial or guide for doing so. I can connect to a RabbitMQ websocket by
var ws = new WebSocket('ws://localhost:15674/ws')
But now I don't know how to connect to my cluster with my credentials. I also need to consume messages from a queue like this /exchange/myExchange/routingKey. I was able to easily do this in angular application by using RxStompService with the following code
rxStompService.configure({
brokerURL: `ws://localhost:15674/ws`,
connectHeaders: {
login: 'guest',
passcode: 'guest'
},
heartbeatIncoming: 0, // Typical value 0 - disabled
heartbeatOutgoing: 20000, // Typical value 20000 - every 20 seconds
reconnectDelay: 200,
debug: (msg: string): void => {
console.log(new Date(), msg);
}
})
this.exchange = 'myExchange'
this.routingKey = 'routingKey'
this.headers ={
'x-queue-name': 'myQueue',
'durable': 'true',
'auto-delete': 'false'
}
ngOnInit() {
this.rxStompService.watch(`/exchange/${this.exchange}/${this.routingKey}`, this.headers ).subscribe((message: Message) => {
this.user = new User(JSON.parse(message.body))
});
}
How can I do the same but from my react app?

Answer 1

I was able to connect and subscribe to a queue by using stompjs.
import Stomp from 'stompjs'
export function connectRabbit(){
let stompClient
var ws = new WebSocket('ws://localhost:15674/ws')
const headers = {
'login': 'guest',
'passcode': 'guest',
'durable': 'true',
'auto-delete': 'false'
}
stompClient = Stomp.over(ws)
stompClient.connect(headers , function(frame){
console.log('Connected')
const subscription = stompClient.subscribe('/queue/myQueue', function(message){
console.log(message)
})
})
}