Assuming this is a 3D printer on your network and the php is running locally, you will not succeed in connecting to the printer using client side JS only. Since the printer likely does not have a web server either, you will still need the PHP to talk to it using the socket interface you have in the original php.

We need an endpoint the JS can talk to using fetch and get JSON returned. Something like this – note the CORS – it may or may not be needed for your local setup since you can allow the browser to access the PHP without, but I added it anyway.

 'Unable to connect'];

if ($socket && socket_connect($socket, $address, $port)) {
    $commands = [
        'status' => '~M119\r\n',     // Printer status
        'temp' => '~M105\r\n',       // Temperature
        'progress' => '~M27\r\n',    // Print progress
        'SWITCH' => '~M146 r255 g255 b255\r\n', // LED
        'PAUSE' => '~M25\r\n',      // Pause
        'RESUME' => '~M24\r\n',     // Resume
        'CANCEL' => '~M26\r\n',     // Cancel
        'HOME' => '~G28\r\n'        // Home
    ];

    $cmd = $commands[$command] ?? '';
    if ($cmd) {
        socket_send($socket, utf8_encode($cmd), strlen($cmd), 0);
        socket_recv($socket, $buf, 1024, 0);

        // Basic parsing (expand as needed)
        $response = ['raw' => $buf];
        if ($command === 'temp') {
            preg_match('/T:([\d.]+) \/([\d.]+) B:([\d.]+) \/([\d.]+)/', $buf, $matches);
            $response = [
                'temp_he' => $matches[1] ?? '',
                'temp_hes' => $matches[2] ?? '',
                'temp_bed' => $matches[3] ?? '',
                'temp_beds' => $matches[4] ?? ''
            ];
        } elseif ($command === 'progress') {
            preg_match('/byte (\d+)\/(\d+)/', $buf, $matches);
            $response = [
                'hotovo' => $matches[1] ? round(($matches[1] / $matches[2]) * 100) : ''
            ];
        } elseif ($command === 'status') {
            $response = ['stav' => trim($buf)];
        }
    }
    socket_close($socket);
}

echo json_encode($response); // this is what the JS sees
exit;

Here is an example frontend using Vanilla JS fetch to talk to the endpoint. Study it and see if you can get it to work.

const ip = new URLSearchParams(window.location.search).get('ip');
const apiUrl = `/printer_api.php?ip=${ip}`;

// Cache table fields in an object (will be populated in load)
const fields = {
  temp_he: null,
  temp_hes: null,
  temp_bed: null,
  temp_beds: null,
  hotovo: null,
  layer: null,
  file: null,
  stav: null
};

const sendCommand = (command) =>
  fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      command
    })
  })
  .then(response => {
    if (!response.ok) throw new Error('Network error');
    return response.json();
  })
  .catch(error => {
    console.error(error);
    console('Failed to connect');
    return {};
  });

const updateStatus = () =>
  sendCommand('temp')
  .then(temp => sendCommand('progress').then(progress => ({
    ...temp,
    ...progress
  })))
  .then(data => sendCommand('status').then(status => ({
    ...data,
    ...status
  })))
  .then(combinedData => {
    Object.entries(combinedData).forEach(([key, value]) => {
      if (fields[key]) fields[key].textContent = value || '';
    });
  });

const handleControlClick = (event) => {
  const cmd = event.target.dataset.command;
  if (cmd) {
    sendCommand(cmd).then(updateStatus);
  }
};

const load = () => {
  // Cache field IDs from existing HTML
  Object.keys(fields).forEach(key => {
    fields[key] = document.getElementById(key);
  });

  // Move button creation to the top of load
  const controlTd = document.getElementById('controls');
  const commands = ['SWITCH', 'PAUSE', 'RESUME', 'CANCEL', 'HOME'];
  commands.forEach(cmd => {
    const btn = document.createElement('button');
    btn.textContent = cmd;
    btn.dataset.command = cmd; // For delegation
    controlTd.appendChild(btn);
  });

  // Add event delegation to the controls container
  controlTd.addEventListener('click', handleControlClick);

  // Initial load and refresh
  updateStatus();
  setInterval(updateStatus, 5000);
};

// Run load when the DOM is ready
document.addEventListener('DOMContentLoaded', load);

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  text-align: center;
}

  

    
Temperature
    
Progress
    
Control
  
  

    

    
SET
    
NOW
    
File:
    

    
State: 
  
  

    
HOTEND
    
 °C
    
 °C
    
Done:
    
 %
    

  
  

    
BED
    
 °C
    
 °C
    
Layer: