javascript - EventSource 永久自动重连

Question

我在项目前端使用 JavaScript EventSource。

有时，浏览器和服务器之间的连接失败或服务器崩溃。在这些情况下，EventSource 会在 3 秒后尝试重新连接，如文档中所述。

但它只尝试一次。如果仍然没有连接，EventSource 会停止尝试重新连接，用户必须刷新浏览器窗 Eloquent 能再次连接。

如何防止这种行为？我需要 EventSource 永远尝试重新连接，而不仅仅是一次。

浏览器是Firefox。

Answer 1

我通过实现一个保持事件的系统来处理这个问题；如果浏览器为我重新连接，那一切都很好，但我认为有时它不会工作，而且不同的浏览器可能会有不同的行为。

我在我的书的第五章(Blatant plug，在 O'Reilly 上找到它:Data Push Applications Using HTML5 SSE)中花了相当多的篇幅来讨论这个问题，但是如果你想要一个不需要任何后端的非常简单的解决方案更改，设置一个将在 30 秒后触发的全局计时器。如果它触发，那么它将终止 EventSource 对象并创建另一个对象。最后一 block 拼图在您的事件监听器中:每次您从后端获取数据时，终止计时器并重新创建它。 IE。只要您至少每 30 秒获取一次新数据，计时器就永远不会触发。

这里有一些最小的代码来展示这一点:

var keepAliveTimer = null;

function gotActivity(){
  if(keepaliveTimer != null)clearTimeout(keepaliveTimer);
  keepaliveTimer = setTimeout(connect, 30 * 1000);
}

function connect(){
  gotActivity();
  var es = new EventSource("/somewhere/");
  es.addEventListener('message', function(e){
    gotActivity();
    },false);
}
...
connect();

另请注意，我在连接之前调用了 gotActivity()。否则，连接失败或在它有机会传送任何数据之前终止，将不会引起注意。

顺便说一下，如果您也可以更改后端，那么在 25-30 秒的安静之后发送一条空白消息(“心跳”)是值得的。否则前端将不得不假设后端已经死亡。当然，如果您的服务器发送的定期消息的间隔从不超过 25-30 秒，则无需执行任何操作。

如果您的应用程序依赖于 Event-Last-Id header ，请意识到您的保活系统必须对此进行模拟；这会涉及更多。