デスクトップ、アンドロイド、iOS で動作する HTML5 アプリを実装しようとしています。このアプリの主な機能は、実行するスクリプトに関するコマンドをサーバーにワイヤレスで送信し、そのサーバーからプッシュされたスクリプトのステータスに関する定期的なメッセージを受信することです。
サーバーは nodejs を実行しており、サーバー送信イベントを使用してプッシュ通知を行うことにしました。ネイティブの Android ブラウザーは SSE をサポートしていないため、Android で Firefox を使用する必要があります。
私の実装はすべて正常に動作します。ノード サーバーはイベントを公開しており、クライアント側の HTML5/javascript は、デスクトップの chrome/firefox/safari、iPod iOS6、および Android 2.2 電話で問題なく動作しています。
ただし、対処する必要がある一般的な状況が 4 つあります。
- デバイスが Wi-Fi 信号を失う
- nodejs サーバーのクラッシュ (これが一般的でないことを願っています!)
- iPod/Android で別のアプリを閲覧しているときにブラウザをバックグラウンドにするなど。
- ブラウザの実行中に iPod/Android で画面をロックする
次のように、Chrome/Safari はデスクトップと iPod の両方で完全に動作します。サーバーがクラッシュした場合、サイトは自動的に再接続し、サーバーが再起動するとすぐにプッシュされたメッセージを取得します。何らかの理由でブラウザー アプリがバックグラウンドになった場合、バックグラウンドでこれらのメッセージを受信し続けるか、少なくともフォアグラウンドに戻るとすぐに自動的に再接続します。
ただし、Firefox は、デスクトップと Android の両方で、その 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);
}
ありがとう！！