Mitigate Unplanned Scale Issues with an iRule Waiting Room

This solution originates on Tuncay Sahin’s website and is shared with minor updates with permission here. F5er Tim Wagner reached out after hearing news of the flood of unemployment claims causing si...
Published Apr 14, 2020
Version 1.0
application delivery
iRules
LTM
JRahm's avatar
JRahm
Icon for Admin rankAdmin
Apr 21, 2020

waitingroom.html:

 

<html>
    <head>
        <meta http-equiv="refresh" content="60">
        <title>Online Waiting Room</title>
        <style>
        </style>
        <script type="text/javascript" src="bb.js"></script>
    </head>
    
 
    <body onload="init();">
        <center>
            <h2>Online Waiting Room</h2>
            <h3>Hey there...sorry about the wait!</h3>
            <p>We currently have an exceptionally large number of visitors on the site and you are in the queue.</p>
			<p>Please hold tight, it should only be a few minutes. Make sure you stay on this page and you will be automatically redirected shortly.</p>
            <div>
                <canvas id="canvas" width="800" height="600">
                    <p>Your browser doesn't support canvas.</p>
                </canvas>
            </div>
            <img src="bar.png" id="bar" style="display:none"/>
        </center>
    </body>
</html>

 

bb.js (found it on the web and updated it, it wasn't sited inline and I forgot to grab the URL so no citation. Sorry!)

 

var canvas;
var ctx;
var dx = 1;
var dy = 2;
var bar=new Bar(400,500);
var circle=new Circle(400,30,10);
var dxBar=6;
var timer;
var barImg;
function Bar(x,y){
  this.x=x;
  this.y=y;
}
function Circle(x,y,r){
  this.x=x;
  this.y=y;
  this.r=r;
}
function drawBall(c) {
  ctx.beginPath();
  ctx.arc(c.x, c.y, c.r, 0, Math.PI*2, true);
  ctx.fill();
}
function doKeyDown(e){
  if(e.keyCode==37){
    if(bar.x-dxBar>0)
      bar.x-=dxBar;
  }
  else if(e.keyCode==39){
    if(bar.x+dxBar<canvas.width)
      bar.x+=dxBar;
  }
}
function init() {
  window.addEventListener("keydown",doKeyDown,false);
  barImg=document.getElementById("bar");
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  timer=setInterval(draw, 3);
  return timer;
}
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#FAF7F8";
  ctx.fillRect(0,0,canvas.width,canvas.height);
  ctx.fillStyle = "#003300";
  drawBall(circle);
  if (circle.x +dx > canvas.width || circle.x +dx < 0)
    dx=-dx;
  if(circle.y+dy>bar.y && circle.x>bar.x && circle.x<bar.x+barImg.width)
    dy=-dy;
  if (circle.y +dy > canvas.height || circle.y +dy < 0)
    dy=-dy;
  circle.x += dx;
  circle.y += dy;
  ctx.drawImage(barImg,bar.x,bar.y);
  if(circle.y>bar.y){
    clearTimeout(timer);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    alert("Game Over");
  }
}