Stomp client is not always fetching data even if the connection is established

[alrms]

Hello everyone, i'm using stomp client websocket for building a constant connection between my front-end layer and the integration layer. Sometimes in about 50/50 when i login the websocket does not fetch data to the console. Let me share you my code:

import SockJS from 'sockjs-client'; import { Stomp } from 'stompjs/lib/stomp'; import authTokenHandler from './authTokenHandler';

export const SockJSWrapper = { init: endpoint => SockJS(endpoint) };

/**

• Manages the stomp client connection.
• SockJS is used as a websocket abstraction.

• @type {{connect, disconnect}} the exposed connect and disconnect methods */ const stompClient = (() => { // The interval in seconds that re-connection will be // attempted in case of connection failure. const reconnectInterval = 10;

  // An array of endpoints that the stomp client will subscribe. let subscriptions;

  // A function to be called when authorization fails. let onNoAuthCallback;

  // The sockJS object. let socket;

  // The stomp client. let client = null;

  // The ID of the function that will execute the client re-connection. // Needed in order to cancel the re-connection attempt. let reconnectID;

  // The function to be executed when the connection is lost. // Attempts to re-connect. let stompDisconnectCallback;

  // When connection fails this will be checked before trying // to reconnect. let reconnectOnFailure = true;

  // The function to be executed when the connection is established. // Subscribes the client to the predefined end points. const stompConnectCallback = () => { subscriptions.forEach((r) => { client.subscribe(r.route, r.callback); }); };

  // Initializes the stomp client connection. If the // endPointsToSubscribe param is provided, initializes the // predefined endpoints where the client will subscribe. // Same for the no auth callback. const connectClient = (noAuthCallback, endPointsToSubscribe) => { // When the user is not authenticated run this callback if (noAuthCallback) { onNoAuthCallback = noAuthCallback; }

  // Create the subscriptions array with the endpoints that we will listen to if (endPointsToSubscribe) { subscriptions = endPointsToSubscribe; }

  if (client !== null && client.connected) { clearInterval(reconnectID); } else { // A get request is performed in order to identify session // timeout and act accordingly. const websocketEndpoint = /edge/websocket?x-auth-token=${authTokenHandler.getAuthToken()}; fetch(websocketEndpoint).then((httpResponse) => { if (httpResponse.status === 401) { / Probably session time out /

    // Do not retry
    clearInterval(reconnectID);
  
    // Do whatever you are told to do when authorization fails
    onNoAuthCallback();
  } else {
    // Attempt websocket connection
    socket = SockJSWrapper.init(websocketEndpoint);
    client = Stomp.over(socket);
    client.connect(
      {},
      stompConnectCallback,
      stompDisconnectCallback
    );
  }

  }); } };

  stompDisconnectCallback = () => { clearInterval(reconnectID); if (reconnectOnFailure) { reconnectID = setInterval(connectClient, reconnectInterval * 1000); } };

  // Do not reconnect the client after connection failure. const abortReconnect = () => { reconnectOnFailure = false; subscriptions = null; onNoAuthCallback = null; socket = null; client = null; };

  // Expose only a connect and a disconnect method. return { connect: connectClient, isConnected: () => (client !== null && client.connected), abortConnection: abortReconnect }; })();

export default stompClient; When i login i dispatch an action which is used to establish a solid connection. The code is here: import { channel } from 'redux-saga'; import { put, take } from 'redux-saga/effects'; import { hashHistory } from 'react-router'; import { setAlertsNotifications, showNotification, setCurrentValue } from '../actions'; import stompClient from '../stompClient';

// Runs whenever a message is received form the web socket const onWebSocketMessage = (wsChannel) => { function wsMessageCallback(message) { const content = JSON.parse(message.body); const originatingService = message.headers.ocp_serviceName; switch (originatingService) { case 'insertNotifications': wsChannel.put(setAlertsNotifications('newNotifications', content.notifications)); wsChannel.put(setCurrentValue('unreadAlertsNum', content.unreadAlerts)); wsChannel.put(setCurrentValue('unreadNotificationsNum', content.unreadNotifications)); wsChannel.put(setCurrentValue('newAlertsNum', '')); wsChannel.put(setCurrentValue('newNotificationsNum', '')); // } else { // // error arrived // wsChannel.put( // setAccountInfo( // undefined, undefined, undefined, // content.ocp_errorCode, content.ocp_errorDescription) // ); break; default: wsChannel.put(setAlertsNotifications('newNotifications', content.notifications)); wsChannel.put(setCurrentValue('unreadAlertsNum', content.unreadAlerts)); wsChannel.put(setCurrentValue('unreadNotificationsNum', content.unreadNotifications)); wsChannel.put(setCurrentValue('newAlertsNum', '')); wsChannel.put(setCurrentValue('newNotificationsNum', '')); } } return wsMessageCallback; };

// Runs whenever a user is not authorized to view the system const onNoAuthCallback = (wsChannel) => { function wsNoAuthCallback() { hashHistory.push('/login'); wsChannel.put( showNotification('Session timeout', 'danger') // TODO clear store here ); } return wsNoAuthCallback; };

export default function setupWebsocket() { const wsChannel = channel(); const messageCallback = onWebSocketMessage(wsChannel); const noAuthCallback = onNoAuthCallback(wsChannel); stompClient.connect( noAuthCallback, [ { route: '/user/queue/command_response', callback: messageCallback } ]); / eslint-disable no-constant-condition / // Whenever an action is triggered from the callbacks // that belong to the wsChannel take it and dispatch it while (true) { / eslint-enable */ const action = yield take(wsChannel); yield put(action); } }

As a result, when a message arrived it should be pushed through the websocket. But sometimes, it is working properly, and sometimes even if the connection is established no data are pushed. Why is this happening? I 'm giving a lot of effort to solve the issue but nothing works

Last but not least, when the service status for the websocket is OK, the data are not fetched. When, the status is OK and the auth-token is changed the data are fetched

In the console, it also shows me this: Web Socket Opened... stomp.js:134 >>> CONNECT accept-version:1.1,1.0 heart-beat:10000,10000

<<< CONNECTED version:1.1 heart-beat:0,0 user-name:gpat

connected to server undefined stomp.js:134 >>> SUBSCRIBE id:sub-0 destination:/user/queue/command_response

[fpozzobon]

Hi, it can happen if you are connected to a queue ('/user/queue') and have more than one client listening to it.

[hsolg]

I have a similar problem. If I reload the page (triggering a new connect) less than one minute after I loaded it, the STOMP connection will connect successfully, but I don't receive any data from the queue I subscribed to. No error handler is called. If I wait more than one minute before reloading, I receive data normally after the reload. I am unsubscribing the topic and disconnecting the STOMP connection when the page is unloaded. I know that only one client is connecting to the server.

Did you find a solution to your problem?

[fpozzobon]

It sounds like you have an asynchronous problem, like for example you send unsubscribe after reconnecting... Best might be verifying on the server what it receives and in which order... If this is not already the case, using Promise or observables could help ;) (for example library https://github.com/fpozzobon/webstomp-obs :p )

[denov]

i've seen similar behavior against a spring (5) backend

[ghost]

I have had similar problems. Most of the time a server or even OS restart was the solution. The stomp client seems to get kinda buggy as soon as you ran more than one or two extra connections in one session.