CODEWITHSUNDEEP
javascriptphphtmlajaxbash
Just Works
Just Works

Reputation: 35

Use PHP to execute bash command on HTML button element click event

My brain doesn't seem to want to work today. I am running vlc on a Raspberry Pi with a screen connected and mounted to the wall. I have a web page running with some simple controls to reboot the pi and switch to one of several vlc streams or stop streaming to show a website containing data. The problem I'm facing is getting the buttons to send a bash command to forward commands to the pipeline. eg. echo play >/tmp/vlc_command. these command work while on a remote terminal to do what I'm wanting, but not too familiar with PHP or Ajax. I know with PHP, the command that I want to send is shell_exec("echo play >/tmp/vlc_command") but I can't figure out how to tie it all together with the HTML element.

/tmp/vlc_command is a named pipeline I'm using to send commands to an instance of vlc running in the background.

Note: I'm using <button> elements, I don't want to use <input> elements as they will break my design. If I don't need PHP, that's fine, I just need to execute a command in bash (linux command line).

Upvotes: 0

Views: 916

Answers (1)

LongLegJim
LongLegJim

Reputation: 305

PHP code is evaluated on the server with each request, so there is no way to call a PHP function from the browser directly.

Instead, a new request is made from the browser via Javascript to the PHP file that contains the function you'd like to run.

web-page.php

<?php 
  // web-page.php
?>

<button id="play">Play</button>
<button id="next">Next</button>
<button id="prev">Prev</button>
<button id="stop">Stop</button>

<script>
  const play = document.getElementById("play");
  const next = document.getElementById("next");
  const prev = document.getElementById("prev");
  const stop = document.getElementById("stop");

  play.addEventListener("click", ()=>{executeCommand('play')});
  next.addEventListener("click", ()=>{executeCommand('next')});
  prev.addEventListener("click", ()=>{executeCommand('prev')});
  stop.addEventListener("click", ()=>{executeCommand('stop')});

  async function executeCommand(action) {
    try {
      const res = await fetch(`http://your-site.com/execute-shell-command.php?action=${action}`);
      console.log(res.json());
    } catch (error) {
      console.error(new Error(error));
    }
  }
</script>

<?php

execute-shell-command.php

<?php

// Get the query params
$action = $_GET["action"];

if (isset($action)) {
  $command = shell_exec("echo {$action} >/tmp/vlc_command");
  
  // Returns FALSE if pipe can't be established
  if ($command === FALSE) {
    $output = 'Pipe could not be established';
  }
  
  // This function can return NULL both when an error occurs or the command produces no output
  if ($command === NULL) {
    $output = 'Command produced no output';
  }
  
  // A string containing the output from the executed command
  if ($command) {
    $output = $command;
  }
}

// Anything echo'd will be the response to the request
// and will get console.logged in the browser
echo json_encode(array("requested action"=>$action, "output" => $output));

This example doesn't include any security measures to prevent unauthorized requests to the PHP file, it just demonstrates how to trigger a snippet of PHP code to run from the browser.

Upvotes: 2

Related Questions