Server-Sent Event connections are not closed despite calling `close()`

Question

I want to programmatically close the Server-Sent-Events once a user logs out. However when the user logs back in, the browser does not execute any https-requests anymore because it has reached its limit of SSE connections.

I'm using EventSource for listening to events.
This is how I close my connections:

var eventSource;
function onChange(accountId:string, callback){
    var url = "...";

    eventSource = new EventSource(url);

    if(eventSource){
        eventSource.addEventListener("put", callback);
    }
}

function close(){
    this.eventSource.close()
}

When I was observing the network connections on the browser, I realized the connection still exists. The output in Timing is: Caution: request is not finished yet!, the following event-streams are stalled due to limited number of connections.

I'm not sure if EventSource is designed to behave like this, but I could not find anything regarding this issue, since many people don't have the same scenario.
Everytime I reload the page in my browser (chrome) all existing connections are closed, but I don't want to reload the page to workaround this issue.

Darren Cook Darren Cook · Accepted Answer · 2017-12-19T10:47:25

Make sure that this.eventSource is referring to what you think it is. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this If called from an event handler it won't be the global scope.

After calling xxx.close(), set xxx to null. (I doubt that is the problem, but it might help the garbage collection, and also helps find bugs.)

As a 3rd idea of the problem, avoid giving globals the same name as built-in objects. I normally use es for my event source objects.

Server-Sent Event connections are not closed despite calling `close()`

1 Answers