So this is my service on Angular, this service is succefull on connecting and sending message

export class WebsocketService {

private stompClient:any;
private isConnectedSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

constructor() {
this.initializeWebSocketConnection();
}

initializeWebSocketConnection() {
const socket = new SockJS('http://localhost:8080/ws');

this.stompClient = new Client({
  webSocketFactory: () => socket,
  debug: (str: string) => {
    console.log(str);
  },
});

this.stompClient.activate();

  this.isConnectedSubject.next(true); // Notify connected state

}


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

public send(queue: string, message: string, headers: any = {}): void {
this.stompClient.publish({
  destination: queue,
  body: message,
  headers: headers
});
}
}

Here are some screnshot when i try to send a message:

browser:

spring boot logs:

Here is my component

export class VideoItemComponent implements  OnInit{


constructor(private websocketService: WebsocketService) {}

ngOnInit(): void {
// Example subscription to '/queue/example'

}
subscribe(){
this.websocketService.subscribe('/topic/1', (message: any) => {
  console.log('Received message:', message.body);
  // Handle message processing here
});
}
send(): void {
const video:Video = {
  videoId:1,
  status:"HELLO",
  dateRequested:null,
  url:"hello",
}

const messageToSend = JSON.stringify(video);
const destinationQueue = '/app/send/1';
const headers = {
  // Optionally, add headers here if needed
};

this.websocketService.send(destinationQueue, messageToSend, headers);
}
}

Here is my spring boot app

Config class:

 @Configuration
 @EnableWebSocketMessageBroker
 public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

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

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

Controller:
@Controller
public class MessageController {

private final SimpMessagingTemplate simpMessagingTemplate;


public MessageController(final SimpMessagingTemplate simpMessagingTemplate) {
    this.simpMessagingTemplate = simpMessagingTemplate;
}

@MessageMapping("/application")
@SendTo("/all")
public Video send(final Video message) throws Exception {
    return message;
}

@MessageMapping("/send/{videoId}") // This handles messages prefixed with /app/send/{videoId}
public void sendMessageToTopic(@Payload  Video video) {
    // Send message to specific topic based on videoId
    System.out.println(video);
    String topic = "/topic/" + video.getVideoId();
    System.out.println(topic);
    simpMessagingTemplate.convertAndSend(topic, video);
}

}

How can i make my angular app receive the message sent to the topic it subscribesa to??