Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Stomp Client never receives the backend messages using Google Chrome throttling / bad internet

See original GitHub issue

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: Bildschirmfoto 2022-01-20 um 12 12 02

If I turn off throttling the output is as we expect: Bildschirmfoto 2022-01-20 um 12 12 16

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>

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:8 (1 by maintainers)

Top GitHub Comments

1reaction

DreamCloudProjectcommented, Feb 18, 2022

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.

1reaction

DreamCloudProjectcommented, Jan 23, 2022

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/stompjs@6.1.2/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>