lundi 14 septembre 2015

Pour donner à un script natif une interface HTML 5, nous utilisons Node.js et WebSocket afin d'utiliser au mieux les données du script dans l'interface.



Script PHP utilisé localement, avec interface HTML 5 grâce à WebSocket

Pour donner à un script natif une interface HTML 5, nous utilisons Node.js et WebSocket afin d'utiliser au mieux les données du script dans l'interface.

Dans une précédente étude nous avons vu comme utiliser localement une interface HTML avec un script PHP, cela grâce à un serveur Node.js. La méthode cependant est trop simple puisque les résultats du script sont affichés tels quels dans le navigateur. Cela peut convenir à certaines applications, mais si l'on veut une interface plus interactive, il faut que l'on puisse gérer les données envoyées par le script quand elles sont reçues par la page HTML.
Pour ce faire nous utilisons deux modules:

Net

Ce module est intégré par défaut dans Node.js et il permet de se connecter par sockets à un programme dans le système de fichier en créant un serveur TCP. On peut bien sûr se connecter à un script distant, mais c'est hors de notre propos.
Le serveur lance le script PHP avec les arguments fournis. Ce peut être en fait un script dans n'importe quel langage de programmation pourvu qu'il supporte les connections TCP. Le script effectue le traitement auquel il est dédié et envoie au serveur le résultat avec la fonction PHP socket_write, ou équivalent dans un autre langage.
Pour utiliser TCP avec PHP sous Windows, il faut activer deux lignes dans php.ini (supprimer le point-virgule):

extension_dir="ext"
extension=php_sockets.dll
Socket.io

Ce module doit être ajouté avec npm, s'il ne l'est pas déjà. On l'utilise pour échanger des informations entre l'interface HTML et Node.js. L'interface envoie les arguments donnés dans l'interface et le nom du script au serveur, cela par WebSocket.
Quand le serveur reçoit ensuite les résultats du script, il les envoie à l'interface toujours par WebSocket.

Le diagramme de fonctionnement est donc le suivant:

PHP et HTML par WebSocket et Node.js

Le script PHP

Les données provenant de l'interface étant passées au script comme argument, il n'y a rien à changer s'il est conçu pour être utilisé en ligne de commande (c'est le propre d'un script).

Pour l'envoi des résultats, qui étaient auparavant simplement affichés dans la console on remplace:

echo $data;
par une fonction:

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: $data.");
La fonction crée une connection TCP locale sur le port 1001, envoie les données et referme la connection.

L'interface HTML

On crée une instance de WebSocket avec le module socket.io dans la page HTML: