Server-sent event does not work with jersey SSE

Question

I am trying to use JavaScript SSE from Jersey. I have Following code in my resource. I am hosting on Java7 and Tomcat 7. I dont get any error. But I don't see data either on page.

I call /broadcast to post data. It does show message. But nothing comes on client. In Firefox, I do see /broadcast event fired multiple times.

This is reference I used. https://jersey.java.net/documentation/latest/sse.html

    package net.jigarshah.dse.tracker;

    import javax.inject.Singleton;
    import javax.ws.rs.Consumes;
    import javax.ws.rs.GET;
    import javax.ws.rs.POST;
    import javax.ws.rs.Path;
    import javax.ws.rs.Produces;
    import javax.ws.rs.core.MediaType;

    import org.glassfish.jersey.media.sse.EventOutput;
    import org.glassfish.jersey.media.sse.OutboundEvent;
    import org.glassfish.jersey.media.sse.SseBroadcaster;
    import org.glassfish.jersey.media.sse.SseFeature;


@Singleton
@Path("broadcast")
public class SSEResource {
    private SseBroadcaster broadcaster = new SseBroadcaster();

    @POST
    @Produces(MediaType.TEXT_PLAIN)
    @Consumes(MediaType.TEXT_PLAIN)    
    public String broadcastMessage(String message) {
        OutboundEvent.Builder eventBuilder = new OutboundEvent.Builder();
        message = message + "\n\n";
        OutboundEvent event = eventBuilder.name("message")
            .mediaType(MediaType.TEXT_PLAIN_TYPE)
            .data(String.class, message)
            .build();

        broadcaster.broadcast(event);
        System.out.println("broadcasting listen [" +message+ "]");

        return "Message was '" + message + "' broadcast.";
    }

    @GET
    @Produces(SseFeature.SERVER_SENT_EVENTS)
    public EventOutput listenToBroadcast() {
        System.out.println("will listen");
        final EventOutput eventOutput = new EventOutput();
        this.broadcaster.add(eventOutput);
        return eventOutput;
    }
}

My Index.html code is as below.

<script type="text/javascript">
var url = "webapi/broadcast";
//var url="http://localhost:8080/trackapp/webapi/broadcast/listen";
var source=new EventSource(url);
source.onerror=function(event)
{
console.log("error [" + source.readyState + "]");
};

source.onopen = function(event){
    console.log("eventsource opened!");
    };

source.onmessage=function(event)
  {
    console.log(event.data);

  document.getElementById("result").innerHTML+=event.data + "<br>";
  };
</script>

Answer 1

I had the same problem and solved it by not setting the name of the event (i don't know why but this seems to be the solution)... here is the code

OutboundEvent.Builder eventBuilder = new OutboundEvent.Builder();

//WARNING: IF I SET THE NAME OF THE EVENT IT DOES NOT WORK
//eventBuilder.name("message"); 

eventBuilder.mediaType(MediaType.APPLICATION_JSON_TYPE);
eventBuilder.data(EventData.class, data);
OutboundEvent event = eventBuilder.build();

Answer 2

The OutboundEvent.Builder.name method sets the value of the SSE event field. Therefore, it is not treated as a message and cannot be listened using the .onmessage handler. The solution is simply using the addEventListener method to register the listener method.

This code should work with the Jersey sample above.

<script type="text/javascript">
    var url = "webapi/broadcast";
    var source=new EventSource(url);
    source.addEventListener(
        "message",
        function(event){
            console.log(event.data);
            document.getElementById("result").innerHTML+=event.data + "<br>"; },
        false);
</script>

I found this article to be useful to understand how the SSE works in the browser side: http://www.sitepoint.com/server-sent-events/.