检测到Internet连接离线?

2020/10/09 08:21 · javascript ·  · 0评论

如何在JavaScript中检测Internet连接是否离线?

您可以通过发出失败的XHR请求来确定连接丢失

标准方法是重试几次请求如果未通过,请警告用户检查连接,然后正常失败

旁注:将整个应用程序置于“脱机”状态可能会导致很多容易出错的状态处理工作。无线连接可能会来去去等等。因此,最好的选择是妥善地失败,保留数据,并警告用户..允许他们最终解决连接问题(如果有的话),并在相当多的宽恕下继续使用您的应用。

旁注:您可以检查像google这样的可靠网站的连通性,但这可能并不完全有用,仅是尝试提出自己的请求,因为尽管Google可能可用,但您自己的应用程序可能无法使用,并且您仍将继续必须处理您自己的连接问题。尝试向Google发送ping通知是确认互联网连接本身已断开的好方法,因此,如果该信息对您有用,那么麻烦就值得了。

旁注发送Ping的方式可以与您发出任何双向双向Ajax请求的方式相同,但是在这种情况下,向Google发送Ping会带来一些挑战。首先,我们将遇到与进行Ajax通信时通常遇到的相同的跨域问题。一种选择是设置服务器端代理,我们实际上在其中ping搜索Google(或任何站点),并将ping结果返回给应用程序。这是一个陷阱22因为如果实际上是Internet连接,我们将无法连接到服务器,并且如果连接问题仅在我们自己的域上,我们将无法分辨出差异。可以尝试其他跨域技术,例如,在您的网页中嵌入一个指向google.com的iframe,然后对iframe进行轮询以检查成功/失败(检查内容等)。嵌入图像可能并不能真正告诉我们任何信息,因为我们需要通信机制提供有用的响应才能得出正确的结论。因此,再次确定整个Internet连接的状态可能比其价值更大。您必须为您的特定应用权衡这些选项。

现在,几乎所有主流浏览器都支持该window.navigator.onLine属性以及相应的onlineoffline窗口事件:

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

尝试将系统或浏览器设置为脱机/在线模式,然后检查控制台或window.navigator.onLine属性值是否更改。您也可以在此网站上对其进行测试

但是请注意,Mozilla文档中的以下引用

在Chrome和Safari中,如果浏览器无法连接到局域网(LAN)或路由器,则表明该浏览器处于离线状态;其他所有条件都返回true因此,尽管你可以假设的是,浏览器处于脱机状态,当它返回一个false你不能假设true值必然意味着浏览器可以访问互联网您可能会得到误报,例如,当计算机运行的虚拟化软件具有始终“连接”的虚拟以太网适配器时。因此,如果您确实要确定浏览器的在线状态,则应开发其他检查方法。

在Firefox和Internet Explorer中,将浏览器切换为脱机模式将发送一个false值。在Firefox 41之前,所有其他条件都返回true值;从Firefox 41开始,在OS X和Windows上,该值将遵循实际的网络连接。

(强调是我自己的)

这意味着,如果window.navigator.onLinefalse(或您收到offline事件),则可以保证没有Internet连接。

true但是,如果是这样(或您收到online事件),则仅表示系统最多已连接到某个网络。例如,这并不意味着您可以访问Internet。要进行检查,您仍然需要使用其他答案中描述的解决方案之一。

我最初打算将其发布为对格兰特·瓦格纳(Grant Wagner)的回答的更新,但是这似乎太多了,尤其是考虑到2014年的更新不是他的

IE 8将支持window.navigator.onLine属性。

但这当然对其他浏览器或操作系统没有帮助。鉴于了解Ajax应用程序中的联机/脱机状态的重要性,我预计其他浏览器供应商也会决定提供该属性。

在此之前,XHR或anImage()<img>request都可以提供与所需功能接近的功能。

更新(2014/11/16)

现在,主要的浏览器都支持此属性,但是结果会有所不同。

引用Mozilla文档

在Chrome和Safari中,如果浏览器无法连接到局域网(LAN)或路由器,则表明该浏览器处于离线状态;其他所有条件都返回true因此,尽管您可以假定浏览器在返回false时处于脱机状态,但不能假设真实值必然意味着浏览器可以访问互联网。您可能会得到误报,例如,当计算机运行的虚拟化软件具有始终“连接”的虚拟以太网适配器时。因此,如果您确实要确定浏览器的在线状态,则应开发其他检查方法。

在Firefox和Internet Explorer中,将浏览器切换为脱机模式将发送一个false值。所有其他条件都返回一个true值。

有很多方法可以做到这一点:

  • AJAX请求到您自己的网站。如果该请求失败,则很有可能是连接故障。JQuery的文件有一个部分处理失败的AJAX请求执行此操作时请注意“相同来源策略”,这可能会阻止您访问域外的网站。
  • 你可以把一个onerrorimg

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

    如果源图像被移动/重命名,则此方法也可能失败,并且通常比ajax选项逊色。

因此,有几种不同的方法可以尝试检测这种情况,但并非完美无缺,但是在无法跳出浏览器沙箱并直接访问用户的网络连接状态的情况下,它们似乎是最佳选择。

 if(navigator.onLine){
  alert('online');
 } else {
  alert('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对象,描述发生的错误类型的字符串和可选的异常对象(如果发生)。第二个参数(除null外)的可能值为“超时”,“错误”,“未修改”和“ 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!');
       }
   }
 });

HTML5应用程序缓存API指定了navigator.onLine,该浏览器目前在IE8 Beta,WebKit(例如Safari)每晚提供,并且在Firefox 3中已受支持。

正如olliej所说,使用navigator.onLine浏览器属性比发送网络请求更可取,因此,对于developer.mozilla.org/En/Online_and_offline_events,旧版本的Firefox和IE甚至都支持它。

最近,WHATWG已指定onlineoffline事件的添加,以防您需要对navigator.onLine更改做出反应

也请注意Daniel Silveira发布的链接,该链接指出依靠那些信号/属性与服务器同步并不总是一个好主意。

我必须为与学校打交道的客户制作一个Web应用程序(基于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();
        }
    });
}
window.navigator.onLine

是您要查找的内容,但要添加的内容很少,首先,如果您要继续检查应用程序中的某些内容(例如查看用户是否突然脱机,这种情况在大多数情况下可以纠正),那么您还需要侦听更改),为此,您可以向窗口添加事件侦听器以检测任何更改,要检查用户是否离线,可以执行以下操作:

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

并检查是否在线:

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

对您的域进行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;

我一直在寻找一种客户端解决方案,以检测互联网是否关闭或服务器是否关闭。我发现的其他解决方案似乎总是依赖于第三方脚本文件或图像,在我看来,这似乎经不起时间的考验。外部托管脚本或图像将来可能会更改,并导致检测代码失败。

我找到了一种通过查找带有404代码的xhrStatus进行检测的方法。另外,我使用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)
        }
    }
});

我的方式。

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

请求头请求错误

$.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 :(');
         }
     }
}

我知道这个问题已经得到了回答,但是我想加我的10美分来解释什么更好和什么不好。

Window.navigator.onLine

我注意到有关此选项的一些答案,但他们从未提及有关警告的任何内容。

此选项涉及“ window.navigator.onLine的使用,该属性是大多数现代浏览器上可用的Browser Navigator Interface下的属性。这实际上不是检查互联网可用性的可行选择,因为首先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)或路由器,则表明该浏览器处于离线状态;所有其他条件都返回true。因此,尽管您可以假定浏览器在返回假值时处于脱机状态,但不能假设真值必然意味着浏览器可以访问互联网。您可能会得到误报,例如,当计算机运行的虚拟化软件具有始终“连接”的虚拟以太网适配器时。

上面的陈述只是试图让您知道浏览器无法分辨。因此,基本上,此选项不可靠。

发送请求到自己的服务器资源


这涉及向您自己的服务器资源发出HTTP请求,如果可以访问,则假定Internet可用,否则用户处于脱机状态。
此选项有一些警告。

  1. 没有服务器可用性是100%依赖的,因此,如果由于某种原因服务器无法访问,则会错误地假定用户处于脱机状态,而他们已连接到Internet。
  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);
  });

发送请求到第三方服务器资源


众所周知,CORS是一回事。

此选项涉及向外部服务器资源发出HTTP请求,如果可以访问,则假定Internet可用,否则用户处于脱机状态。最主要的警告是跨域资源共享,它是一种限制。大多数信誉良好的网站都会阻止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);
  });

因此,最后对于我的个人项目,我选择了第二个选项,该选项涉及请求自己的服务器资源,因为基本上有很多因素可以判断用户设备上是否存在“ Internet连接”,而不仅仅是来自您的网站容器,还是来自有限的网站浏览器API。

请记住,您的用户也可能处于某些网站或资源被阻止,禁止和无法访问的环境中,这反过来又会影响连接检查的逻辑。最好的选择是:

  • 尝试访问您自己的服务器上的资源,因为这是您的用户环境(通常,我使用网站的网站图标,因为响应非常轻且不经常更新)。
  • 如果没有资源连接,则在需要通知用户时只需说“连接错误”或“连接丢失”,而不是假设广泛的“无互联网连接”取决于许多因素。

对于两个不同的senario,有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请求来确定连接丢失。

    标准方法是重试几次请求。如果未通过,请警告用户检查连接,然后正常失败。

这是我所拥有的一个辅助工具的片段。这是命名空间的javascript:

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

您应该将此方法与方法检测结合使用,否则将触发执行此操作的“替代”方法。当这将是所有需要的时间快到了。其他方法是黑客。

本文地址:http://javascript.askforanswer.com/jiancedaointernetlianjielixian.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!