EventSource 不会在 Android Firefox 上自动重新连接

Question

我正在尝试实现一个可以在桌面、Android 和 iOS 上运行的 HTML5 应用程序。该应用程序的主要功能是向服务器无线发送有关要运行哪些脚本的命令，并接收从该服务器推送的有关这些脚本状态的常规消息。

服务器正在运行 nodejs，我决定使用 Server Sent Events 来执行推送通知。这要求我在 Android 上使用 Firefox，因为原生 Android 浏览器不支持 SSE。

我的实现一切正常：节点服务器按照它应该的方式发布事件，我的客户端 HTML5/javascript 在桌面 chrome/firefox/safari、我的 iPod iOS6 和我的 Android 2.2 手机上正常接收它。

但是，我需要处理 4 种常见情况：

• 设备失去 Wi-Fi 信号
• nodejs 服务器崩溃（希望这不常见！）
• 在浏览另一个应用程序等时将浏览器置于 iPod/Android 的后台。
• 浏览器运行时在 iPod/Android 上锁定屏幕

Chrome/Safari 在桌面和 iPod 上的表现都很好，如下所示：如果服务器崩溃，一旦服务器再次启动，站点就会自动重新连接并获取推送的消息，如果浏览器应用程序出于任何原因进入后台，它仍然在后台接收这些消息，或者至少在它回到前台时自动重新连接。

然而，桌面版和 Android 版 Firefox 都急于永久关闭该 EventSource 连接。一旦浏览器失去与服务器的连接，无论是由于服务器崩溃、将 Firefox 应用程序置于后台或锁定屏幕，EventSource 连接都会被终止，并且永远不会尝试重新连接。当然，当你回到它时，你可以重新加载页面，但这很烦人，特别是在你需要锁屏的情况下，因为你需要把手机放在口袋里（这个应用程序需要在一些徒步旅行的情况）。

除了必须一直在 Android Firefox 中重新加载页面之外，任何人都可以为此推荐任何解决方案吗？下面是我的虚拟实现，每 5 秒发送一次随机数。

服务器位于 /main/src

src : function(req, res) {
req.socket.setTimeout(Infinity);    

// send headers for event-stream connection
res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
});
res.write('\n');

var messageCount = 0;
var process; 

function printEvent() {
    messageCount++; 
    rand = Math.floor((Math.random()*10000)+1);
    res.write('id: ' + messageCount + '\n');
    res.write("data: " + rand + '\n\n');        

    process = setTimeout(printEvent, 5000);
}
printEvent(); 

res.socket.on('close', function () {
    res.end();
    clearTimeout(process);
});
}

客户

var source = new EventSource('/main/src');

source.onopen = function(e){        
    $("#test").html("Connected to server. Waiting for data..."); 
} 

source.onmessage = function(e){  
    $("#test").html("MSG: " + e.data);
}

source.onerror = function(e){  
    var txt;
    switch(e.target.readyState){  
    case EventSource.CONNECTING:  
        txt = 'Reconnecting...';  
        break;  
    case EventSource.CLOSED:  
        txt = 'Connection failed. Will not retry.';  
        break;  
    }
    $("#test").html("Error: " + txt);
}

谢谢！！

Answer 1

我只知道一种解决方案，已经在许多库中使用：“心跳”消息 - 在客户端，您可以检查是否在 10 秒内没有从服务器收到“随机数”（5000 秒 + 一些滞后） -连接似乎已断开，您应该重新连接（使用本机 EventSource 您可以使用“close”方法，而不是创建新的 EventSource 或者您可以尝试https://github.com/Yaffle/EventSource）