How to set up heartbeats with webstomp-client and Spring Boot? - reactjs

Question

I have a React.js frontend establishing websocket connections (STOMP) with a Spring Boot backend.
I'm using the webstomp-client library on the front-end, because that is the one recommended in the Spring Boot documentation.
I can establish the connection and send and receive messages. However, there are no outgoing heartbeats from the frontend, only incoming heartbeats being sent by the backend. After some time (~ 5 mins on real project, ~30 secs on minimum reproducible example), the connection is closed with the following error:
Whoops! Lost connection to ws://localhost:8081/test:
CloseEvent {isTrusted: true, wasClean: true, code: 1002, reason: "", type: "close", …}
bubbles: false
cancelBubble: false
cancelable: false
code: 1002
composed: false
currentTarget: WebSocket {url: "ws://localhost:8081/test", readyState: 3, bufferedAmount: 0, onerror: null, onopen: ƒ, …}
defaultPrevented: false
eventPhase: 0
isTrusted: true
path: []
reason: ""
returnValue: true
srcElement: WebSocket {url: "ws://localhost:8081/test", readyState: 3, bufferedAmount: 0, onerror: null, onopen: ƒ, …}
target: WebSocket {url: "ws://localhost:8081/test", readyState: 3, bufferedAmount: 0, onerror: null, onopen: ƒ, …}
timeStamp: 49784.04500000033
type: "close"
wasClean: true
__proto__: CloseEvent
It looks like someone else was having the same problem here, but no SO response for them.
Oddly, if I set heartbeat: false on the webstomp-client initialiser, the incoming heartbeats will stop as well, but the connection remains open indefinitely... which kinda solves my problem but I'd feel a lot more comfortable if the heartbeats were working.
I've tried various combinations of heartbeat settings on the front-end and back-end, but no joy.
According to the CloseEvent specifications, the code 1002 means that "The endpoint is terminating the connection due to a protocol error." Unfortunately, I don't know how to turn that bit of info into a solution.
The webstomp-client is setup like this:
export const connectWebstompClient = () => {
const websocketsAreNotAvailableInTheBrowser = typeof WebSocket !== 'function';
let stompClient: Client
if (websocketsAreNotAvailableInTheBrowser) {
console.log('Creating SockJS fallback')
stompClient = webstomp.over(new SockJS('http://localhost:8081/test'))
} else {
console.log('Creating websocket')
stompClient = webstomp.client('ws://localhost:8081/test', {
heartbeat: { incoming: 10000, outgoing: 10000},
// heartbeat: false,
protocols: webstomp.VERSIONS.supportedProtocols()
})
}
console.log('connecting webstomp client')
stompClient.connect({/* no headers */}, () => onConnect(), (error: Frame | CloseEvent) => onError(error))
const onConnect = () => {
console.log('subscribing to /topic/test')
stompClient.subscribe('/topic/test', (payload: Message) => showTextMessage(payload))
// Puts stomp client in the Redux store
store.dispatch<any>(addClient(stompClient));
}
const onError = (error: Frame | CloseEvent) => console.error(error)
return stompClient
}
Minimum reproducible example for the front-end is here, and for the back-end here.
Can anybody see what's going on? Your help would be much appreciated.

Answer 1

The problem is coming from this line:
protocols: webstomp.VERSIONS.supportedProtocols()
In fact, supportedProtocols() will return the following array: ['v10.stomp', 'v11.stomp', 'v12.stomp'].
When sending the connect frame to the stomp server, webstomp-client Version 1.2.6 (which I'm examinating) will fall back to the first supportedProtocols() entry i.e v10.stomp of the stomp protocol.
Unfortunately v10.stomp does not support heartbeat and that's why your browser is not sending PING in response to the server PONG.
To fix this problem, you can set the protocols option to 'v11.stomp' or 'v12.stomp' depending on your stomp backend (spring stomp) supported version:
protocols: ["v12.stomp"]
Or if not supported by backend:
protocols: ["v11.stomp"]
I hope that my response solves your issue.