Как удалить загрузочное колесо сафари при использовании событий, отправленных сервером - PullRequest
Новая
       6

Как удалить загрузочное колесо сафари при использовании событий, отправленных сервером

5 голосов
/ 29 марта 2012

Я использую серверные события HTML5 для отправки обновлений своим онлайн-клиентам. Все отлично работает на Firefox и Chrome, но с Safari все время есть колесо загрузки. Может быть, потому что он обнаружил, что SSE загружается на страницу.

Как я могу сказать Safari, что SSE - это не то, что загружается, а просто скрипт обновления, чтобы пользователь не видел колесо загрузки после загрузки страницы?

Это обновленная html-страница, которую просматривает клиент: 

<code><!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 webmaster@mydomain.com with the following error :</b><p><pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The Origin of the EventSource wasn\'t coming from our secure server!
"; вернуть; } document.getElementById ("result"). innerHTML + = "#" + i + "" + event.data + "
"; я ++; } // EventListener source.addEventListener ('message', function (e) { console.log (e.data); //document.getElementById("status").innerHTML+= "Сообщение получено
"; }, ложный); source.addEventListener ('open', function (e) { // Соединение было открыто. document.getElementById ("status"). innerHTML + = "Connection #" + i + "открыто
"; }, ложный); source.addEventListener ('error', function (e) { if (e.readyState == EventSource.CLOSED) { // Соединение было закрыто. document.getElementById ("status"). innerHTML + = "Соединение закрыто сервером
"; } еще { // Ошибка. document.getElementById ("status"). innerHTML + = " Ошибка Соединение прервано
"; } }, ложный); } еще { document.getElementById ("result"). innerHTML = "Извините, ваш браузер не поддерживает отправленные сервером события ..."; }

И вот код моего сценария demo_sse.php (на стороне сервера): 

<?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);
}
?>

Ответы [ 2 ]

5 голосов
/ 05 апреля 2012

Похоже, что использование функций тайм-аута javascript устранило проблему в сафари.Просто установите время ожидания сценария перед подключением на 1000 мс, чтобы загрузка в safari завершилась, а затем подключитесь к серверу SSE.

0 голосов
/ 16 сентября 2016

раствор

с использованием функций тайм-аута JavaScript

от @exomic подробно:

поместите скрипт из тега script в функцию и вызовите эту функцию через 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>

или вы можете использовать его с лямбда-выражением для задания некоторых параметров функции: 

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);
...