Server Sent Events: JavaScript events not working

Question

I have written a small piece of code for generating server sent events and a corresponding JavaScript client to log all the messages. When i send the request, I can see in network tab of chrome that browser is receiving all the messages from server but in JavaScript only open event listener is triggered and message listener is never triggered. I have spent good amount of time on this without any success.

Here is my Java code which generates SSE:

@GET
@Path("/updates/sse")
@Produces(MediaType.SERVER_SENT_EVENTS)
public void publishUpdates(@Context SseEventSink sseEventSink) {        
    new Thread(() -> {
        for (int i = 0; i < 10; i++) {
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            final OutboundSseEvent event = sse.newEventBuilder()
                    .name("message-to-client")
                    .data(String.class, "Hello world " + i + "!")
                    .build();
            sseEventSink.send(event);
        }
    }).start();
}

Here is my JavaScript code to handle response:

    if(typeof(EventSource) !== "undefined") {
  var source = new EventSource("/gra/services/updates/sse");
  source.addEventListener('message', function(e) {
  console.log("message");
  console.log(e.data);
}, false);

source.addEventListener('open', function(e) {
  // Connection was opened.
  console.log("open");
}, false);

source.addEventListener('error', function(e) {
console.log("error");
console.log(e);
  if (e.readyState == EventSource.CLOSED) {
    // Connection was closed.
  }
}, false);
} else {
  document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}

Here is what I get in console in chrome. Only open listener is invoked:

and here is what I can see in Network tab in chrome:

I am trying to figure out if browser is receiving the event data why message listener is not being invoked.

Answer 1

See the example in documentation for EventSource:

  /* The event "message" is a special case, as it
   * will capture events without an event field
   * as well as events that have the specific type
   * `event: message` It will not trigger on any
   * other event type.
   */
  sse.addEventListener("message", function(e) {
    console.log(e.data)
  })

Your message type is message-to-client, not "nothing".