检查互联网连接的最佳方法是什么

Question

我制作了一个CMS，在操作过程中会提取大量数据。 CMS由PHP，MySQL，jQuery，Bootstrap和使用AJAX构成。

问题是如果您丢失了互联网连接可能会导致显示和滚动问题。

我很乐意，如果有一个很好的方法来显示错误并在没有互联网连接时阻止网站上的所有功能。 建立连接后，应该是站点上允许的所有功能。

谢谢！

（对不起，我的英语不好。）

Answer 1

如果您使用的是jQuery，则可以在发生错误时挂钩全局错误处理程序并锁定应用程序。 锁定屏幕可以简单地要求再试一次。

$( document ).ajaxError(function() {
  // lock your UI here
});

此外，一旦UI被锁定，您就可以执行一个以指数退避方式ping服务器的功能，并在网络恢复时自动解锁应用程序。

使用jQuery的blockUI插件可以轻松锁定您的应用程序。

例

(function ($) {
  var locked = false;
  var errorRetryCount = 0;
  var blockUiOptions = { message: "Oops! Could not reach the server!" };

  // change this function to adjust the exponential backoff delay
  function backoff(n) {
    return Math.pow(2, n) * 100;
  }

  $(function () {
    $( document ).ajaxError(function () {
      var req = this;

      errorRetryCount += 1;

      if (!locked) {
         locked = true;
         $.blockUI(blockUiOptions);
      }

      // retry to send the request...
      setTimeout(function () { $.ajax(req); }, backoff(errorRetryCount));
    }).ajaxSuccess(function () {
      locked && $.unblockUI();
      locked = false;
      errorRetryCount = 0;
    });
  });
})(jQuery);

注意：您可能不希望在网络出现故障时无限期地重试您的请求，并且希望在某个时候退出重试。 由于这超出了这个问题的范围，我会保持原样。 但是，您可以查看此相关问题 ，这可能有助于您对此部分进行排序。

Answer 2

如果你已经使用了jQuery，你可以创建一个简单的ajax调用到你的服务器，如果它在几秒钟内失败，你的服务器或客户端互联网连接都会关闭。

像这样的东西：

setInterval(function() {
  $.ajax({
    url: "https://cms.example.com/ping",
  })
  .fail(function( data ) {
    alert('Connection lost?');
    // remember do to something smart which shows the error just once
    // instead of every five seconds. Increasing the interval every 
    // time it fails seems a good start.
  });
}, 5*1000);

Answer 3

编辑：重新阅读你的问题，并误解了我的第一次通过，所以这对连续监控无效......但我会留在这里，因为它可能对其他人有用。

我建议加载一个小的js文件，将一个类添加到页面的一个元素，然后检查该类是否在事后应用...假设你使用的是jQuery

通过脚本标记在jQuery之后加载到页面中的远程服务器上的文件

$('html').addClass('connected');

本地代码

if($('html').hasClass('connected')) {
    // connected
} else {
    // not connected
}