SockJS Client in React doesn't subscribe to the 'initial/queue' and one other topic

[marinavelvet]

Hi, I can't get SockJS Client to subscribe to the 'initial/queue' and 'dashboard/livestream' topic. I only get 'topic/livestream', no matter what I do. Here is my code snippet, and also a reminder that in the backend everything is configured fine, so the problem is somewhere either in this logic or in SockJs library. Please help!

import React from 'react'; import SockJsClient from 'react-stomp';

class TableDataStream extends React.Component { constructor(props) { super(props); this.state = { clientConnected: false, messages: [], data: [], circulatingSupply: '', figures: '', initialDataReceived: false }; }

componentDidMount() { this.setState({ clientConnected: true }); }

componentWillUnmount() { this.setState({ clientConnected: false }); }

sendMessage = () => { if (this.clientRef && this.clientRef.state && this.clientRef.state.connected) { console.log(this.clientRef); console.log(this.clientRef.state); console.log(this.clientRef.state.connected); this.clientRef.sendMessage('/dashboard/livestream', {}); } };

handleMessage = (event) => { if (event.topic === '/queue/initial') {

  this.setState({ initialDataReceived: true }); 
}
this.props.handleEvents(event);

};

handleDisconnect = () => { console.log('SockJSClient is disconnected'); };

render() { const { initialDataReceived, clientConnected } = this.state;

return (
  <div>
    {clientConnected && (
      <SockJsClient
        url={window.ENVIRONMENT.REACT_APP_BACKEND_SERVICE_LOCATION + '/register'}
        topics={['/queue/initial', '/topic/livestream']}
        onMessage={(msg) => {
          this.handleMessage(msg);
        }}
        ref={(client) => {
          this.clientRef = client;
        }}
        onConnect={() => {
          this.sendMessage();
        }}
        onDisconnect={this.handleDisconnect}
        debug={true}
      />
    )}
  </div>
);

} }

export default TableDataStream;