Pytanie Jak sprawdzić, czy użytkownik jest online przy użyciu javascript lub jakiejkolwiek biblioteki?


Potrzebuję pomocy, jak mogę sprawdzić połączenie internetowe za pomocą JavaScript lub jQuery lub dowolnej biblioteki, jeśli jest dostępna. ponieważ tworzę aplikację offline i chcę pokazać wersję, jeśli użytkownik jest offline i inną wersję, jeśli użytkownik jest online.

Na razie używam tego kodu:

if (navigator.onLine) {
    alert('online');
} else {
    alert('offline');
}

Ale to działa bardzo powoli, aby wykryć. czasami jest po prostu podłączony do sieci bez Internetu, alarm trwa od 5 do 10 sekund false (Brak internetu).

Przyjrzałem się bibliotece Offline.js, ale nie jestem pewien, czy ta biblioteka jest przydatna w moim przypadku. i nie wiem, jak z niego korzystać


22
2018-04-22 15:35


pochodzenie


Czy mógłbyś zdefiniować? bardzo powolny do wykrycia? - Jamie Barker
możliwy duplikat Wykryto, że połączenie internetowe jest w trybie offline? - jmoerdyk
@jmoerdyk szczerze, ten post ma 7 lat, a technologia od tego czasu podskoczyła, nie tylko dlatego, że OP ma kod z odpowiedzi Edmhsa. - Jamie Barker
Zgadza się. JamieBarker Wierzę, że istnieje wiele sposobów, jak sprawić, by to się działo skutecznie. - Stranger B.
Popraw swoje pytanie bardziej, niż chcesz. Dlaczego uważasz, że Offline.js nie jest przydatny w twojej sprawie? - LasagnaAndroid


Odpowiedzi:


Myślę, że powinieneś spróbować OFFLINE.js.. wygląda całkiem łatwo, po prostu spróbuj.

zapewnia nawet opcję checkOnLoad który sprawdza połączenie natychmiast po wczytaniu strony.

Offline.check (): Sprawdź aktualny status połączenia.

Offline.state: aktualny stan połączenia "w górę" lub "w dół"

nie próbowałem go, byłoby miło wiedzieć, czy działa zgodnie z przeznaczeniem.

EDYTOWAĆ wziął mały pik do kodu, używa metody z NIEPOWODZENIE ŻĄDANIA XHR zasugerowano w TO Pytanie SO


8
2018-04-29 09:26



Ten projekt nie jest aktywnie utrzymywany. - themefield


Właśnie dostałem trochę funkcji kodu z a Witryna Mozilli:

window.addEventListener('load', function(e) {
  if (navigator.onLine) {
    console.log('We\'re online!');
  } else {
    console.log('We\'re offline...');
  }
}, false);

window.addEventListener('online', function(e) {
  console.log('And we\'re back :).');
}, false);

window.addEventListener('offline', function(e) {
  console.log('Connection is down.');
}, false);

Oni nawet mają link, aby zobaczyć, jak działa. Próbowałem go w IE, Firefox i Chrome. Chrome pojawił się najwolniej, ale było to tylko około pół sekundy.


7
2018-04-22 15:55



Dokumentacja Mozilli: "W przeglądarce Chrome i Safari, jeśli przeglądarka nie może połączyć się z siecią lokalną (LAN) lub routerem, jest offline, wszystkie pozostałe warunki zwracają true." developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine to nie będzie skutecznie wykrywać, że Internet jest wyłączony, ale twoja sieć LAN nie działa. - dman2306
Dziękuję bardzo za odpowiedź, już próbowałem, to nie działa przy ładowaniu strony! działa tylko w przypadku zmiany stanu Internetu - Stranger B.
@ dman2306 Bravo do linkowania dokładnie tego samego artykułu, który łączyłem w mojej odpowiedzi;). - Jamie Barker
@ Jamie Barker, ponieważ przekonywałam, że ten artykuł wskazuje, że nie spełnia on wymagań PO. Dlatego odpowiedź jest błędna. Powiedział to nawet sam "czasami jest po prostu podłączony do sieci bez internetu" :) - dman2306
@ dman2306. Cytowałeś z kontekstu. Weźmy całe zdanie zamiast połowy tego: "czasami jest po prostu podłączony do sieci bez Internetu, trwa od 5 do 10 sekund, aby ostrzec "fałszywy" (brak internetu)"Tak więc alarm jest fałszywy po podłączeniu do sieci bez Internetu poprawny. Problem OP polega na tym, że obliczenie odpowiedzi zajmuje 5-10 sekund. Nie mówię, że moja odpowiedź jest poprawna, tylko że twoje zrozumienie problemu nie wiąże się z tym, co stwierdza to pytanie. - Jamie Barker


Spojrzeć na Wykryto, że połączenie internetowe jest w trybie offline? Zasadniczo, zrób zapytanie ajaxowe do czegoś, co prawdopodobnie pojawi się (powiedzmy google.com), a jeśli się nie powiedzie, nie ma połączenia z Internetem.


3
2018-04-22 15:38



Kto powiedział, że jest to szybsze niż navigator.onLine? - putvande
Spojrzałem na to, co nie pomaga bardzo - Stranger B.
@putvande Jest dokładniejszy, sprawdza połączenie INTERNET, a nie połączenie NETWORK. Z dokumentów Mozilli: "W przeglądarce Chrome i Safari, jeśli przeglądarka nie może połączyć się z siecią lokalną (LAN) lub routerem, jest offline, wszystkie pozostałe warunki zwracają true." Więc jeśli jestem w mojej sieci LAN, ale połączenie internetowe jest martwe, navigator.onLine zwraca true. Przykładowa odpowiedź byłaby fałszywa. - dman2306
@ dman2306 to dokładnie to, co chciałem powiedzieć! - Stranger B.
@ Stranger90 Dlaczego to nie pomaga? - falsarella


navigator.onLine to właściwość, która utrzymuje wartość true / false (prawda dla trybu online, false dla trybu offline). Ta właściwość jest aktualizowana za każdym razem, gdy użytkownik przełącza się w "Tryb offline".

window.addEventListener('load', function() {

  function updateOnlineStatus(event) {
     document.body.setAttribute("data-online", navigator.onLine);
  }
  updateOnlineStatus();
  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

2
2018-04-29 12:01





Możesz użyć nowego Pobierz API które wywoła błąd prawie natychmiast, jeśli nie ma żadnej sieci.

Problem polega na tym, że Fetch API ma wsparcie dla niemowląt W tej chwili (obecnie Chrome ma najbardziej stabilną implementację, Firefox i Opera się tam dostają, IE go nie obsługuje). Istnieje polyfill wspieranie zasady pobierania, ale niekoniecznie szybki powrót, jak w przypadku czystej implementacji. Z drugiej strony, aplikacja offline wymagałaby nowoczesnej przeglądarki ...

Przykład, który spróbuje załadować zwykły plik tekstowy przez HTTPS w celu uniknięcia wymagań CORS (link jest wybierany losowo, powinieneś skonfigurować serwer z małym plikiem tekstowym do przetestowania - testowanie w Chrome na razie):

fetch("https://link.to/some/testfile")
    .then(function(response) {
        if (response.status !== 200) {  // add more checks here, ie. 30x etc.
            alert("Not available");     // could be server errors
        }
        else
            alert("OK");
    })
    .catch(function(err) {
        alert("No network");           // likely network errors (incl. no connection)
    });

Inną opcją jest ustawienie a Pracownik obsługi i użyj pobierania z tego miejsca. W ten sposób możesz wyświetlić opcjonalną / niestandardową stronę w trybie offline lub stronę w pamięci podręcznej, gdy żądana strona jest niedostępna. To także bardzo świeży interfejs API.


2
2018-04-30 23:23





Spróbuj wykorzystać WebRTC , widzieć diafygi / webrtc-ips; częściowo

Dodatkowo, te żądania STUN są wykonywane poza normalnym   Procedura XMLHttpRequest, więc nie są widoczne w programistach   konsola lub może być blokowana przez wtyczki takie jak AdBlockPlus lub   Ghostery. Dzięki temu tego typu wnioski są dostępne online   śledzenie, jeśli reklamodawca skonfiguruje serwer STUN z symbolem wieloznacznym   domena.


zmodyfikowano minimalnie, aby logować się "online" lub "offline" pod adresem console

// https://github.com/diafygi/webrtc-ips
function online(callback){

    //compatibility for firefox and chrome
    var RTCPeerConnection = window.RTCPeerConnection
        || window.mozRTCPeerConnection
        || window.webkitRTCPeerConnection;
    var useWebKit = !!window.webkitRTCPeerConnection;

    //bypass naive webrtc blocking using an iframe
    if(!RTCPeerConnection) {
        //NOTE: you need to have an iframe in the page
        // right above the script tag
        //
        //<iframe id="iframe" sandbox="allow-same-origin" style="display: none"></iframe>
        //<script>...getIPs called in here...
        //
        var win = iframe.contentWindow;
        RTCPeerConnection = win.RTCPeerConnection
            || win.mozRTCPeerConnection
            || win.webkitRTCPeerConnection;
        useWebKit = !!win.webkitRTCPeerConnection;
    }

    //minimal requirements for data connection
    var mediaConstraints = {
        optional: [{RtpDataChannels: true}]
    };

    //firefox already has a default stun server in about:config
    //    media.peerconnection.default_iceservers =
    //    [{"url": "stun:stun.services.mozilla.com"}]
    var servers = undefined;

    //add same stun server for chrome
    if(useWebKit)
        servers = {iceServers: [{urls: "stun:stun.services.mozilla.com"}]};

    //construct a new RTCPeerConnection
    var pc = new RTCPeerConnection(servers, mediaConstraints);

    //create a bogus data channel
    pc.createDataChannel("");

    var fn = function() {};

    //create an offer sdp
    pc.createOffer(function(result){

        //trigger the stun server request
        pc.setLocalDescription(result, fn, fn);

    }, fn);

    //wait for a while to let everything done
    setTimeout(function(){
        //read candidate info from local description
        var lines = pc.localDescription.sdp.split("\n");
        // return `true`:"online" , or `false`:"offline"
        var res = lines.some(function(line) {
          return line.indexOf("a=candidate") === 0
        });
        callback(res);
    }, 500);
}

//Test: Print "online" or "offline" into the console
online(function(connection) {
  if (connection) {
    console.log("online")
  } else {
    console.log("offline")
  }
});


2
2018-05-01 09:20





Moim rozwiązaniem jest złapać bardzo mały obraz (1x1), nie buforowane i zawsze online.

<head>
<script src="jquery.min.js"></script>
</head>
<body>
<script>
$( document ).ready(function() {
function onLine() {
alert("onLine")
}
function offLine() {
alert("offLine")
}
var i = new Image();
i.onload = onLine;
i.onerror = offLine;
i.src = 'http://www.google-analytics.com/__utm.gif';
});
</script>
<body>

Uwagi:

  • Użyć kopia lokalna z jQuery inaczej nie zadziała offLine.

  • Przetestowałem kod onLine/offLine i to działa bez opóźnienia.

  • Działa ze wszystkimi przeglądarkami, stacjonarnymi lub mobilnymi.

  • Jeśli się zastanawiasz, nie ma śledzenia z Google Analytics, ponieważ nie używamy żadnych argumentów.

  • Możesz zmienić obraz, tylko upewnij się, że nie zostanie on zbuforowany i ma mały rozmiar.


2
2018-05-01 14:47





Możesz użyć SignalR, jeśli tworzysz przy użyciu technologii internetowych MS. SignalR ustanowi długie pollingu lub gniazd internetowych w zależności od technologii przeglądarki serwera / klienta, przejrzyste dla Ciebie deweloper. Nie musisz jej używać do niczego innego, niż do określenia, czy masz aktywne połączenie z witryną, czy nie.

Jeśli SignalR rozłącza się z jakiegokolwiek powodu, utraciłeś połączenie z witryną, o ile instancja serwera SignalR jest rzeczywiście zainstalowana na stronie. W ten sposób można użyć zdarzenia / metody $ .connection.hub.disconnected () na kliencie, aby ustawić globalny zmienny, który przechowuje stan połączenia.

Przeczytaj o SignalR i jak go używać do określania stanów połączeń tutaj ... http://www.asp.net/signalr/overview/guide-to-the-api/handling-connection-lifetime-events#clientdisconnect


1
2018-04-28 16:16