Multiple xmlhttprequestes not sending data to back-end

I’m new to xmlhttprequests, so please bear with me. I am trying to make a program that records the users key press and send it to server to save it to a .txt file, but it is not working. The problem is from the JavaScript side it is not sending the data to the server side. Is it not allowed to send multiple requests to the same server address? Where did I go wrong? I have added comments through out my code to help understand better.

JavaScript:

var keylog = {
  // (A) SETTINGS & PROPERTIES
  cacheW: [], // TEMP STORAGE FOR KEY PRESSES
  cacheA: [],
  cacheD: [],
  cacheS: [],
  delay: 500, // HOW OFTEN TO SEND DATA TO SERVER
  sending: false, // ONLY 1 UPLOAD ALLOWED AT A TIME

  // (B) INITIALIZE
  init: function() {
    // (B1) CAPTURE KEY STROKES
    window.addEventListener("keydown", function(evt) {
      if (evt.key == "w") {
        keylog.cacheW.push(evt.key);
        //console.log("this: " + evt.key)
      } else if (evt.key == "a") {
        keylog.cacheA.push(evt.key);
        //console.log("this: " + evt.key)
      } else if (evt.key == "d") {
        keylog.cacheD.push(evt.key);
        //console.log("this: " + evt.key)
      } else if (evt.key == "s") {
        keylog.cacheS.push(evt.key);
        //console.log("this: " + evt.key)
      }

    });

    window.addEventListener("keyup", function(evt) {
      if (evt.key == "w") {
        keylog.cacheW.push("!" + evt.key);
        //console.log("this: " + evt.key + " removed")
      } else if (evt.key == "a") {
        keylog.cacheA.push("!" + evt.key);
        //console.log("this: " + evt.key + " removed")
      } else if (evt.key == "d") {
        keylog.cacheD.push("!" + evt.key);
        //console.log("this: " + evt.key + " removed")
      } else if (evt.key == "s") {
        keylog.cacheS.push("!" + evt.key);
        //console.log("this: " + evt.key + " removed")
      }

    });

    // (B2) SEND KEYSTROKES TO SERVER
    window.setInterval(keylog.send, keylog.delay);
  },

  // (C) AJAX SEND KEYSTROKES
  send: function() {
    if (!keylog.sending && keylog.cacheW.length != 0) {
      // (C1) "LOCK" UNTIL THIS BATCH IS SENT TO SERVER
      keylog.sending = true;

      // (C2) W KEYPRESS DATA
      var dataW = new FormData();
      dataW.append("keysW", keylog.cacheW);
      keylog.cacheW = []; // CLEAR KEYS

      // (C2) A KEYPRESS DATA
      var dataA = new FormData();
      dataA.append("keysA", keylog.cacheA);
      keylog.cacheA = []; // CLEAR KEYS

      // (C2) D KEYPRESS DATA
      var dataD = new FormData();
      dataD.append("keysD", keylog.cacheD);
      keylog.cacheD = []; // CLEAR KEYS

      // (C2) S KEYPRESS DATA
      var dataS = new FormData();
      dataS.append("keysS", keylog.cacheS);
      keylog.cacheS = []; // CLEAR KEYS

      // (C3) AJAX SEND
      var xhrW = new XMLHttpRequest();
      xhrW.open("POST", "index4.php");
      xhrW.onload = function() {
        keylog.sending = false; // UNLOCK
        //console.log(this.response); 
      };

      var xhrA = new XMLHttpRequest();
      xhrA.open("POST", "index4.php");
      xhrA.onload = function() {
        keylog.sending = false; // UNLOCK
        //console.log(this.response); 
      };

      var xhrD = new XMLHttpRequest();
      xhrD.open("POST", "index4.php");
      xhrD.onload = function() {
        keylog.sending = false; // UNLOCK
        //console.log(this.response);
      };

      var xhrS = new XMLHttpRequest();
      xhrS.open("POST", "index4.php");
      xhrS.onload = function() {
        keylog.sending = false; // UNLOCK
        //console.log(this.response);
      };

      xhrW.send(dataW);
      xhrA.send(dataA);
      xhrD.send(dataD);
      xhrS.send(dataS);
    }
  }
};
window.addEventListener("DOMContentLoaded", keylog.init);

<?php
$keysW = $_POST['keysW'];
$keysA = $_POST['keysA'];
$keysD = $_POST['keysD'];
$keysS = $_POST['keysS'];

$keylogW = 'player2KeylogW.txt';
$writeKeylogW = fopen($keylogW, "w") or die("Unable to open file!");

fwrite($writeKeylogW, json_encode($keysW));
fclose($writeKeylogW);

$keylogA = 'player2KeylogA.txt';
$writeKeylogA = fopen($keylogA, "w") or die("Unable to open file!");

fwrite($writeKeylogA, json_encode($keysA));
fclose($writeKeylogA);

$keylogD = 'player2KeylogD.txt';
$writeKeylogD = fopen($keylogD, "w") or die("Unable to open file!");

fwrite($writeKeylogD, json_encode($keysD));
fclose($writeKeylogD);

$keylogS = 'player2KeylogS.txt';
$writeKeylogS = fopen($keylogS, "w") or die("Unable to open file!");

fwrite($writeKeylogS, json_encode($keysS));
fclose($writeKeylogS);

chmod($keylogW , 0755);
chmod($keylogA , 0755);
chmod($keylogD , 0755);
chmod($keylogS , 0755); 
?>

Answer

Just quickly looking at your JS code, the following line:

if (!keylog.sending && keylog.cacheW.length != 0) {
   ...
}

… will only send data if the keylog.sending flag is false and the “W” key was previously pressed (any other keys pressed will have no effect and hence, no data will be sent).

You may also want to modify your “sending” code to match that show in the official documentation at: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send#example_post

Advertisement

Answer