server sent events: how to detect client disconnection from Node.js server - node.js

Question

I've setup a simple server-sent-event for testing which sends data periodically once client gets connected. When client reloads the page or move to another page, browser closes the connection and stops receiving the events.
app.get("/stream", (req, res) =>{
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
const data = JSON.parse(fs.readFileSync("./data/group_list.json"))
let i = 0;
const intervalId = setInterval(function() {
++i;
console.log('iteration', i);
if ( i === 5 ) {
clearInterval(intervalId);
res.end();
return 1
}
res.write('data:' + JSON.stringify(data) + '\n\n');
res.flush();
}, 3000);
})
Here's my event handler in React.
handleSSE = () => {
console.log('here');
const url = "/test/stream"
//url can be your server url
if ('EventSource' in window) {
let source = new EventSource(url)
source.onopen = (e) => console.log('cnx successful', e);
source.onmessage = (e) => console.log('data-', JSON.parse(e.data));
source.onerror = (e) => {
console.log('cnx failed', e);
source.close();
};
}
}
The SSE only stops emitting the data once "i" reaches a certain number, I'd like the SSE to detect & stop emitting data when client closes the connection. what I specifically need is a way for setInterval() in my server to stop when the client closes the connection.

Answer 1

I think you need to add windows unload event inside handleSSE function for check the connection.
For that you need to add Event Listener of beforeunload inside handleSSE function.
So your final handleSSE function will be:
handleSSE = () => {
console.log('here');
const url = "/test/stream"
//url can be your server url
if ('EventSource' in window) {
let source = new EventSource(url)
source.onopen = (e) => console.log('cnx successful', e);
source.onmessage = (e) => console.log('data-', JSON.parse(e.data));
source.onerror = (e) => {
console.log('cnx failed', e);
source.close();
};
window.addEventListener("beforeunload", () => {
if (source.readyState !== EventSource.CLOSED) {
source.close();
}
});
}
}