I'm trying to implement Server Sent Events using Spring SseEmitter as described in this Youtube video.
I'm able to initiate the event stream and receive the data from the server sent event.
However, I can see multiple EventStream type requests fired from the client and arriving at the server. The way I understand it, EventSource should send a single HTTP request and then should maintain a half duplex connection from the server, using which server sends the events to the client.
Why is it then sending requests at regular interval ? Isn't it then like polling instead of a half duplex connection ?
Bellow is the code that I'm using.
Server code
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter.SseEventBuilder;
@RestController
public class TestService {
private List<SseEmitter> subscriberList = Collections.synchronizedList(new ArrayList<>());
@RequestMapping("inbox")
public SseEmitter inbox() {
SseEmitter subscriber = new SseEmitter();
subscriberList.add(subscriber);
subscriber.onCompletion(() -> {
subscriberList.remove(subscriber);
System.out.println("Removed the pleted event emitter");
});
System.out.println("Subscriber arrived");
return subscriber;
}
@RequestMapping("message")
public String message(@RequestParam("message") String message) {
System.out.println("SubscriberList size " + subscriberList.size());
for(SseEmitter subscriber : subscriberList) {
try {
SseEventBuilder eventBuilder = SseEmitter.event().name("group1").data(message);
subscriber.send(eventBuilder);
} catch (Exception e) {
e.printStackTrace();
}
};
return message;
}
}
Client code
$(function () {
console.log("Started");
var eventSource = new EventSource("/inbox");
eventSource.addEventListener('error', function(e) {
if (e.currentTarget.readyState == EventSource.CLOSED) {
console.log("Connection is closed")
} else {
source.close();
console.log("Closing connection");
}
});
eventSource.addEventListener("group1", function (event) {
console.log(event.data);
document.querySelector("body").innerHTML += "<div>" + event.data + "</div>";
});
});
Bellow is the client network tab screenshot from chrome
Here's server side log
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
I'm trying to implement Server Sent Events using Spring SseEmitter as described in this Youtube video.
I'm able to initiate the event stream and receive the data from the server sent event.
However, I can see multiple EventStream type requests fired from the client and arriving at the server. The way I understand it, EventSource should send a single HTTP request and then should maintain a half duplex connection from the server, using which server sends the events to the client.
Why is it then sending requests at regular interval ? Isn't it then like polling instead of a half duplex connection ?
Bellow is the code that I'm using.
Server code
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter.SseEventBuilder;
@RestController
public class TestService {
private List<SseEmitter> subscriberList = Collections.synchronizedList(new ArrayList<>());
@RequestMapping("inbox")
public SseEmitter inbox() {
SseEmitter subscriber = new SseEmitter();
subscriberList.add(subscriber);
subscriber.onCompletion(() -> {
subscriberList.remove(subscriber);
System.out.println("Removed the pleted event emitter");
});
System.out.println("Subscriber arrived");
return subscriber;
}
@RequestMapping("message")
public String message(@RequestParam("message") String message) {
System.out.println("SubscriberList size " + subscriberList.size());
for(SseEmitter subscriber : subscriberList) {
try {
SseEventBuilder eventBuilder = SseEmitter.event().name("group1").data(message);
subscriber.send(eventBuilder);
} catch (Exception e) {
e.printStackTrace();
}
};
return message;
}
}
Client code
$(function () {
console.log("Started");
var eventSource = new EventSource("/inbox");
eventSource.addEventListener('error', function(e) {
if (e.currentTarget.readyState == EventSource.CLOSED) {
console.log("Connection is closed")
} else {
source.close();
console.log("Closing connection");
}
});
eventSource.addEventListener("group1", function (event) {
console.log(event.data);
document.querySelector("body").innerHTML += "<div>" + event.data + "</div>";
});
});
Bellow is the client network tab screenshot from chrome
Here's server side log
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
Removed the pleted event emitter
Subscriber arrived
1 Answer
Reset to default 6The problem here is that the server unexpectedly closes the connection, instead of doing its work while leaving it open. When this happnes, the client re-sends a request to open a connection and to start streaming Server Sent Events. The server then closes the connection again and again, leading to an infinate loop.
One way to make sure this is the case is to set the retry field in order to increase the browser's waiting time (the default is about 2-3 seconds). Another way is to have a while (true) {} on the server side, just after the request arrives.
Also take a look at this post about SSEs.