自动刷新502 Bad Gateway错误页面

时间:2017-03-04 02:01:25

标签: javascript http nginx

当我在我的网站上进行维护并重新启动服务器时,NGINX有时会返回502 Bad Gateway错误。在重负荷下有时会发生同样的事情。这对于那些没有意识到这个问题可能是暂时性的访问者来说很困惑。有什么方法可以让访问者在网站回来时自动刷新页面吗?

1 个答案:

答案 0 :(得分:1)

您可以通过使用Javascript检查当前页面的HTTP状态代码来实现此目的,并在服务器备份时刷新页面(即返回200 OK状态代码)。为避免在许多用户同时遇到502错误页面时锤击服务器,我建议使用truncated binary exponential backoff算法。这意味着重试之间的时间每次增加一倍,直到达到预设的最大值,这会降低服务器的总负载。

下面的代码检查AJAX上的当前页面HTTP状态,直到它返回200 OK,在这种情况下,它将刷新页面以获取实时版本。如果遇到502,它将尝试重试,从8秒间隔开始,然后是16,32,...,4096秒,然后以4096秒间隔(约68分钟)进行无限制的后续重试。如果遇到502200以外的任何代码,则会以静默方式中止重试过程(如果需要,您可以使用更多case语句更改此方法。)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Currently unavailable</title>
</head>
<body>
  <h1>Site currently unavailable (code 502)</h1>

  <p>This page will refresh when the site is back.</p>

  <noscript>Your browser doesn’t support javascript. Please try refreshing the page manually every few minutes.</noscript>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
  /* Set starting and maximum retry times in seconds */
  var retry_current = 8, // first refresh at 8 seconds
      retry_max = 4096, // refresh time truncated at about 68 minutes
      check_response = function() {
      $.ajax(
          {
              url: window.location.href,
              type: "HEAD",
              complete: function (jqXHR) {
                  switch (jqXHR.status) {
                      case 200:
                          window.location.reload(true);
                          break;
                      case 502:
                          if(retry_current < retry_max) {
                              retry_current *= 2;
                          }
                          setTimeout(check_response, retry_current * 1000);
                  }
              }
          });
      };
    setTimeout(check_response, retry_current * 1000);
    </script>
</body>
</html>

如果您正在使用nginx,可以将以下内容添加到配置文件中以使用该页面:

error_page 502 /502.html;
location = /502.html {
  alias /path/to/502.html;
}