如何关闭以前的 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>