Обнаружить, что подключение к Интернету не в сети?

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

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

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

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

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

Почти все основные браузеры теперь поддерживают _ 1_ и соответствующие события окна online и offline. Запустите следующий фрагмент кода, чтобы проверить его:

console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line');

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

document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine));

<button id="statusCheck">Click to check the <tt>window.navigator.onLine</tt> property</button><br /><br />
Check the console below for results:

Попробуйте установить свою систему или браузер в автономный / онлайн-режим и проверьте журнал или свойство 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 года уже было не от него.}

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

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

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

Обновление (16.11.2014)

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

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

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

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

Для этого есть несколько способов:

• Запрос AJAX на ваш собственный сайт. Если этот запрос не выполняется, велика вероятность, что в этом виновато соединение. В документации JQuery есть раздел на обработка неудачных запросов AJAX. При этом остерегайтесь одинаковой политики происхождения, которая может помешать вам получить доступ к сайтам за пределами вашего домена. .
• Вы можете поместить onerror в img, например <img src="http://www.example.com/singlepixel.gif" onerror="alert('Connection dead');" />.

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

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

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

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

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

Ошибка: функция, вызываемая в случае сбоя запроса. Функции передаются три аргумента: объект XMLHttpRequest, строка, описывающая тип произошедшей ошибки, и необязательный объект исключения, если таковая произошла. Возможные значения для второго аргумента (помимо нуля): «тайм-аут», «ошибка», «не изменено» и «ошибка синтаксического анализа». Это событие Ajax

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

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

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

window.navigator.onLine

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

window.addEventListener("offline", 
  ()=> console.log("No Internet")
);

и для проверки онлайн:

window.addEventListener("online", 
  ()=> console.log("Connected Internet")
);

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

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

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

Мне пришлось создать веб-приложение (на основе 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();
        }
    });
}

вызов ajax к вашему домену - самый простой способ определить, находитесь ли вы в автономном режиме

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

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

Например. error = 404 по-прежнему означает, что вы в сети.

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

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;

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

Я нашел способ обнаружить это, ища 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)
        }
    }
});

Я знаю, что на этот вопрос уже был дан ответ, но я хотел бы добавить свои 10 центов, объясняя, что лучше, а что нет.

Window.navigator.onLine

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

Этот вариант предполагает использование window.navigator.onLine, который является свойством в интерфейсе навигатора браузера и доступен в большинстве современных браузеров. Это действительно не подходящий вариант для проверки доступности Интернета, потому что, во-первых, it is browser centric, а во-вторых most browsers implement this property differently.

В Firefox: свойство возвращает логическое значение, где true означает онлайн, а false означает автономный режим, но здесь есть предостережение: the value is only updated when the user follows links or when a script requests a remote page. Следовательно, если пользователь переходит в автономный режим и вы запрашиваете свойство из функции или скрипта js, свойство всегда будет возвращать true, пока пользователь не перейдет по ссылке.

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

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

Отправка запроса на собственный ресурс сервера

1. Доступность сервера не зависит на 100%, поэтому, если по какой-то причине ваш сервер недоступен, было бы ошибочно предположить, что пользователь находится в автономном режиме, в то время как он подключен к Интернету.
2. Несколько запросов к одному и тому же ресурсу могут вернуть кешированный ответ, что сделает результат ответа http ненадежным.

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

Вот простой фрагмент для получения собственного ресурса:

// This fetches your website's favicon, so replace path with favicon url
// Notice the appended date param which helps prevent browser caching.
fetch('/favicon.ico?d='+Date.now())
  .then(response => {
    if (!response.ok)
      throw new Error('Network response was not ok');

   // At this point we can safely assume the user has connection to the internet
        console.log("Internet connection available"); 
  })
  .catch(error => {
  // The resource could not be reached
        console.log("No Internet connection", error);
  });

Отправка запроса на сторонний серверный ресурс

Этот вариант включает выполнение HTTP-запроса к внешнему ресурсу сервера и, если он доступен, предположим, что Интернет доступен, в противном случае пользователь находится в автономном режиме. Главное предостережение - это совместное использование ресурсов разных источников, которое действует как ограничение. Большинство авторитетных веб-сайтов блокируют запросы CORS, но для некоторых вы можете поступить по-своему.

Ниже приведен простой фрагмент для получения внешнего ресурса, такой же, как и выше, но с URL-адресом внешнего ресурса:

// Firstly you trigger a resource available from a reputable site
// For demo purpose you can use the favicon from MSN website
// Also notice the appended date param which helps skip browser caching.
fetch('https://static-global-s-msn-com.akamaized.net/hp-neu/sc/2b/a5ea21.ico?d='+Date.now())
  .then(response => {
  // Check if the response is successful
    if (!response.ok)
      throw new Error('Network response was not ok');

// At this point we can safely say the user has connection to the internet
        console.log("Internet available"); 
  })
  .catch(error => {
  // The resource could not be reached
        console.log("No Internet connection", error);
  });

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

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

• Попробуйте получить доступ к ресурсу на вашем собственном сервере, потому что это среда вашего пользователя (обычно я использую значок веб-сайта, потому что ответ очень легкий и не часто обновляется).
• Если нет подключения к ресурсу, просто скажите «Ошибка подключения» или «Подключение потеряно», когда вам нужно уведомить пользователя, вместо того, чтобы предполагать широкое подключение к Интернету «Нет», которое зависит от многих факторов.

Мой метод.

<!-- 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>

Просто используйте navigator.onLine, если это true, тогда вы в сети, иначе в автономном режиме

Вы можете попробовать, это вернет истину, если сеть подключена

function isInternetConnected(){return navigator.onLine;}

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

$.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"); 
              }
         });
    }   
});

Проблема некоторых методов, таких как navigator.onLine, заключается в том, что они несовместимы с некоторыми браузерами и мобильными версиями, вариант, который мне очень помог, заключался в использовании классического метода XMLHttpRequest, а также предвидеть возможный случай, когда файл хранился в кеше с ответом XMLHttpRequest.status больше 200 и меньше 304.

Вот мой код:

 var xhr = new XMLHttpRequest();
 //index.php is in my web
 xhr.open('HEAD', 'index.php', true);
 xhr.send();

 xhr.addEventListener("readystatechange", processRequest, false);

 function processRequest(e) {
     if (xhr.readyState == 4) {
         //If you use a cache storage manager (service worker), it is likely that the
         //index.php file will be available even without internet, so do the following validation
         if (xhr.status >= 200 && xhr.status < 304) {
             console.log('On line!');
         } else {
             console.log('Offline :(');
         }
     }
}

Как насчет отправки непрозрачного HTTP-запроса на google.com без-cors?

    fetch('https://google.com', {
        method: 'GET', // *GET, POST, PUT, DELETE, etc.
        mode: 'no-cors',
    }).then((result) => {
        console.log(result)
    }).catch(e => {
        console.error(e)
    })

Причина установки no-cors заключается в том, что я получал ошибки cors даже при нарушении балансировки сетевого соединения на моем компьютере. Итак, я получал блокировку cors с подключением к Интернету или без него. Добавление no-cors делает запрос непрозрачным, что, по всей видимости, обходит cors и позволяет мне просто проверить, могу ли я подключиться к Google.

К вашему сведению: я использую здесь выборку для выполнения HTTP-запроса. https://www.npmjs.com/package/fetch

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

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

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

На два разных сенария есть 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.

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