PHP script is used locally, with HTML interface 5 via WebSocket

To give the native script an HTML interface of 5, we use Node.js and WebSocket to better use the script data in the interface.

In a previous study, we saw how to locally use the HTML interface with the PHP script, thanks to the Node.js server. However, the method is too simple because the script results are displayed in the browser as is. This may be convenient for some applications, but if you need a more interactive interface, you need to be able to manage the data sent by the script when it comes through an HTML page.
To do this, we use two modules:

Network

This module is built into Node.js by default and allows sockets to connect to a program in the file system, creating a TCP server. You can, of course, connect to the remote script, but this is not in our words.
The server runs a PHP script with the specified arguments. This can be a script in any programming language, provided that it supports TCP connections. The script performs the processing it is dedicated to and sends the result to the server with the PHP socket_write function or equivalent in another language.
To use TCP with PHP in Windows, you need to include two lines in php.ini (remove semicolons):

extension_dir="ext"
extension=php_sockets.dll

Socket.io

This module must be added with npm if it is not already present. Used to exchange information between HTML and Node.js. The interface sends arguments in the interface and the script name to the server via WebSocket.
When the server then receives the script results, it always sends them to the interface via WebSocket.

Thus, the scheme of work is as follows:

PHP et HTML par WebSocket et Node.js

PHP script

Since the data from the interface goes to the script as an argument, there is nothing to change if it is intended for use on the command line (this is its own script).

To send results that were previously simply displayed in the console, it replaces:

echo $data;

function:

function echoSocket($data)
{
  $socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
  if($socket==false) die("Not created");
  socket_connect($socket, '127.0.0.1', '1001')
    or die(socket_strerror(socket_last_error()));
  socket_write($socket, $data);
  socket_close($socket);
}

echoSocket("You choosen: <b><span style='color:$data'>$data</span></b>.");

The function creates a local TCP connection on port 1001, sends data, and closes the connection.

HTML interface

A WebSocket instance is created with the socket.io component in the HTML page:

<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect();
...

On the demo page, the user is asked to select a color. 

<select id="color">...</select>
<input type="button" value="Send color" onClick="callserver()">

When you click the button, the information is sent to the Node using this function:

function callserver()
{
  var mycolor = document.getElementById("color").value;
  socket.emit('interface', mycolor);
}

She is waiting for a response from the server:

socket.on('notification', function(x) { notification(x); });

It processes the content sent by the PHP script. It adds <br> and a response to the interface area:

function notification(content)
{
  var x=document.getElementById("storage");
  x.innerHTML += content + '<br>';
}

Thus, the HTML interface uses data provided by its own program as needed.

Restrictions

If you want the HTML interface to be able to load a CSS file or images, you need to add the ability to load these files into the server's JavaScript script. This will be seen in a subsequent article. For now, the CSS must be embedded in the page.

JavaScript Server

A WebSocket is instantiated to communicate with the HTML page:

var websocket = require("socket.io");
var app = http.createServer(function(r, s){ handler(r,s); });
app.listen(1000);
var listener = websocket.listen(app);

And the Net instance to get its own script data:

var net = net = require('net');
var nativeserver = net.createServer(function(native) { nativeComm(native);});
nativeserver.listen(1001, '127.0.0.1');

When the server receives data about port 1000 from the HTML interface, it runs a local script with this data in the settings .

websocket.on('interface', function (data) {
  fs.exists(localpath, function(result) { runScript(result, localpath, data)});
});

When the server receives data from its own script on port 1001, it retransmits it on port 1000 to the HTML interface:

native.on('data', function(data) {
  listener.sockets.emit('notification', data);
});

For a full source, download the demo...

Loading PHP, JavaScript and HTML files

Archive files used in this demonstration:

To try the demo, start the server:

node php-socket.js

Then open a browser and enter the URL in the line:

localhost:1000/php-socket.php

The server then displays the php-socket.html interface in the browser. Select a color and click the button to send the data to a PHP script .

These elements should be a sufficient starting point for creating a complex local application with HTML interface 5 and CSS in PHP, Python, Ruby, or any other language running on the command line. Such an application will be universally wearable and should even work on mobile initially.

For a practical application of this process, see the Link Checker file with a graphical user interface.