Обнаружить интернет-соединение в автономном режиме?

Question

Как обнаружить интернет-соединение в автономном режиме в JavaScript?

Answer 1

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

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

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

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

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

Answer 2

IE 8 будет поддерживать свойство window.navigator.onLine .

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

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

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

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

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

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

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

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

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

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

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

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

(акцент мой)

Это означает, что если window.navigator.onLine равно false (или вы получаете событие offline), у вас гарантированно не будет подключения к Интернету.

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

_{Изначально я намеревался опубликовать это как обновление Ответ Гранта Вагнера , но это казалось слишком большой правкой, особенно если учесть, что обновление 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 на случай, если вам нужно реагировать на navigator.onLine изменения.

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

Answer 8

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

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

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

Ошибка : функция, вызываемая при запросе выходит из строя. Функция передана три аргументы: объект XMLHttpRequest, строка, описывающая тип ошибки что произошло и необязательно объект исключения, если таковой возник. Возможные значения для второго аргумент (кроме нуля) является «тайм-аут», «ошибка», «немодифицированный» и "Parsererror". Это 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;