stompjs
stompjs copied to clipboard
stomp-js
Stomp Client never receives the backend messages using Google Chrome throttling / bad internet
First of all, only Google Chrome seems to be affected by this issue, only with unstable internet connection or throttling. Firefox and even browsers based on Chromium work fine (Vivaldi, Edge).
Reproduction
- open Google Chrome, I have used version 97.0.4692.71 (both Windows and Mac OS)
- turn on throttling (3G slow / 3G fast)
- connect to server
- listen to messages incoming from BE
- send message from BE
- message is never caught
However if you try to send message from client to server, this will work fine: BE receives it with all necessary data. Here is an example of communication:
If I turn off throttling the output is as we expect:
Implementation details
On the BE side we use Spring Messaging implementation of STOMP (v 5.1.9), client side we have tried using STOMP both over SockJS and Websocket, StompJS version 5.4.2 and the latest one.
Here is an example of client for reproduction:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js" integrity="sha512-iKDtgDyTHjAitUDdLljGhenhPwrbBfqTKWO1mkhSFH3A7blITC9MhYon6SjnMhp4o0rADGw9yAC6EW4t5a4K3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>Document</title>
</head>
<body>
<button onclick="sendMessage()">Click here to send a message</button>
<script>
var sock = new WebSocket('ws://localhost:5000/ws');
var stompClient = Stomp.over(sock);
stompClient.connect({}, function(frame) {
stompClient.subscribe('/user/topic/msm/json', function (msg) {
console.log("subscribe USER");
console.log(msg);
});
stompClient.subscribe('/topic/msm/json', function (msg) {
console.log("subscribe GLOBAL");
console.log(msg);
});
});
function sendMessage() {
stompClient.send('/request/json/bean/INVOKE', {}, JSON.stringify({"path":"/main/index.html","payload":{},"elements":null,"actionId":"5dfa0accd38f","eventType":"USER","scope":"PROTOTYPE","beanId":"translationServiceImpl","functionName":"getTranslation","args":[{"0":"RemoveFavoriteItem","1":"translationsRepository"}]}));
}
</script>
</body>
</html>
I see that the underlying Websocket is not receiving the message in throttled mode. In this case, this library will not be able to solve this issue. I will suggest raising it with Chrome.
A minor note - though that is unlikely to resolve the issue - the Cloudflare link for stompjs referees to really old (maybe 2013) version. The syntax is quite old (which does not support useful features like auto-reconnect), please check out the upgrade guide at https://stomp-js.github.io/
I see that the underlying Websocket is not receiving the message in throttled mode. In this case, this library will not be able to solve this issue. I will suggest raising it with Chrome.
A minor note - though that is unlikely to resolve the issue - the Cloudflare link for stompjs referees to really old (maybe 2013) version. The syntax is quite old (which does not support useful features like auto-reconnect), please check out the upgrade guide at https://stomp-js.github.io/
We have tried with the latest version of StompJS, it's the same thing, it's not working on slow networks as well.
I would say this is not about only throttled mode in Chrome. Some clients which have poor internet connection facing with this issue in most popular browsers, like Chrome, Safari, Opera.
We did some tests on the different browsers as well and we have managed to get this code works only in Chrome Canary build and Firefox all kinds of builds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@stomp/[email protected]/bundles/stomp.umd.min.js"></script>
<title>Document</title>
</head>
<body>
<button onclick="sendMessage()">Click here to send a message</button>
<script>
var stompClient = new StompJs.Client({
brokerURL: "ws://localhost:5000/ws",
debug: function (str) {
console.log(str);
},
reconnectDelay: 5000,
heartbeatIncoming: 4000,
heartbeatOutgoing: 4000,
});
stompClient.activate();
stompClient.onConnect = function (frame) {
stompClient.subscribe("/user/topic/msm/json", function (msg) {
console.log("subscribe USER");
console.log(msg);
});
stompClient.subscribe("/topic/msm/json", function (msg) {
console.log("subscribe GLOBAL");
console.log(msg);
});
};
function sendMessage() {
stompClient.publish({ destination: "/request/json/bean/INVOKE", body: JSON.stringify({"path":"/main/index.html","payload":{},"elements":null,"actionId":"5dfa0accd38f","eventType":"USER","scope":"PROTOTYPE","beanId":"translationServiceImpl","functionName":"getTranslation","args":[{"0":"RemoveFavoriteItem","1":"translationsRepository"}]}) })
}
</script>
</body>
</html>
@kum-deepak We are also facing the similar issue, this is a difficult situation as we cannot rely on websocket messages only for clients running on bad network browsers.
I posted today a bug report in Chrome Browser and Opera Browser.
Then I did some tests again in both browsers. In the Chrome Browser seems it's fixed, I haven't managed to reproduce this issue. But in the Opera Browser still facing this issue.
@daveRanjan @DreamCloudProject how did it continue with this problem? is this solved?
@h0jeZvgoxFepBQ2C The problem is gone some time after update to the latest versions of browsers. Seems it’s was bug in the browsers.