Обнаружите, что интернет-соединение отключено?

Question

Как определить, что интернет-соединение отключено в JavaScript?

Answer 1

Вы можете определить, что соединение потеряно, отправив неудачные запросы XHR .

Стандартный подход - повторить запрос несколько раз. Если этого не произойдет, предупредите пользователя , чтобы он проверил соединение, и завершите неудачу изящно .

Sidenote: поместить все приложение в " в автономном режиме " состояние может привести к большой подверженности ошибкам работе с состоянием .. беспроводные соединения могут приходить и уходить, и т. д. Таким образом, лучшим вариантом может быть просто изящный сбой, сохранение данных и предупреждение пользователя… что позволит им в конечном итоге исправьте проблему с подключением, если она есть, и продолжайте использовать ваше приложение с достаточным количеством прощения.

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

Sidenote : отправка Ping можно выполнить таким же образом, как если бы вы делали любой двухсторонний запрос Ajax, но отправляя пинг в Google, в этот случай, будет представлять некоторые проблемы. Во-первых, у нас будут те же междоменные проблемы, которые обычно возникают при установлении связи Ajax. Один из вариантов - настроить прокси на стороне сервера, в котором мы на самом деле ping Google (или любой другой сайт), и вернуть результаты пинга в приложение. Это уловка-22 , потому что если проблема с интернет-соединением, мы не сможем добраться до сервера, и если проблема с подключением есть только в нашем собственном домене, мы победим ». не сможет отличить. Можно попробовать другие междоменные методы, например, встроить на свою страницу iframe, который указывает на google.com, а затем опросить iframe на предмет успеха / неудачи (проверить содержимое и т. Д.). Встраивание изображения может ничего не сказать нам, потому что нам нужен полезный ответ от коммуникационного механизма, чтобы сделать хороший вывод о том, что происходит. Итак, еще раз, определение состояния интернет-соединения в целом может быть больше проблем, чем оно того стоит. Вам придется взвесить эти опции для вашего конкретного приложения.

Answer 2

IE 8 будет поддерживать окно .navigator.onLine property.

Но, конечно, это не помогает с другими браузерами или операционными системами. Я предполагаю, что другие поставщики браузеров также решат предоставить это свойство, учитывая важность знания статуса онлайн / офлайн в приложениях Ajax.

Пока этого не произойдет, запрос XHR, запрос Image() или <img> могут обеспечить что-то близкое к нужной вам функциональности.

Обновление (2014/11/16)

Основные браузеры теперь поддерживают это свойство, но ваши результаты могут отличаться.

Цитата из документации Mozilla :

  

В Chrome и Safari, если браузер не может подключиться к локальной сети (LAN) или маршрутизатору, он отключен; все остальные условия возвращаются true. Таким образом, хотя вы можете предполагать, что браузер находится в автономном режиме, когда он возвращает значение false, вы не можете предполагать, что истинное значение обязательно означает, что браузер может получить доступ к Интернету. Вы можете получать ложные срабатывания, например, в тех случаях, когда на компьютере запущено программное обеспечение для виртуализации с виртуальными сетевыми адаптерами, которые всегда & Подключены. & Quot; Поэтому, если вы действительно хотите определить онлайн-статус браузера, вам следует разработать дополнительные средства для проверки.

     

В Firefox и Internet Explorer переключение браузера в автономный режим отправляет значение <=>. Все остальные условия возвращают значение <=>.

Answer 3

Есть несколько способов сделать это:

• AJAX-запрос на ваш собственный веб-сайт.Если этот запрос завершается неудачей, есть большая вероятность, что это ошибка соединения.Тот Самый jQuery в документации есть раздел, посвященный обработка неудачных AJAX-запросов.Остерегайтесь Политика Того же Происхождения при этом это может помешать вам получить доступ к сайтам за пределами вашего домена.

• Вы могли бы поставить onerror в img, как

  <img src='http://www.example.com/singlepixel.gif' 
        onerror='alert("Connection dead");' />
  

  Этот метод также может привести к сбою, если исходное изображение будет перемещено / переименовано, и, как правило, будет уступать варианту ajax.

Таким образом, есть несколько различных способов попытаться обнаружить это, ни один из них не идеален, но в отсутствие возможности выйти из изолированной среды браузера и напрямую получить доступ к состоянию сетевого подключения пользователя, они кажутся лучшими вариантами.

Answer 4

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

Answer 5

Почти все основные браузеры теперь поддерживают window.navigator.onLine и соответствующие события online и offline окна:

window.addEventListener('online', () => console.log('came online'));
window.addEventListener('offline', () => console.log('came offline'));

Попробуйте перевести систему или браузер в автономный / онлайн-режим и проверьте консоль или свойство true на предмет изменения значений. Вы также можете проверить его на этом веб-сайте .

Обратите внимание на эту цитату из документации Mozilla :

  

В Chrome и Safari, если браузер не может подключиться к локальной сети (LAN) или маршрутизатору, он отключен; все остальные условия возвращаются false. Таким образом, в то время как вы можете предполагать, что браузер находится в автономном режиме, когда он возвращает <=> значение , вы не можете предполагать, что значение <=> обязательно означает, что браузер может получить доступ к Интернету . Вы можете получать ложные срабатывания, например, в тех случаях, когда на компьютере запущено программное обеспечение для виртуализации с виртуальными сетевыми адаптерами, которые всегда & Подключены. & Quot; Поэтому, если вы действительно хотите определить онлайн-статус браузера, вам следует разработать дополнительные средства для проверки.

     

В Firefox и Internet Explorer переключение браузера в автономный режим отправляет значение <=>. До Firefox 41 все остальные условия возвращают значение <=>; начиная с Firefox 41 в OS X и Windows это значение будет соответствовать фактическому сетевому подключению.

(акцент мой)

Это означает, что если <=> равен <=> (или вы получаете событие <=>), у вас гарантированно нет подключения к Интернету.

Если это <=> (или вы получаете событие <=>), это означает, что в лучшем случае система только подключена к некоторой сети. Это не значит, что у вас есть доступ к интернету например. Чтобы проверить это, вам все равно нужно будет использовать одно из решений, описанных в других ответах.

_{Сначала я намеревался опубликовать это как обновление для ответа Гранта Вагнера , но это показалось слишком редактирование, особенно с учетом того, что обновление 2014 года уже не от него .}

Answer 6

API кэша приложений HTML5 определяет navigator.onLine, который в настоящее время доступен в ночных бета-версиях IE8, WebKit (например, Safari) и уже поддерживается в Firefox 3

Answer 7

Как сказал olliej, использование свойства браузера navigator.onLine предпочтительнее, чем отправка сетевых запросов, и, соответственно, с помощью developer.mozilla.org/En/Online_and_offline_events , он даже поддерживается старыми версиями Firefox и IE.

Недавно WHATWG указала добавление событий online и offline на случай, если вам нужно реагировать на <=> изменения.

Обратите также внимание на ссылку, опубликованную Даниэлем Сильвейрой, в которой указано, что полагаться на эти сигналы / свойства для синхронизации с сервером не всегда хорошая идея.

Answer 8

Вы можете использовать $ .ajax () error обратный вызов, который срабатывает при сбое запроса. Если textStatus равно строке & Quot; timeout & Quot; это, вероятно, означает, что соединение разорвано:

function (XMLHttpRequest, textStatus, errorThrown) {
  // typically only one of textStatus or errorThrown 
  // will have info
  this; // the options for this ajax request
}

Из документа :

  

Ошибка : функция, вызываемая при запросе   выходит из строя. Функция передана три   аргументы: объект XMLHttpRequest,   строка, описывающая тип ошибки   что произошло и необязательно   объект исключения, если таковой возник.   Возможные значения для второго   аргументом (кроме нуля) являются " timeout " ;,   " ошибка " ;, " notmodified " а также   Quot &; & parsererror Quot ;. Это Ajax Event

Так, например:

 $.ajax({
   type: "GET",
   url: "keepalive.php",
   success: function(msg){
     alert("Connection active!")
   },
   error: function(XMLHttpRequest, textStatus, errorThrown) {
       if(textStatus == 'timeout') {
           alert('Connection seems dead!');
       }
   }
 });

Answer 9

ajax-вызов вашего домена - это самый простой способ определить, не подключены ли вы к сети

$.ajax({
      type: "HEAD",
      url: document.location.pathname + "?param=" + new Date(),
      error: function() { return false; },
      success: function() { return true; }
   });

это просто для того, чтобы дать вам концепцию, она должна быть улучшена, проверьте наличие HTTP-кодов возврата и т. д.

Answer 10

Я думаю, что это очень простой способ.

var x = confirm("Are you sure you want to submit?");
if (x) {
  if (navigator.onLine == true) {
    return true;
  }
  alert('Internet connection is lost');
  return false;
}
return false;

Answer 11

Я должен был сделать веб-приложение (на основе ajax) для клиента, который много работает со школами, у этих школ часто плохое интернет-соединение. Я использую эту простую функцию, чтобы определить, есть ли соединение, работает очень хорошо!

Я использую CodeIgniter и Jquery:

function checkOnline() {
    setTimeout("doOnlineCheck()", 20000);
}

function doOnlineCheck() {
    //if the server can be reached it returns 1, other wise it times out
    var submitURL = $("#base_path").val() + "index.php/menu/online";

    $.ajax({
        url : submitURL,
        type : "post",
        dataType : "msg",
        timeout : 5000,
        success : function(msg) {
            if(msg==1) {
                $("#online").addClass("online");
                $("#online").removeClass("offline");
            } else {
                $("#online").addClass("offline");
                $("#online").removeClass("online");
            }
            checkOnline();
        },
        error : function() {
            $("#online").addClass("offline");
            $("#online").removeClass("online");
            checkOnline();
        }
    });
}

Answer 12

Я искал решение на стороне клиента, чтобы определить, не работает ли интернет или не работает мой сервер. Другие решения, которые я обнаружил, всегда зависели от файла или изображения скрипта стороннего производителя, который, на мой взгляд, не выдержал испытания временем. Внешний размещенный скрипт или изображение может измениться в будущем и привести к сбою кода обнаружения.

Я нашел способ обнаружить это, ища xhrStatus с кодом 404. Кроме того, я использую JSONP, чтобы обойти ограничение CORS. Код состояния, отличный от 404, показывает, что интернет-соединение не работает.

$.ajax({
    url:      'https://www.bing.com/aJyfYidjSlA' + new Date().getTime() + '.html',
    dataType: 'jsonp',
    timeout:  5000,

    error: function(xhr) {
        if (xhr.status == 404) {
            //internet connection working
        }
        else {
            //internet is down (xhr.status == 0)
        }
    }
});

Answer 13

Мой путь.

<!-- the file named "tt.jpg" should exist in the same directory -->

<script>
function testConnection(callBack)
{
    document.getElementsByTagName('body')[0].innerHTML +=
        '<img id="testImage" style="display: none;" ' +
        'src="tt.jpg?' + Math.random() + '" ' +
        'onerror="testConnectionCallback(false);" ' +
        'onload="testConnectionCallback(true);">';

    testConnectionCallback = function(result){
        callBack(result);

        var element = document.getElementById('testImage');
        element.parentNode.removeChild(element);
    }    
}
</script>

<!-- usage example -->

<script>
function myCallBack(result)
{
    alert(result);
}
</script>

<a href=# onclick=testConnection(myCallBack);>Am I online?</a>

Answer 14

Есть 2 ответа на этот вопрос для двух разных сенарио:-

1. Если вы используете JavaScript на веб-сайте (т.е.;или любая интерфейсная часть) Самый простой способ сделать это -:

   <h2>The Navigator Object</h2>
   
   <p>The onLine property returns true if the browser is online:</p>
   
   <p id="demo"></p>
   
   <script>
     document.getElementById("demo").innerHTML = "navigator.onLine is " + navigator.onLine;
   </script>
   

2. Но если вы используете js на стороне сервера (т.е.;узел и т.д.), Вы можете определить, что соединение потеряно, выполнив неудачные запросы XHR.

   Стандартный подход заключается в повторении запроса несколько раз.Если это не пройдет, предупредите пользователя, чтобы он проверил соединение, и завершите работу корректно.

Answer 15

заголовок запроса в ошибке запроса

$.ajax({
    url: /your_url,
    type: "POST or GET",
    data: your_data,
    success: function(result){
      //do stuff
    },
    error: function(xhr, status, error) {

      //detect if user is online and avoid the use of async
        $.ajax({
            type: "HEAD",
            url: document.location.pathname,
            error: function() { 
              //user is offline, do stuff
              console.log("you are offline"); 
              }
         });
    }   
});

Answer 16

Вот фрагмент вспомогательной утилиты, которая у меня есть. Это пространство имен javascript:

network: function() {
    var state = navigator.onLine ? "online" : "offline";
    return state;
}

Вы должны использовать это с обнаружением метода, иначе запустите «альтернативный» способ сделать это. Время быстро приближается, когда это будет все, что нужно. Другие методы - это хаки.