Как закрыть предыдущий EventSource

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>

Я хочу сохранить ресурсы, чтобы он щелкнул и начал подключать EventSource.
Новое соединение запускается при каждом нажатии, поэтому я хочу отключить предыдущее соединение.
Я пробовал приведенный выше код, но он не работал. Как мне быть, пожалуйста.

Answer 1

У вас нет действительной области видимости первого EventSource, когда вы вызываете функцию во второй раз, поэтому переменная es для вас пуста, даже если у вас уже есть экземпляр EventSource.

Я не уверен, почему вы вообще закрываете и воссоздаете EventSource, но вот решение для вашей конкретной проблемы:

Попробуйте это:

<script>
var eventSource;

function hoge(){
    if(eventSource){
        eventSource.close()
    }

    eventSource = new EventSource('/hoge')

    eventSource.onmessage = function(e) {
        console.log(e)
    }
}
</script>

Имейте в виду, что eventSource находится в глобальной области видимости (или, другими словами, он напрямую присоединяется к объекту окна в контексте браузера), поэтому вы можете захотеть обернуть весь код вмодуль или хотя бы в другой функции.Короче говоря, используйте это:

<script>
(function() {
    var eventSource;

    function hoge(){
        if(eventSource){
            eventSource.close()
        }

        eventSource = new EventSource('/hoge')

        eventSource.onmessage = function(e) {
            console.log(e)
        }
    }
})();
</script>