EventSource永久自动重新连接 [英] EventSource permanent auto reconnection

问题描述

我在项目前端使用JavaScript EventSource。

I am using JavaScript EventSource in my project front-end.

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

Sometimes, the connection between the browser and the server fails or the server crashes. In these cases, EventSource tries to reconnect after 3 seconds, as described in the documentation.

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

But it tries only once. If there is still no connection, the EventSource stops to try reconnection and the user have to refresh the browser window in order to be connected again.

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

How I can prevent this behavior? I need the EventSource to try reconnecting forever, not only once.

浏览器是Firefox。

The browser is Firefox.

推荐答案

我通过实现保持活动系统来处理这个问题;如果浏览器重新连接我，这一切都很好，但我认为有时它不起作用，而且不同的浏览器可能表现不同。

I deal with this by implementing a keep-alive system; if the browser reconnects for me that is all well and good, but I assume sometimes it won't work, and also that different browsers might behave differently.

我花了一个在我的书的第五章（Blatant plug，在这里找到O'Reilly：）数据推送应用程序使用HTML5 SSE ），但如果您想要一个不需要任何后端更改的非常简单的解决方案，请设置一个全局计时器，该计时器将在30秒后触发。如果它触发，那么它将终止EventSource对象并创建另一个。最后一个难题是在你的事件监听器中：每次从后端获取数据时，杀死计时器并重新创建它。即只要你至少每30秒获得一次新数据，计时器就永远不会触发。

I spend a fair few pages on this in chapter five of my book (Blatant plug, find it at O'Reilly here: Data Push Applications Using HTML5 SSE), but if you want a very simple solution that does not require any back-end changes, set up a global timer that will trigger after, say, 30 seconds. If it triggers then it will kill the EventSource object and create another one. The last piece of the puzzle is in your event listener(s): each time you get data from the back-end, kill the timer and recreate it. I.e. as long as you get fresh data at least every 30 seconds, the timer will never trigger.

这里有一些最小的代码来显示：

Here is some minimal code to show this:

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（）。否则，在它有机会提供任何数据之前失败或死亡的连接将被忽视。

Also note that I call gotActivity() just before connecting. Otherwise a connection that fails, or dies before it gets chance to deliver any data, would go unnoticed.

顺便说一下，如果你能够改变后端在25-30秒的安静之后，值得发出一条空白信息（心跳）。否则前端将不得不假设后端已经死亡。当然，如果您的服务器发送的间隔时间不超过25-30秒，则无需执行任何操作。

By the way, if you are able to change the back-end too, it is worth sending out a blank message (a "heartbeat") after 25-30 seconds of quiet. Otherwise the front-end will have to assume the back-end has died. No need to do anything, of course, if your server is sending out regular messages that are never more than 25-30 seconds apart.

如果您的应用程序依赖于事件-Last-Id标头，实现你的保持活动系统必须模拟这个;得到更多参与。

If your application relies on the Event-Last-Id header, realize your keep-alive system has to simulate this; that gets a bit more involved.

这篇关于EventSource永久自动重新连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！