Stomp JS in 5 minutes

What is STOMP ?

STOMP is the Simple (or Streaming) Text Oriented Messaging Protocol.

STOMP clients can communicate with any STOMP message broker. This provides easy and widespread messaging interoperability among many languages, platforms and brokers.

STOMP JS

This is a library that provides a STOMP client for Web browser.

WebSocket API

The WebSocket API enables web applications to handle bidirectional communications with server-side process in a straightforward way.

Once you get a WebSocket connection, you can:

• send data from browser to server by calling a send() method,
• receive data from server to browser by an onmessage event handler.

WebSocket Protocol

In addition to the new WebSocket API, there is also a new protocol ,the “WebSocket Protocol” that the browser uses to communicate with servers.

The protocol is

• not raw TCP because it needs to provide the browser’s “same-origin” security model.
• It’s also not HTTP because WebSocket traffic differers from HTTP’s request-response model.
• WebSocket communications using the new WebSocket protocol should use less bandwidth.
• No headers are exchanged once the single connection has been established.

“WebSocket API is part of HTML5”

Include STOMP.js

In Web Browser

• Download stomp.js or stomp.min.js
• Include in your web page.
• Stomp object will now be available. Read along to learn how to use it.

In NodeJS

• Add npm modules @stomp/stompjs and websocket to your project.
• using npm

$ npm install @stomp/stompjs websocket — save

• Require the module

var Stomp = require(‘@stomp/stompjs’);

Create a STOMP Client

STOMP JavaScript clients will communicate to a STOMP server using a ws:// URL.

• Stomp.client(url)

To create a STOMP client JavaScript object, you need to call Stomp.client(url) with the URL corresponding to the server’s WebSocket endpoint

• Stomp.over(ws)

Web browsers supports different versions of the WebSocket protocol. Some do not provide the WebSocket JavaScript.

However it is possible to use other type of WebSockets by using the Stomp.over(ws) method. This method expects an object that conforms to the WebSocket definition.

private url = “ws://localhost:/3200/app”;

• Stomp.overTCP(host, port) and Stomp.overWS(url)

To connect to a stomp broker , over TCP socket :

var client = Stomp.overTCP(‘localhost’, 3280);

To connect to Stomp Broker over Web Socket:

var client = Stomp.overWS(‘ws://localhost:3280/stomp’);

Connection to the server : Connect ()

After creating STOMP client , call its connect() method to effectively connect and authenticate to the STOMP server.

The method takes two mandatory arguments, corresponding to the user credentials:

• login
• passcode

Behind the scene, the client will open a connection using a WebSocket and send a CONNECT frame.

STOMP Frame

STOMP Over WebSocket provides a straightforward mapping from a STOMP frame to a JavaScript object.

• The command and headers properties will always be defined
• The headers can be empty if the frame has no headers. The body can be null if the frame does not have a body.

The connection is done asynchronously: you have no guarantee to be effectively connected when the call to connect returns.

To be notified of the connection, you need to pass a connect_callbackfunction to the connect() method

the connect() method accepts an optional error_callback argument which will be called if the client is not able to connect to the server.

The connect() method also accepts two other variants if you need to pass additional headers:

Other Example based on format mentioned above

this.stompClient.connect({‘user’: this.userName}, successCallback, errorCallback);

Send messages

When the client is connected to the server, it can send STOMP messages using the send()method. The method takes:

• One mandatory : destination [ argument corresponding to the STOMP destination].
• Two optional arguments: headers, a JavaScript object containing additional message headers and body, a String object.

Subscribe to receive messages

To receive messages in the browser, the STOMP client must first subscribe to a destination.

You can use the subscribe() method to subscribe to a destination. The method takes 2 mandatory arguments:

1. destination,

2. callback, a function with

• message argument and — /queue/test
• Headers, optional argument

The subscribe() methods returns

1. Id — correspond to the client subscription ID
2. unsubscribe() that can be used later on to unsubscribe the client from this destination

Disconnect

Heartbeat

The client object has a heartbeat field which can be used to configure heart-beating by changing its incoming and outgoing integer fields (default value for both is 10000ms)