Wie Safaris Aufgaberad bei der Verwendung von Server-Sent Events

Ich bin mit HTML5 die Server Sent Events schieben Updates zu meinem Online-Kunden zu entfernen. Bei Firefox und Chrome läuft alles gut, aber bei Safari gibt es immer ein Laderad. Vielleicht, weil er SSE als etwas entdeckt, das auf die Seite geladen wird.Wie Safaris Aufgaberad bei der Verwendung von Server-Sent Events

Wie kann ich sagen, dass Safari SSE nicht etwas ist, das Lasten, sondern einfach einen Update-Skript, damit der Benutzer nicht das Laden Rad nach der Seite sehen ist wirklich geladen?

Dies ist die Live aktualisierte HTML-Seite, die der Kunde bei der Suche:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>SSE Tester</title> 
</head> 
<body> 
    <h1>SSE Output</h1> 
    <div id="result"></div> 
    <h1>Debug Console</h1> 
    <div id="status"></div> 
    <script> 
    //SSE si compatible 
    if(typeof(EventSource)!=="undefined") 
    { 
     var i = 1; 
     var source=new EventSource("demo_sse.php"); 



     //Lorsque le serveur envoie un message 
     source.onmessage=function(event) 
     { 
      //Validation de l'origine du serveur 
      if (event.origin != 'https://secure.mydomain.com') 
      { 
       document.getElementById("status").innerHTML+= "<br><b>Oups! Looks like something went wrong!\n\nPlease contact [email protected] with the following error :</b><p><pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The Origin of the EventSource wasn\'t coming from our secure server!</pre>"; 
       return; 
      } 
      document.getElementById("result").innerHTML+= "#" + i + " " + event.data + "<br />";    
      i++; 
     } 

     //EventListener 
     source.addEventListener('message', function(e) 
     { 
      console.log(e.data); 
      //document.getElementById("status").innerHTML+= "Message Recevied<br />"; 
     }, false); 

     source.addEventListener('open', function(e) 
     { 
      // Connection was opened. 
      document.getElementById("status").innerHTML+= "Connection #" + i + " opened<br />"; 
     }, false); 

     source.addEventListener('error', function(e) 
     { 
      if (e.readyState == EventSource.CLOSED) 
      { 
       // Connection was closed. 
       document.getElementById("status").innerHTML+= "Connection closed by the server<br />"; 
      } 
      else 
      { 
       // Error. 
       document.getElementById("status").innerHTML+= "<b>Error Connection interrupted</b><br />"; 
      } 
     }, false); 
    } 
    else 
    { 
     document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events..."; 
    }  

    </script>  
</body> 
</html>

Und es ist der Code meines demo_sse.php Skript (Server-Seite):

<?php 
$clientLatest = "1"; 
header('Content-Type: text/event-stream'); 
header('Cache-Control: no-cache'); 
while(true) 
{ 
    //Retreive latest version 
    $filename = "version.txt"; 
    $handle = fopen($filename, "r"); 
    $serverLatest = fread($handle, filesize($filename)); 
    fclose($handle); 

    if ($clientLatest < $serverLatest) 
    { 
     //Update client 
     $time = date("H:i:s"); 
     echo "data: Updating to Version: $serverLatest because client's Version: $clientLatest at: {$time}\n\n"; 
     $clientLatest = $serverLatest; 
     ob_flush(); 
     flush(); 
    } 
    //sleep(rand(2, 7)); 
    sleep(1); 
} 
?>

Quelle

2012-03-29 exomic

Es bedeutet, dass Sie den UI-Thread hängen. –

Ok und was soll ich tun? – exomic

Nun, ich weiß nicht, kein Web-Typ :). Mein Punkt ist, dass die Frage "Wie entferne ich das Rad" die falsche Frage ist. Die Frage ist: „Wie ich verhindern <, was ich tue> von der Benutzeroberfläche hängen. Das ist das Problem, nicht die Cursor-Animation. Und nächsten Sie wahrscheinlich ein Beispiel genau brauchen würden, geben, was Sie tun. –

Sieht aus wie mit Javascript Timeout-Funktionen behoben das Problem in Safari. Timeout das Skript vor dem Anschluss für 1000ms, so dass das Laden für Safari abgeschlossen scheint und dann mit SSE-Server verbinden.

Quelle

2012-04-05 00:40:03 exomic

Danke, das machte mir Nuss ... –

Ab langlebigem Anfragen (lang~~POS=TRUNC Polling, SSE) nach einem Timeout ist die einzige bekannte Abhilfe, die ich kenne, eine volle Sekunde könnte mehr sein als nötig, obwohl . (Es ist eine Schande, dass das Event nicht automatisch, obwohl eine spezielle Handhabung ... bekommt.) – natevw

@exomic dies noch funktioniert I 7 mobile Safari in IOS renne und immer noch das Ladesymbol bin immer Es tut;?. jedoch Behebe, dass das iPhone die SSE-Verbindung nach etwa einer Minute herunterfährt. – HelpingHand

die Lösung

Funktionen Timeout der mit Hilfe von Javascript

von @exomic ist im Detail:

das Skript aus dem Script-Tag in eine Funktion setzen und rufen Sie diese Funktion über setTimeout

<script> 
    //Original Javascript goes into a function 
    function startEventSource() { 
     //SSE si compatible 
     if(typeof(EventSource)!=="undefined") 
     { 
      var i = 1; 
      var source=new EventSource("demo_sse.php"); 

      // .. here are the more code ... 
     } 
    } 
    setTimeout(startEventSource, 1000); 
</script>

oder Sie können es mit Lambda verwenden, um der Funktion einige Parameter zu geben:

function startEventSource(domain, channel, statusEl, resultEl){ 
    // more code here 
} 
setTimeout(function(){ startEventSource("https://secure.mydomain.com", "demo_sse.php?channel=1", "statusA", "resultA") }, 1000); 
setTimeout(function(){ startEventSource("https://secure.mydomain.com", "demo_sse.php?channel=2", "statusB", "resultB") }, 1000);

Quelle

2016-09-16 14:02:45 muescha

Wie Safaris Aufgaberad bei der Verwendung von Server-Sent Events

Antwort

Verwandte Themen