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

I also had another version similar to the one I used in my iFile article years back, updated for the new "Jimmy Packets" mascot. The JS is embedded in this one though, I'd recommend stripping it out into it's own file if you go this route. I used a 50x50 pixel image.

 

 

 

<html>
    <head>
        <meta http-equiv="refresh" content="60">
        <title>Online Waiting Room</title>
        <style>
        </style>
    </head>
    <script>
        var surface;
        var happy;
        var x = 25;
        var y = 25;
        var dirX = 1;
        var dirY = 1;
 
        function drawCanvas() {
            // Get our Canvas element
            surface = document.getElementById("myCanvas");
           
            if (surface.getContext) {
                // If Canvas is supported, load the image
                dcjp = new Image();
                dcjp.onload = loadingComplete;
                dcjp.src="dcjp_50px.png";
            }
        }
 
        function loadingComplete(e) {
            // When the image has loaded begin the loop
            setInterval(loop, 5);
        }
 
        function loop() {
            // Each loop we move the image by altering its x/y position
           
            // Grab the context
            var surfaceContext = surface.getContext('2d');
           
            // Draw the image
            surfaceContext.drawImage(dcjp, x, y);
 
            x += dirX;
            y += dirY;
 
            if (x <= 0 || x > 700 - 25) {
                dirX = -dirX;
            }
            if (y <= 0 || y > 350 - 40) {
                dirY = -dirY;
            }
        }
    </script>
 
    <body onload="drawCanvas();">
        <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. Be mesmerized below, and you will be automatically redirected shortly.</p>
            <div>
                <canvas id="myCanvas" width="700" height="350">
                    <p>Your browser doesn't support canvas.</p>
                </canvas>
            </div><br>
        </center>
    </body>
</html>