SpringBoot + WebFlux + Reactjs Server Sent Events onmessage not fire up - reactjs

Question

I see EventStream on the network, but my clientSource.onmessage does not fireup on the client. I didn't find many examples in which they would use WebFlux Functional Endpoints for SSE. What am I doing wrong?
Router where /sseget is my SSE endpoint:
#Component
class PersonRouter {
#Bean
fun personRoutes(personRouteHandler: PersonRouteHandler) = coRouter {
"/person".nest {
GET("/", personRouteHandler::getTest)
// GET("findById", accept(MediaType.APPLICATION_JSON), personRouteHandler::)
GET("paramstest", accept(MediaType.APPLICATION_JSON), personRouteHandler::paramsTest)
POST("posttest", accept(MediaType.APPLICATION_JSON), personRouteHandler::postTest)
}
"/sse".nest {
GET("/sseget", personRouteHandler::sseGet)
}
}
}
Handler:
suspend fun sseGet(request: ServerRequest): ServerResponse {
val result = Flux.interval(Duration.ofSeconds(3))
.map{
ServerSentEvent.builder<String>()
.id(it.toString())
.event("periodic-event")
.data("SSE - " + LocalTime.now())
.comment("nejaky comment")
.retry(Duration.ofSeconds(10))
.build()
}
return ServerResponse
.ok()
.body(BodyInserters.fromServerSentEvents(result)).awaitSingle()
}
ReactJs client:
const ServerSideEventExample: React.FC<IProps> = (props) => {
const [listening, setListening] = useState(false);
useEffect(() => {
let eventSource: EventSource | undefined = undefined;
debugger;
if (!listening) {
debugger;
eventSource = new EventSource("http://localhost:8085/sse/sseget");
eventSource.onopen = (event) => {
debugger;
console.log(event);
};
eventSource.onmessage = (event) => {
debugger;
console.log(event);
};
eventSource.onerror = (err) => {
debugger;
console.error("EventSource failed:", err);
};
setListening(true);
}
return () => {
if (eventSource) {
eventSource.close();
console.log("event closed");
}
};
}, []);
return <div>a</div>;
};

Answer 1

Just put produce(MediaType.TEXT_EVENT_STREAM_VALUE) Your react application can't recognize your event.

Answer 2

Add the content-type to your server response as show below:
return ServerResponse
.ok()
.contentType(MediaType.TEXT_EVENT_STREAM)
.body(BodyInserters.fromServerSentEvents(result)).awaitSingle()
And remember to change the event parameter to "message" as follows
.id("Your ID")
.event("message") //<=== HERE
.data({your event here})
.comment("any comment")
.build();