WebSockets: angular, stompTS and RabbitMq

Requirements

• Docker
• node
• angular

Run RabbitMq in docker

With docker installed (more details)

docker run -d -p 15672:15672 -p 5672:5672 -p 15674:15674 --name rabbitmq --rm crochik/rabbitmq:3.7-stomp

Sample Angular app

Get the sample source code from github

Get dependencies, in the folder where you cloned the repo to:

npm install

Run this application

ng serve

Open the browser and navigate to

http://localhost:4200

Send some test messages

Connect to the RabbitMq Management in the web browser, navigate to:

http://localhost:15672

use default credentials  guest/guest.

Click on the Queue tab. There should be on queue named stomp-subscription-…, select it by clicking on the name.

On the bottom of the page you will find a publish message

This sample code assumes two possible formats for messages: json or text.

If a header content-type is included with the value application/json the service will try to parse it and then output a prettyfied version of the json. Otherwise, the service will just output the body “as is”.

Send a text message

On the payload field add some text and press the “Publish Message” button

Send a json message

Add a header content-type with value application/json, paste a valid json in the payload button and then push the “Publish Message” button.

Notes

• The app component is subscribing to the topic /topic/test.#. In practice this means that that the queue is bound to the exchange amq.topic using the routing key test.# (any message published to amq.topic that starts with test. or is test will be routed to this queue and should show in the web page)
• There is no error handling. Make sure to look at the browser console for messages.
• The sample code is using stompTS,  an experimental port/fork of the stompjs