I have used eventSourcePolyfill fetch API for server sent events. My problem is inspite of closing the connection from front end, it is getting called repeatedly with error message -

eventsource.js:913 Error: No activity within 45000 milliseconds. No response received. Reconnecting.

Please find the code below -

callSSE(that, uid) {
let authHeader = localStorage.getItem('token');
let obj = {
  Authorization: authHeader,
  progress_bar_guid: uid,
  heartbeatTimeout: 600*1000
}
this.source = new EventSourcePolyfill("SSE URL", {headers: obj});

this.source.addEventListener('message', function(e: any) {
  let dt = JSON.parse(e.data);
}, false)

this.source.addEventListener('open', function(e: any) {
  if (!e) {
    if (this.source) this.source.Close();
  }
  console.log('connected!');
}, false)
this.source.addEventListener('error', function(e: any) {
  if (this.source) {
    this.source.close();
  }
}, false)
this.source.addEventListener("COMPLETE", function(e: any) {
  let dt = JSON.parse(e.data);
  
  if (this.source) {
    this.source.Close(); //It is not coming here. Because this.source is undefined
  }
})
}

Server is sending the last record with data: COMPLETE. In the COMPLETE eventListener I want to close this.source connection. But somehow it is not closing.

Any help is appreciated!

Thanks,