Problems using angular + spring setup

[jeanmelo25]

I am attempting to use RxStomp with Angular and Spring, but I am unable to test it as it times out every time and does not connect.

Here is my service: `export class RxStompService extends RxStomp { constructor(private tokenService: ApiTokenService) { const client: Client = new Client(myRxStompConfig as StompConfig); super(client);

const config = Object.assign(myRxStompConfig, {
  connectHeaders: { Authorization: this.tokenService.token }
} as RxStompConfig);

this.configure(config);
this.activate();

} } `

Here's is the log: [webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled. kendo-message.service.ts:156 Progress Kendo UI for Angular base-paginated-grid.component.html:11 Progress Kendo UI for Angular base-paginated-grid.component.html:34 Progress Kendo UI for Angular index-esm.js:1 Progress Kendo UI for Angular index-esm.js:1 Progress Kendo UI for Angular index-esm.js:1 Progress Kendo UI for Angular rx-stomp.config.util.ts:9 Mon Dec 04 2023 18:53:39 GMT-0300 (Hora padrão de Brasília) '"Opening Web Socket..."'

Request:

[jeanmelo25]

Config:

myRxStompConfig: RxStompConfig = { brokerURL: ws://${window.location.origin.replace('http://', '')}/ws, heartbeatIncoming: 0, heartbeatOutgoing: 20000, reconnectDelay: 5000, debug: (msg: string): void => { console.log(new Date(), JSON.stringify(msg)); } };

[jeanmelo25]

I've tried this way too: class StompConnectorService { private stompClient: Client;

constructor() { const stompConfig = RxStompConfig as StompConfig;

this.stompClient = new Client(stompConfig);

this.stompClient.onConnect = (frame) => this.onStompConnect(frame);
this.stompClient.onStompError = (frame) => this.onStompError(frame);

this.stompClient.activate();

}

private onStompConnect(frame) { console.log('Stomp connected:', frame); }

private onStompError(frame) { console.error('Stomp error:', frame); }

public connect(): void { this.stompClient.activate(); }

public disconnect(): void { this.stompClient.deactivate(); }

public subscribe(destination: string, callback: (message: any) => void): void { this.stompClient.subscribe(destination, callback); }

public sendMessage(destination: string, body: string): void { this.stompClient.publish({ destination, body }); } }

[jeanmelo25]

Another test with timeout set to 3000ms:

I'm doing a proxy for a local server at port:8080

[jeanmelo25]

It's interesting to note that the deprecated implementation still works perfectly fine. `class StompLegacyConnector { private stompClient: any;

constructor( private subscribers: { destination: string; callback: messageCallbackType }[], private headers?: StompHeaders ) { const socket = new SockJS(/ws); this.stompClient = Stomp.over(socket);

this.stompClient.connect({}, (frame) => {
  for (const subscriber of this.subscribers) {
    this.stompClient.subscribe(subscriber.destination, subscriber.callback, this.headers);
  }
});

}

public publish(params: IPublishParams): void { this.stompClient.publish(params); } }`

[kum-deepak]

I do not use Spring and have no knowledge. Based on previous questions. I will request you to check the following:

• Quite often, the SockJS and WebSocket endpoints are on different URLs. Please check that your Spring backend is configured for WebSocket and you are trying to connect to the correct URL.
• Check that CORS is configured correctly.

Checking the logs of the Spring backend may provide additional information.

[jeanmelo25]

The backend is basically:

`@EnableWebSocketMessageBroker @Order(Ordered.HIGHEST_PRECEDENCE + 99) public class WebSocketBrokerConfig implements WebSocketMessageBrokerConfigurer {

private final RabbitProperties rabbitProperties;

@Value("${websocket.relay.port}")
private int port;

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry
        .addEndpoint("/ws")
        .withSockJS();
}

@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
    registry
            .setApplicationDestinationPrefixes("/ws")
            .enableStompBrokerRelay("/topic")
            .setRelayHost(rabbitProperties.getHost())
            .setRelayPort(port)
            .setClientLogin(rabbitProperties.getUsername())
            .setClientPasscode(rabbitProperties.getPassword())
            .setVirtualHost(rabbitProperties.getVirtualHost());
}`

It is configured to connect both ways when "addEndpoint("/ws")" does the job for the new way, "withSockJs" creates a fallback to connect withSockJs for legacy browsers if needed

[jeanmelo25]

About The CORS, is it correctly configured and I'm proxying the request from my frontend to the same origin.

[jeanmelo25]

I just solved the issue...

[kino1ol]

@jeanmelo25 What is version angular used here?

[aprognimak]

I just solved the issue...

Any insight on HOW please?