Sprawdzanie połączenia do Internetu - JS

0

Witam,

potrzebuje pomocy w temacie:

przypadek:

Użytkownik otwiera plik .html będący zapisany lokanie na pulpicie. Jeśli ma połączenie z internetem to wyświetla mu się zawartość strony, jeśli nie ma zostać wyświetlone okno dialogowe z przyciskiem sprawdzania (screen: http://oi62.tinypic.com/28qsy29.jpg), czy nastąpiło już połączenie z Internetem (jeśli tak okno zostaje zamknięte..)

Jako, że z JS praktycznie kompletnie nic nie wiem.. zacząłem szukać potrzebnych informacji po sieci i na ten moment skleiłem coś takiego:

-- otwieram plik .html i sprawdzam, czy jest połączony do internetu (znalazłem tutaj metodę sprawdzającą google maps.. ale czuje, że to się nie sprawdza.. bo nie ma 'odświeżenia' tej akcji w przypadku kliknięcia na button, którzy ma niejako ponawiać procedure sprawdzania połączenia..)

Technicznie na razie wykorzystałem bootstrap'a i jakieś skrawki js..

Pozdrawiam,
Marek

i wrzucam wykorzystywany kod:

<a href="#" data-toggle="modal" data-target="#basicModal" data-backdrop="static"  data-keyboard="false" >

     <button type="button" class="btn btn-primary" id="c" onclick="myFunction()">Save changes</button>
 
    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
            <h4 class="modal-title" id="myModalLabel">..</h4>
            </div>
            <div class="modal-body">
                <h3>czy polaczony?</h3>
                <p id="demo"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="c" onclick="myFunction()">Save changes</button>
        </div>
    </div>
  </div>
</div>
<script type="text/javascript">

//sprawdza przy wejsciu na stronę czy jest połączenie.. jeśli jest to wyświetla okno (ostatecznie ma być odwrotnie ale to dla testów)
var online;
// check whether this function works (online only)
try {
  var x = google.maps.MapTypeId.TERRAIN;
  online = true;
} catch (e) {
  online = false;
}
console.log(online);

if ( online==true )
{

$('#basicModal').modal({
  backdrop: 'static',
  keyboard: false
})

}

//tutaj próba ponownego sprawdzenia po kliknięciu w przycisk
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";

    var online;
    // check whether this function works (online only)
    try {
      var x = google.maps.MapTypeId.TERRAIN;
      online = true;
    } catch (e) {
      online = false;
    }

    if ( online==true )
    {
        document.getElementById("demo").innerHTML = "tak";
    }
    else
    {
        document.getElementById("demo").innerHTML = "nie";
    }
        
}

//inna metoda sprawdzania ale ta nieudana..
function doesConnectionExist() {
  var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );
    var file = "domain.pl/image.png";
    var randomNum = Math.round(Math.random() * 10000);

    var online;
     
    xhr.open('HEAD', file + "?rand=" + randomNum, false);
     
    try {
        xhr.send();
         
        if (xhr.status >= 200 && xhr.status < 304) {
            online = true;
            //return true;
        } else {
            online = false;
            //return false;
        }
    } catch (e) {
        online = false;
        //return false;
    }

    if ( online==true )
    {
        document.getElementById("demo").innerHTML = "OK";
    }
    else
    {
        document.getElementById("demo").innerHTML = "connection error";
    }
}
    </script>

0

ło jeżu.

Zrób sobie na serwerze jakiś connectionTest.html i wbij w nim tylko OK. Potem ajaxem odpytuj ten pliczek. Ustaw też cache:false. Po co składasz XHRy ręcznie, skoro masz jQuery zdaje się?

0
dzek69 napisał(a):

Po co składasz XHRy ręcznie, skoro masz jQuery zdaje się?

odpowiadając z postu wyżej.. - "Jako, że z JS praktycznie kompletnie nic nie wiem.."

Jestem nie jako zmuszony podjąć temat js i zrobić daną funkcjonalność... A użyłem XHRy ponieważ wujek G. podsunął mi takie wyniki..

Ogólnie to nie chce stawiać żadnego serwera, tylko robić to bezpośrednio od strony klienta (przeglądarki) przez js... (lub inny sposób jeśli istnieje..)

Jeżeli mogę Cię nieskromnie prosić - to przydałby się jakiś kod do użycia :) (który byłby pomocny w tej kwestii :P)

0

ja nie wiem jak szukales bo pierwszy wynik z google daje kilka razy krotszy kod od twojego:

http://www.kirupa.com/html5/check_if_internet_connection_exists_in_javascript.htm

wraz z wyjasnieniem co robi linijka po linijce. idea jest taka jak wspomnial dzek, czyli wywolujesz jakis zasob internetowy (strona, obrazek), ktory jak sie zaladuje to znaczy ze polaczenie dziala, a jak nie to ze nie dziala.

dzek jeszcze zaproponowal ci skorzystanie z jquery:

dodajesz biblioteke do pliku i wywolanie skraca sie do 1-2 linijek:

http://api.jquery.com/jquery.ajax/

0

@szalonyfacet - a widzisz.. to może inaczej wyszło, bo znalazłem tą stronę a widocznie nie umiałem zastosować..

Jak zobaczysz wyżej w kodzie mam funkcje doesConnectionExist() (de facto nazwa ta sama co w podesłanej przez ciebie stronie bo właśnie stamtąd kopiowałem kod :P) no i mi to nie chciało działać.. Wskazałem jako link jakiś obrazek na losowej stronie.. Ale zawsze otrzymywałem false..

A jakby taki kod wyglądał w jQuery ? (bo w sumie bootstrap korzystać z tejże biblioteki ..)

0

na twoje nieszczescie metody z tej strony dziala, wystarczy przekopiowac i wkleic ODPOWIEDNI adres. odpowiedni to taki ktory da sie pobrac przez javascript (a sporo sie nie da ze wzgledu na cross domain policy).

http://jsbin.com/racatuse/1/edit

wersja bez query i z jquery

0

@szalonyfacet - ok, kod działa.. (ale poprzedni kod też może działał bo okazało się, że na FireFoxie na którym działam domyślnie ten kod się nie wykonuje .. -.-), ale mniejsza o to..

Teraz mam taki problem, że nie działa mi to sprawdzanie w takim przypadku..

Powiedzmy, że nie mam połączenia z siecią, więc wyświetlone zostaje okno.. i potem chce sobie niejako "odświeżać" to sprawdzanie w momencie kliknięcia w przycisk.. I teraz mimo, że podłącze się między czasie do Internetu (podłącze do rutera) to ta akcja wykrywa cały czas, że nie mam tego połączenia ...) (robie to w taki sposób jak w kodzie zamieszczonym w pierwszym poście)

0

albo skorzystaj z dostępnego w html5 trybu offline

utwórz dwa pliki js, w obu umieść funkcję o tej samej nazwie np isOnline(),
pierwszy z plików, który wczytujesz normalnie niech zwraca true,,
drugi niech zwraca false i wczytuj go w trybie awaryjnym (gdy strona jest offline)

więcej tutaj - http://diveintohtml5.info/offline.html

0

HubSpot stworzył do tego bibliotekę Offline.

0

@winerfresh - biblioteka wygląda 'smakowicie' .. tylko niestety nie potrafię jej skonsumować :( .. tzn. dołożyć ją do swojego projektu, bo nadal coś nie działa..

Niby wszystko zrobiłem zgodnie z instrukcją tzn.:

Include the javascript and one of the themes on your site. You're done!

no ale nie działa.. Działa jedynie symulator z zaznaczaniem/odznaczaniem checkboxa, ale jak rozłączam/załączam wifi to lipa..

Ogólnie próbowałem również uruchomić test z paczki bilbioteki, ale nie wiem jaki dokładnie link może być wstawiony za: http://localhost:8888/walter/0 to dotychczasowe moje próby również zakończyły się niepowodzeniem.. (zawsze był komunikat o zerwanym połączeniu..)

<head>
<script src="../offline.min.js"></script>


<link rel="stylesheet" href="../themes/offline-theme-chrome.css" />
<link rel="stylesheet" href="../themes/offline-language-english.css" />

<script>
var run = function(){
  var req = new XMLHttpRequest();
  req.timeout = 5000;
  req.open('GET', 'http://localhost:8888/walter/0', true);
  req.send();
}

setInterval(run, 3000);
</script>
</head>
<body>
</body>

1 użytkowników online, w tym zalogowanych: 0, gości: 1