Reports

Why is addEventListener('order') not receiving anything?

One possible cause is your code public SseEmitter subscribe() does not have @CrossOrigin("*") .

Is there something I'm missing with SseEmitter.event().name(...) or how Spring formats the stream?

I tested that emitter.send(SseEmitter.event().name("order").data(messageToSend)); worked in an example.

Does using data: gymIdx (a plain number) cause issues?

In emitter.send(SseEmitter.event().name("order").data(messageToSend));, I replaced messageToSend with 1 and I still got the 1 in the browser. Therefore, a number here was tested to not cause problems in sending the message.

What’s the correct way to verify eventName-based listeners in EventSource with Spring Boot?

Whether it is correct or not depends on your data, in my opinion. If you get what you want in the browser... I think you did the verification eventSource.addEventListener('order', (event) => { console.log('[✅ Event received]', event.data); }); in the browser. This was already some verification. To help speed up the debugging process, I printed the response in the HTML.

    eventSource.value.addEventListener("order", (event) => {
      const orderResponse = ("[✅ Event received]", event.data);
      console.log(orderResponse);
      document.querySelector("#orders").innerHTML = document.querySelector("#orders").innerHTML + "<div>" + orderResponse + "</div>";
      events.value.push(JSON.parse(event.data)); 
    });

I also printed what Spring Boot showed:

                for (int i = 0; i < orders.size(); i++) { 

                    String messageToSend = orders.get(i);

                    emitter.send(SseEmitter.event().name("order").data(messageToSend));

                    System.out.println(messageToSend);
                    
                    TimeUnit.SECONDS.sleep(2);
 
                     if (i > 18){
                         emitter.complete();
                     }

                }

When comparing what Spring Boot showed and what the browser showed, I had the confidence in saying that I had what data I wanted because they were the same on both sides.

{ "id": "1", "time" : "2025-04-17T03:56:54.213627600Z", "OrderStatus": "pending" }
{ "id": "2", "time" : "2025-04-17T03:56:54.213627600Z", "OrderStatus": "complete" }
{ "id": "3", "time" : "2025-04-17T03:56:54.213627600Z", "OrderStatus": "complete" }
{ "id": "4", "time" : "2025-04-17T03:56:54.213627600Z", "OrderStatus": "complete" }
{ "id": "5", "time" : "2025-04-17T03:56:54.213627600Z", "OrderStatus": "complete" }
{ "id": "6", "time" : "2025-04-17T03:56:54.213627600Z", "OrderStatus": "pending" }
{ "id": "7", "time" : "2025-04-17T03:56:54.213627600Z", "OrderStatus": "complete" }
{ "id": "8", "time" : "2025-04-17T03:56:54.213627600Z", "OrderStatus": "complete" }
{ "id": "9", "time" : "2025-04-17T03:56:54.213627600Z", "OrderStatus": "pending" }
{ "id": "10", "time" : "2025-04-17T03:56:54.213627600Z", "OrderStatus": "complete" }

My usable example was here. After starting Spring Boot, I opened http://localhost:8080 in my browser.

The Nuxt files were in the nuxt folder for npm install and npm run dev. Then, I opened http://localhost:3000 in my browser.

79578452