I’m building a web application using Flowable Engine, Angular, and Spring Boot. The application allows users to add products and manage accessories through a UI. Here's an overview of its functionality:

• Users can add products through a form, and the products are stored in a table.
• Each product has buttons to Edit, Delete, Add Accessory, and View Accessory.
• Add Accessory shows a collapsible form below the product row to add accessory details.
• View Accessory displays a collapsible table below the products, showing the accessories of a product.
• Default accessories are added for products using Flowable.
• Invoices are generated for every product and accessory using Flowable and Spring Boot. These invoices need to be sent to the Angular frontend in real time using a WebSocket service.

Problem:

The WebSocket connection is visible in the browser’s Network tab, but:

• No data is being passed from the server to Angular.
• There are no console log statements to indicate any message reception.
• The WebSocket seems to open a connection but does not transfer any data.

Below are the relevant parts of my code:

Spring Boot WebSocket Configuration:

u/Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

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

Controller to Send Data:

@RestController
public class InvoiceController {

    @Autowired
    private SimpMessagingTemplate template;

    @PostMapping("/addProduct")
    public ResponseEntity<?> addProduct(@RequestBody Product product) {
        // Logic to process and save the product
        template.convertAndSend("/topic/invoice", "Invoice generated for product: " + product.getName());
        return ResponseEntity.ok("Product added successfully");
    }
}

Angular WebSocket Service:

import { Injectable } from '@angular/core';
import { Client } from '@stomp/stompjs';
import * as SockJS from 'sockjs-client';

u/Injectable({
  providedIn: 'root',
})
export class WebSocketService {
  private client: Client;

  constructor() {
    this.client = new Client();
    this.client.webSocketFactory = () => new SockJS('http://localhost:8080/ws');

    this.client.onConnect = () => {
      console.log('Connected to WebSocket');
      this.client.subscribe('/topic/invoice', (message) => {
        console.log('Received:', message.body);
      });
    };

    this.client.onStompError = (error) => {
      console.error('WebSocket error:', error);
    };

    this.client.activate();
  }
}

What I’ve Tried:

1. Verified that the WebSocket connection opens (visible in the Network tab).
2. Ensured that the server is sending data using template.convertAndSend.
3. Confirmed that the Angular service subscribes to the correct topic (/topic/invoice).
4. Checked for errors in both the backend and frontend but found none.

What I Need Help With:

1. Why is the WebSocket connection not passing data to Angular?
2. How can I debug this issue effectively?
3. Are there any missing configurations or incorrect implementations in the code?

Any suggestions, debugging steps, or fixes would be greatly appreciated! Let me know if you need more details. Thanks in advance! 😊