40

EventSource少しの例でオブジェクトを使用しようとしました

クライアント側には、次のスクリプトを含むこのページがあります。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Welcome!</title>
    </head>
    <body>
        <div id="result"></div>
        <script type="text/javascript">
        var sse = new EventSource('event-source.php');
        
        sse.onmessage = function(event) {
            console.log(event.data);
            document.getElementById("result").innerHTML+=event.data + "<br>";
        }

        sse.onerror = function(event) {
        console.log(event);
        }
        
        </script>
    </body>
</html>

スクリプトはサーバー上の event-source.php を呼び出します。これが event-source.php です:

<?php
header('Content-type: text/event-stream');
echo 'data: '.time().PHP_EOL;

この構成を Firefox で試してみると、"onMessage" メソッドは適切に呼び出されますが、Chrome では呼び出されません。「onError」メソッドを入れると呼び出されているようですが、エラーの原因がわかりません。

私は何をすべきか？

4

3 に答える 3

1

クライアント

<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("/html/demo_sse.php");
source.onopen = function() {
document.getElementById("myH1").innerHTML = "Getting server updates";
};
source.onmessage = function(event) {
document.getElementById("myDIV").innerHTML += event.data + "<br>";
};        
} else {
document.getElementById("myDIV").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>

サーバ

<?php
    header('Content-Type: text/event-stream');
    header('Cache-Control: no-cache');

    $time = date('r');
    echo "data: The server time is: {$time}\n\n";
    flush();
    ?>
于 2016-01-20T00:12:01.350 に答える
-1

onmessage必要なオブジェクトのプロパティを呼び出しているのに、なぜ同じことをしないのですonerrorか?
私はあなたonerrorがこのように見えるべきだと思います：

   sse.onerror = function(event) {
      console.log(event.message);
   }

説明: https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events - このリンクには、「問題が発生すると (...)、エラー イベントが生成されます。」

したがって、カスタム エラー処理を行う場合は、 ErrorEvent構造について学ぶ必要があります:) 次のようになります。

  1. エラーイベント。message (読み取り専用) 問題を説明する人間が読めるエラー メッセージを含む DOMString です。
  2. エラーイベント。filename (読み取り専用) エラーが発生したスクリプト ファイルの名前を含む DOMString です。
  3. エラーイベント。lineno (読み取り専用) エラーが発生したスクリプト ファイルの行番号を含む整数です。
  4. エラーイベント。column (読み取り専用) エラーが発生したスクリプト ファイルの列番号を含む整数です。
  5. エラーイベント。error (読み取り専用) イベントに関連する JavaScript オブジェクトです。

詳細情報とソース: https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent

于 2014-02-03T11:11:19.290 に答える