How to close previous EventSource - html

Question

<button onclick="hoge()">hoge</button>
<script>
function hoge(){
if(es){
es.close()
}
var es = new EventSource('/hoge')
es.onmessage = function(e) {
console.log(e)
}
}
</script>
I want to save resources, so it clicked and start connect EventSource.
The new connection start each time clicked, so I want to disconnect the previous connection.
I tried the above code but it didn't work. How should I do please.

Answer 1

You don't have the actual scope of the first EventSource when you call the function the second time, so the variable es is empty for you even though you have an EventSource already instantiated.
I am not sure why do you close and recreate the EventSource in the first place, but here is a solution for your exact problem:
Try this:
<script>
var eventSource;
function hoge(){
if(eventSource){
eventSource.close()
}
eventSource = new EventSource('/hoge')
eventSource.onmessage = function(e) {
console.log(e)
}
}
</script>
Have in mind that the eventSource is located in the global scope(or in other words, it is directly attached to the window object in the context of a browser) this way, so you might want to wrap the whole code in a module or at least in another function. In short, use this:
<script>
(function() {
var eventSource;
function hoge(){
if(eventSource){
eventSource.close()
}
eventSource = new EventSource('/hoge')
eventSource.onmessage = function(e) {
console.log(e)
}
}
})();
</script>