0

We use a graphing system that uses SNMP to retrieve data to graph with on every five minute mark. For example, 12:00, 12:05, 12:10, and so on. We retrieve the graph as an image. The problem is that the browser likes to use the cached image, and we cannot get a new image until we delete the cache. What I am trying to do is generate a random tag to append to the image that makes it unique, therefore not using the cached image. We were able to generate a random tag every time the image was retrieved, but this led to a lot of server utilization from all the requests and slower response times. What I am attempting to do now is generate a new tag ONLY if:

a) it has been greater than four minutes (5+) since the user retrieved an image (because a five minute mark would have had to pass),

b) it has been less than five minutes since an image was retrieved, but a five minute mark has passed since the last time an image was retrieved. For example, a if a person retrieves an image at 12:04, he or she won't be able to get a new one until five minutes later with the first test, but the second test will recognize that 12:05 passed if he or she attempts to retrieve an image at 12:06.

What I tried to do was use a cookie and set the cookie to the new tag every time a new tag was generated. On page load it would load RandomTag variable with the value of the cookie. Onclick it would be determined if five minutes has passed since the time in the RandomTag variable or if a five minute mark has past since the last generation of a tag, generate a new tag if it has, and set cookie with new tag; otherwise the tag would go unchanged.

Could anyone check this and see if there are any problems? I tried this code, and it made my page hang. I don't know what I am missing. Also, if you have a simpler way to do this, please let me know.

Here is an example of my code:

 <body onload="checkCookie()">

 function getCookie(cname) {
     var name = cname + "=";
     var ca = document.cookie.split(';');
     for(var i=0; i<ca.length; i++) {
         var c = ca[i];
         while (c.charAt(0)==' ') c = c.substring(1);
         if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
     }
     return "";
 }

 function setCookie(cname, cvalue, exdays) {
     var d = new Date();
     d.setTime(d.getTime() + (exdays*24*60*60*1000));
     var expires = "expires="+d.toUTCString();
     document.cookie = cname + "=" + cvalue + "; " + expires;
 }

 function checkCookie() {
    randomTag = getCookie("timeTag");
 }

 function tagGet() {
    timeNow = new Date().getTime();
    timeDif = timeNow - randomTag;
    minNow = timeNow.getMinutes();
    minLast = randomTag.getMinutes();
    minDif = minNow - minLast;
    if (timeDif > 29999) { //If 5+ minutes have passed
        randomTag = timeNow;
        setCookie("timeTag", timeNow, 365);
    }
    else if (timeDif < 30000) { //If less than 5 minutes have passed
        if (minDif > 0) { //If at least 1 minute has passed since last random tag generation
            for (y = 0; y < minDif; y++) { //Check to see if a five minute mark has passed by decrementing the current minute mark and comparing it to a five minute mark
                for (z = 0; z < 60; z += 5) { //Increment by five minute marks for comparison ... 0, 5, 10, etc
                    if (minNow == z) { //If the minute mark now matches a five minute mark
                        randomTag = timeNow;    
                        setCookie("timeTag", timeNow, 365);
                    }
                    minNow--; //Decrement minute mark now for comparing next minute mark
                }
            }
        }
    }
 }

 <a href="#" onClick="tagGet()">#</a> //This is generic
nicholasm5581
  • 1
  • 2
  • not a direct answer to your js question but cache busting is usually done server-side ... what stack are you using on your server ? I am thinking of something like this (I am a hapi js user): https://github.com/poeticninja/hapi-cache-buster – tgo Mar 06 '15 at 16:41
  • tgo unfortunately I have no access to the server so i have to use logic on the client side – nicholasm5581 Mar 06 '15 at 16:45
  • What I was thinking of maybe doing was, on page load, find the last five minute mark, generate a tag off that, and then starting a timer that generates a new tag every five minutes. I just think it will be more intensive to have an ongoing timer than to run the function on click. – nicholasm5581 Mar 06 '15 at 16:54
  • for running a function every 5 minutes, you can use `setInterval(f,t)`, where `f ` is the function to run and `t` is the number of milliseconds to wait for. https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval This might help you at least not relying on date computations. I don't have a better right now. – tgo Mar 06 '15 at 17:00

2 Answers2

0

Set a global variable lastImage and set that to Date() when an image is requested.

Then only retrieve a new image if Date() >= lastImage + (5 * 60 * 1000).

And you can use Date() at the end of the url for the unique identifier to avoid caching.

Greg Lafrance
  • 768
  • 1
  • 7
  • 18
  • The only problem with that is that it will only retrieve an image after five minutes in general, but it will not detect if a five minute mark has passed. The server grabs info via SNMP on the five minute marks of an hour: 12:00, 12:05, 12:10, and so on. With your solution, if a user gets an image at 12:04, he or she cannot get another one until 12:09, but an updated image was available at 12:05. I need the logic to detect if a five minute mark has passed since the previous retrieval. – nicholasm5581 Mar 06 '15 at 16:49
0

Ok. I found a VERY simple solution to this. Basically I will just set my variable to equal the last five minute mark by rounding the current time down to the last five minute mark! Silly me. The answer was here, except I subtracted 2.5 instead of added 2.5 since I want to find the last five minute mark: Javascript: Round Time UP nearest 5 minutes

Community
  • 1
  • 1
nicholasm5581
  • 1
  • 2