JavaScript EventSource SSEブラウザで起動しない
HTML5で開発している新しいWebサイトにサーバーサイドイベントを提供するnodejsサーバーを開発しています。
サーバーにtelnetで接続すると、正しく機能し、必要なHTTP応答ヘッダーに続いて、機能を証明するために現在2〜3秒ごとに生成しているイベントのストリームが送信されます。
私はFireFoxの最新バージョンを試しましたChromeおよびOperaそして彼らはEventSourceオブジェクトを作成し、nodejsサーバーに接続しますOKですが、どのブラウザーも生成しませんonopen、onmessage、onerrorなどのイベントの.
ただし、nodejsサーバーを停止してブラウザーからの接続を終了すると、ブラウザーからすべてのメッセージが突然ディスパッチされ、すべてのイベントが表示されます。その後、ブラウザはすべて、仕様に従ってサーバーへの再接続を試みます。
私はすべてをウェブサーバーでホストしています。ローカルファイルでは何も実行されていません。
購入した本を含め、オンラインで見つけることができるすべてのものを読みましたが、そのような問題を示すものは何もありません。何か足りないものはありますか？
サンプルサーバー実装
var http = require('http');
var requests = [];
var server = http.Server(function(req, res) {
var clientIP = req.socket.remoteAddress;
var clientPort = req.socket.remotePort;
res.on('close', function() {
console.log("client " + clientIP + ":" + clientPort + " died");
for(var i=requests.length -1; i>=0; i--) {
if ((requests[i].ip == clientIP) && (requests[i].port == clientPort)) {
requests.splice(i, 1);
}
}
});
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Access-Control-Allow-Origin': '*',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'});
requests.Push({ip:clientIP, port:clientPort, res:res});
res.write(": connected.\n\n");
});
server.listen(8080);
setInterval(function test() {
broadcast('poll', "test message");
}, 2000);
function broadcast(rtype, msg) {
var lines = msg.split("\n");
for(var i=requests.length -1; i>=0; i--) {
requests[i].res.write("event: " + rtype + "\n");
for(var j=0; j<lines.length; j++) {
if (lines[j]) {
requests[i].res.write("data: " + lines[j] + "\n");
}
}
requests[i].res.write("\n");
}
}
サンプルhtmlページ
<!DOCTYPE html>
<html>
<head>
<title>SSE Test</title>
<meta charset="utf-8" />
<script language="JavaScript">
function init() {
if(typeof(EventSource)!=="undefined") {
var log = document.getElementById('log');
if (log) {
log.innerHTML = "EventSource() testing begins..<br>";
}
var svrEvents = new EventSource('/sse');
svrEvents.onopen = function() {
connectionOpen(true);
}
svrEvents.onerror = function() {
connectionOpen(false);
}
svrEvents.addEventListener('poll', displayPoll, false); // display multi choice and send back answer
svrEvents.onmessage = function(event) {
var log = document.getElementById('log');
if (log) {
log.innerHTML += 'message: ' + event.data + "<br>";
}
// absorb any other messages
}
} else {
var log = document.getElementById('log');
if (log) {
log.innerHTML = "EventSource() not supported<br>";
}
}
}
function connectionOpen(status) {
var log = document.getElementById('log');
if (log) {
log.innerHTML += 'connected: ' + status + "<br>";
}
}
function displayPoll(event) {
var html = event.data;
var log = document.getElementById('log');
if (log) {
log.innerHTML += 'poll: ' + html + "<br>";
}
}
</script>
</head>
<body onLoad="init()">
<div id="log">testing...</div>
</body>
</html>
これらの例は基本的なものですが、本やオンラインで見た他のすべてのデモと同じ種類です。 eventSourceは、クライアント接続を終了するかサーバーを終了した場合にのみ機能しているように見えますが、これはSSEの代わりにポーリングされ、特にSSEを使用したいと思います。
興味深いことに、 html5rock のthouseなどのデモも、オンラインで使用すると期待どおりに機能しないようです。
ひびが入った！ :)
テストを手伝ってくれた Tom Kersten からの助けに感謝します。コードは問題ではないことが判明しました。
警告..クライアントがWeb要求を傍受するあらゆる種類のウイルス対策ソフトウェアを使用している場合、ここで問題が発生する可能性があります。この場合、エンタープライズグレードのアンチウイルスおよびファイアウォール保護を提供するSophos Endpoint Securityには、Web保護と呼ばれる機能があります。この機能には、ダウンロードをスキャンするオプションがあります。 SSE接続はダウンロードとして扱われるため、接続が閉じられ、ストリームがスキャンのために受信されるまでブラウザに解放されないようです。このオプションを無効にすると問題が解決します。バグレポートですが、他のアンチウイルスシステムでも同じことが行われる可能性があります。
あなたの提案に感謝し、みんなを助けてください:)
http://www.w3.org/TR/eventsource/#parsing-an-event-stream
このようなリソースのためにリモートサーバーに確立された接続は長期間有効であると予想されるため、UAは適切なバッファリングが使用されていることを確認する必要があります。特に、行を使用した行バッファリングは、単一のU + 000A LINE FEED（LF）文字で終了するように定義されていますが、ブロックバッファリングまたは予想される行終了が異なる行バッファリングは、イベントディスパッチの遅延を引き起こす可能性があります。
行末で遊んでみてください（"\r\n" の代わりに "\n"）。
http://www.w3.org/TR/eventsource/#notes
また、HTTPチャンクは、このプロトコルの信頼性に予期しない悪影響を与える可能性があることにも注意してください。可能であれば、メッセージのレートが問題にならないほど高くない限り、イベントストリームを提供するためにチャンクを無効にする必要があります。
サーバーサイドスクリプトを変更しました。これは、Chromeで部分的に機能しているようです。
ただし、2つのブロードキャストごとに接続が切断され、クライアントに表示できるのは1つだけです。
Firefoxは最初のブロードキャストで動作し、次のエラーで停止します。
エラー：ページのロード中に/ sseへの接続が中断されました。
そしてChromeは再接続を試み、3番目のブロードキャストを受信します。
ファイアウォールの設定にも関係していると思いますが、なぜいつかはうまくいくのか説明できません。
注：応答のイベントリスナー（10行目）の場合、「閉じる」と「終了」の結果は異なります。
試してみると、結果は[閉じる：1成功/ 2ブロードキャスト]＆[終了：1成功/ 8ブロードキャスト]です。
var http = require('http'), fs = require('fs'), requests = [];
var server = http.Server(function(req, res) {
var clientIP = req.socket.remoteAddress;
var clientPort = req.socket.remotePort;
if (req.url == '/sse') {
var allClient="";for(var i=0;i<requests.length;i++){allClient+=requests[i].ip+":"+requests[i].port+";";}
if(allClient.indexOf(clientIP+":"+clientPort)<0){
requests.Push({ip:clientIP, port:clientPort, res:res});
res.on('close', function() {
console.log("client " + clientIP + ":" + clientPort + " died");
for(var i=requests.length -1; i>=0; i--) {
if ((requests[i].ip == clientIP) && (requests[i].port == clientPort)) {
requests.splice(i, 1);
}
}
});
}
}else{
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(fs.readFileSync('./test.html'));
res.end();
}
});
server.listen(80);
setInterval(function test() {
broadcast('poll', "test message");
}, 500);
var broadcastCount=0;
function broadcast(rtype, msg) {
if(!requests.length)return;
broadcastCount++;
var lines = msg.split("\n");
for(var i = requests.length - 1; i >= 0; i--) {
requests[i].res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
requests[i].res.write("event: " + rtype + "\n");
for(var j = 0; j < lines.length; j++) {
if(lines[j]) {
requests[i].res.write("data: " + lines[j] + "\n");
}
}
requests[i].res.write("data: Count\: " + broadcastCount + "\n");
requests[i].res.write("\n");
}
console.log("Broadcasted " + broadcastCount + " times to " + requests.length + " user(s).");
}