Javascript Timestamp not correct

JavaScript
1

Hi everyone,

I’m looking for some help if possible please, I’m new with JavaScript and just doing some testing on my own machine (I’ve also tested this on my VPS aswell). I’ve created a little key logged that logs the key strokes on a page, how ever one issue was that the key strokes are not always posted to the url in order. So for example lets say I typed in “QWERTY”, it would POST each key stroke but it may not come in order like “QRWTEY”. I thought one way round this would be to add a timestamp on the entries so that way I can put them in order myself based on the timestamp.

But heres the issue, the timestamp doesn’t seem to be correct and I’m not sure why, so if I typed in QWERTY then you would think that the timestamp for each key stroke would be starting with ! as the earliest key stroke and Y being the last. How ever that doesn’t seem to be the case. for example:

e 02/08/2018 2:22:148
r 02/08/2018 2:22:331
t 02/08/2018 2:22:531
q 02/08/2018 2:22:778
y 02/08/2018 2:22:833
w 02/08/2018 2:22:947

As you can see thats not right, so there must be something wrong with my code but i cant work out what as im only calling for the timestamp to be assigned to each key stroke when there is one and each key stroke is then submitted.

Here is my code, can anyone help me please, it would be much appreciated.

function formatDate(date) {
          var hours = date.getHours();
          var minutes = date.getMinutes();
          var milli = date.getMilliseconds();
          minutes = minutes < 10 ? '0'+minutes : minutes;
          var strTime = hours + ':' + minutes+ ':' + milli;
          return date.getMonth()+1 + "/" + date.getDate() + "/" + date.getFullYear() + " " + strTime;
        }
        
        
document.onkeypress = function(evt) {
       evt = evt || window.event
       key = String.fromCharCode(evt.charCode)
       if (key) {
          
        var d = new Date();
        var e = formatDate(d);
          var http = new XMLHttpRequest();
          var param = encodeURI(key)
          http.open("POST","https://www.DOMAIN.co.uk/test/save.php",true);
          http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
          http.send("key="+param+" "+e);
       }
    }

Thank you.

2

Ok so I noticed that I stupidly missed off adding the SECONDS to the timestamp, so the code above was just doing hour, minutes and then milliseconds. Where as now ive changed the code to now to hour, minutes, seconds, milliseconds.

How ever it seemed to have fixed the issue with typing something like QWERTY but when typing something longer like just 2 key strokes longer it seems to be not putting it in order again.

Anyone have any ideas?

3

Hi Micky007192 welcome to the forum

Sorry, but I have guesses only.

The easy, but unlikely to be the problem one to try is replacing the deprecated “charCode” with “char”

The one I suspect as more likely the problem is that XHR is asynchronous and it is possible that a subsequent keypress is being returned before a previous one.

This could be tested a couple of ways.

Add a console log here

.....
var param = encodeURI(key); 
console.log(param); // for debugging only
http.open("POST","https://www.DOMAIN.co.uk/test/save.php",true); 
.....

and see if the logs are in the correct order. Another way would be to fire the keypress events only after waiting a while to give the XHR time to return.

4

In this test code I’m not seeing that issue occur in the console.log information about the key and the time.

5

Hi Guys,

I found what the issue was, the issue was with the milliseconds, if was less than 100 then it wouldn’t add a 0 at the beginning but I changed that by adding this line:

milli = milli < 100 ? '0'+milli : milli;

That seems to have fixed my issue :slight_smile:

Thanks for your response guys.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.