Javascript diagnoseerrors как исправить нет подключения к интернету

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

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

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

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

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

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

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

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

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

Например. ошибка = 404 все равно должна означать, что вы онлайн

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

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

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

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

window.navigator.onLine

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

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

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

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

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

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

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

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

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

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

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

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

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

Мой путь.

<!-- 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, заключается в том, что они несовместимы с некоторыми браузерами и мобильными версиями. Мне очень помог вариант, заключающийся в использовании классического метода 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 :(');
         }
     }
}

Вы можете использовать $ .ajax () error обратный вызов, который срабатывает в случае сбоя запроса. Если 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

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

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

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

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

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

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

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

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

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

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

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