client input remote code

This code adds event listeners to various elements on a web page to capture user interactions, including clicks, key presses, and button clicks, and sends POST requests to a server with session IDs and relevant data. The code also parses query parameters from the URL and sets the session ID property, and defines a function to retrieve checked input values from elements with the class "container".

Run example

What the code could have been:

// Wait for the DOM to be fully loaded before executing the code
document.addEventListener('DOMContentLoaded', () => {
  const queryParams = getQueryParams();
  const session = queryParams.session;
  if (session) {
    window.sessionId = session;
  }

  // Set up event listeners for the live dev button and key press
  document.querySelector('.livedev').addEventListener('click', sendClickEvent);
  document.querySelector('#sendkeys').addEventListener('keypress', sendKeysEvent);

  const specialKeys = getSpecialKeys();
  const buttons = document.querySelectorAll('.container button');

  // Add event listeners to each button
  buttons.forEach(button => {
    button.addEventListener('click', sendKeysEvent);
  });

  // Refresh images every 5 seconds (TODO: implement image refresh functionality)
  setInterval(refreshImages, 5000);

  // Function to get query parameters
  function getQueryParams() {
    const params = (window.location.search.split('?')[1] || '').split('&');
    const queryParams = {};
    params.forEach(param => {
      const [key, value] = param.split('=');
      queryParams[key] = decodeURIComponent(value || "");
    });
    return queryParams;
  }

  // Function to send click event
  function sendClickEvent(evt) {
    const localX = evt.clientX - evt.currentTarget.offsetLeft;
    const localY = evt.clientY - evt.currentTarget.offsetTop;
    fetch(`{BASE_URI}click?session=${sessionId}`, {
      method: 'POST',
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        x: localX / evt.currentTarget.clientWidth,
        y: localY / evt.currentTarget.clientHeight
      })
    });
  }

  // Function to send key press event
  function sendKeysEvent(evt) {
    if (currentTimer) {
      return;
    }
    currentTimer = setTimeout(() => {
      sendKeys();
      this.value = '';
      currentTimer = void 0;
    }, 1000);
    evt.preventDefault();
  }

  // Function to send key press data
  function sendKeys() {
    fetch(`{BASE_URI}keys?session=${sessionId}`, {
      method: 'POST',
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        text: this.value,
        special: getSpecialKeys()
      })
    });
  }

  // Function to get special keys
  function getSpecialKeys() {
    return Array.from(document.querySelectorAll('.container input:checked')).map(input => input.value);
  }

  // Function to refresh images
  function refreshImages() {
    const images = document.querySelectorAll('.livedev > img');
    images.forEach(image => {
      if (image.src &&!image.hasAttribute('original-src')) {
        image.setAttribute('original-src', image.src);
      }
      const originalImage = image.getAttribute('original-src');
      const newImage = originalImage.replace(/\?.*/, '') + `?t=${Date.now()}`;
      if (image.src) {
        image.style.backgroundImage = `url('${encodeURI(image.src)}')`;
      }
      setTimeout(() => {
        image.src = newImage;
      }, 100);
    });
  }
});

Code Breakdown

Event Listener for DOM Content Loaded

The code starts by adding an event listener to the document object when the DOM content is loaded. This event listener is used to execute a function when the DOM is fully loaded.

Parsing Query Parameters

The code then parses the query parameters from the current URL. It uses the split() method to extract the query string and then splits it into individual parameters.

Setting Session ID

The code checks if a session parameter is present in the query parameters and sets it as the window.session_id property.

Click Event Listener

The code adds an event listener to an element with the class livedev. When this element is clicked, it sends a POST request to a URL with the session ID and the click coordinates.

getSpecialKeys Function

The getSpecialKeys function returns an array of values from input elements with the class container that have a checked property.

Key Press Event Listener

The code adds an event listener to an element with the ID sendkeys. When this element receives a key press, it sends a POST request to a URL with the session ID and the text entered in the element. It also clears the text input.

Button Event Listeners

The code adds event listeners to all button elements with the class container. When a button is clicked, it calls the getSpecialKeys function and sends a POST request to a URL with the session ID.