Сценарий PHP используется локально, с HTML-интерфейсом 5 через WebSocket

Чтобы дать нативному скрипту HTML-интерфейс 5, мы используем Node.js и WebSocket, чтобы лучше использовать данные скрипта в интерфейсе.

В предыдущем исследовании мы видели, как локально использовать HTML-интерфейс со скриптом PHP, что благодаря серверу Node.js. Однако метод слишком прост, так как результаты сценария отображаются в браузере как есть. Это может быть удобно некоторым приложениям, но если нужен более интерактивный интерфейс, то нужно иметь возможность управлять данными, отправленными скриптом, когда они поступают через HTML-страницу.
Для этого мы используем два модуля:

Сеть

Этот модуль встроен по умолчанию в Node.js и позволяет подключаться сокетами к программе в файловой системе, создавая TCP-сервер. Можно, конечно, подключиться к удаленному скрипту, но это не в наших словах.
Сервер запускает PHP-скрипт с указанными аргументами. Это может быть скрипт на любом языке программирования при условии, что он поддерживает TCP-соединения. Скрипт выполняет обработку, которой он посвящен, и отправляет на сервер результат с функцией PHP socket_write или эквивалент на другом языке.
Для использования TCP с PHP в Windows необходимо включить две строки в php.ini (удалить точку с запятой):

extension_dir="ext"
extension=php_sockets.dll

Socket.io

Этот модуль должен быть добавлен с npm, если его еще нет. Используется для обмена информацией между HTML и Node.js. Интерфейс отправляет аргументы в интерфейсе и имя сценария на сервер через WebSocket.
Когда сервер затем получает результаты сценария, он всегда отправляет их в интерфейс через WebSocket.

Таким образом, схема работы выглядит следующим образом:

PHP et HTML par WebSocket et Node.js

Сценарий PHP

Поскольку данные из интерфейса переходят в скрипт в качестве аргумента, менять нечего, если он предназначен для использования в командной строке (это собственный скрипт).

Для отправки результатов, которые раньше просто отображались в консоли, заменяется:

echo $data;

функцией :

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>.");

Функция создает локальное соединение TCP на порту 1001, отправляет данные и закрывает соединение.

Интерфейс HTML

Создается экземпляр WebSocket с socket.io компонентом на HTML-странице:

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

На демонстрационной странице пользователя просят выбрать цвет.

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

При нажатии кнопки информация отправляется в Узел с помощью этой функции:

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

Она ждет ответа от сервера:

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

Она обрабатывает содержимое, отправленное скриптом PHP. Она добавляет <br> и ответ в область интерфейса:

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

Таким образом, HTML-интерфейс использует данные, предоставляемые собственной программой по мере необходимости.

Ограничения

Если нужно, чтобы интерфейс HTML мог загружать CSS-файл или изображения, необходимо добавить возможность загрузки этих файлов в JavaScript-скрипт сервера. Это будет видно в одной из последующих статей. На данный момент CSS-код должен быть встроен в страницу.

Сервер JavaScript

Создается экземпляр WebSocket для обмена данными с HTML-страницей:

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

И экземпляр Net для получения данных собственного сценария:

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

Когда сервер получает данные о порте 1000 из HTML-интерфейса, он запускает локальный скрипт с этими данными в настройках.

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

Когда сервер получает данные из собственного сценария на порт 1001, он повторно передает их на порт 1000 в HTML-интерфейс:

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

Для полного источника загрузите демонстрацию...

Загрузка PHP, JavaScript и HTML-файлов

Файлы архива, используемые в этой демонстрации:

php-socket.html: графический пользовательский интерфейс.
php-socket.js: JavaScript скрипт сервера.
php-socket.php: простой родной сценарий в демонстрационном PHP.

Чтобы попробовать демонстрацию, запустите сервер:

node php-socket.js

Затем откройте браузер и введите в строке URL:

localhost:1000/php-socket.php

Затем сервер отображает в браузере интерфейс php-socket.html. Выберите цвет и нажмите кнопку, чтобы отправить данные в PHP-скрипт.

Эти элементы должны быть достаточной отправной точкой для создания сложного локального приложения с HTML-интерфейсом 5 и CSS в PHP, Python, Ruby или любом другом языке, работающем в командной строке. Такое приложение будет универсально носимым и даже должно изначально работать на мобильных.

Практическое применение этого процесса см. в файле Link Checker с графическим пользовательским интерфейсом.