Allumer un ordinateur à distance d’un simple clic? C’est possible avec WOL-sv.

Wake on LAN

Le “Wake on LAN” (abrégé en “WOL”) est une capacité proposée par les cartes réseaux et permettant de démarrer un ordinateur (ou n’importe quel matériel compatible) à distance.

Dans l’article “Wake on LAN: version web moderne (jQuery)”, j’expose le fonctionnement du WOL.

Présentation rapide de WOL-sv

WOL-sv est une application Web prévue pour fonctionner avec Apache TomEE v8. Elle propose une liste d’ordinateur réveillable (sans tenir compte de leur état réel) et un filtre pour trouver facilement un ordinateur.

Screenshot

Préparation du projet

Comme il s’agit d’un projet Svelte, il faut donc installer Svelte via NPM puis préparer le repository git:

    
 1mkdir wol-svelte
 2npx degit sveltejs/template wol-svelte/
 3cd wol-svelte/
 4npm install
 5npm install --save svelte-routing
 6git init
 7git add .
 8git commit -m "Ajout de svelte"
 9git remote add wolsv ssh://user@server:22/<*folder*>/wol-svelte
10git push wolsv master

Configuration

Pour configurer WOL-sv, tout se passe dans le fichier configuration.js. Il faut indiquer la liste des machines (adresse mac, nom à afficher).

Détail de la communication

Tout est expliqué dans l’article “Wake on LAN: version web moderne (jQuery)”.

Comparaison avec WOL-jquery

Les deux projets proposent la même fonctionnalité et la même interface (mais en couleurs inversées) et il donc facile et intéressant de comparer les deux bases de code.

Code HTML

Dans la version jQuery, la quasi intégralité tient dans une page (index.html). Pour la version Svelte, le même code est explosé en 5 composants (mais on aurait pu faire en seul). Cependant, pour jQuery, on trouve du code HTML (génération des boutons par exemple) dans le javascript.

Sur ce point, la version Svelte est plus propre.

Code Javascript

Comme la version Svelte est centrée autour du concept de composant, le code javascript est assez différent. Il est impossible d’avoir un classe qui gère l’interface et une autre qui gère la communication avec le serveur. Dans la version Svelte, chaque composant est responsable des interactions avec l’interface et le serveur donc le code paraît moins organisé (c’est simplement dû au fait que l’organisation des responsabilités est différent).

Sur ce point, les deux versions se valent.

Code Java

Ici, pas de différence majeure: on constate seulement la suppression du nom DNS non exploitée.

Autres points

Fichier pom.xml

La version Svelte voit son fichier pom.xml modifié pour compiler les ressources Svelte lors de la compilation du projet. Pour cela, on modifie la configuration du plugin exec-maven-plugin

    
 1<plugin>
 2	<groupId>org.codehaus.mojo</groupId>
 3	<artifactId>exec-maven-plugin</artifactId>
 4	<version>3.0.0</version>
 5	<executions>
 6		<execution>
 7			<goals>
 8				<goal>exec</goal>
 9			</goals>
10		</execution>
11	</executions>
12</plugin>

Version jQuery

    
 1<plugin>
 2	<groupId>org.codehaus.mojo</groupId>
 3	<artifactId>exec-maven-plugin</artifactId>
 4	<version>3.0.0</version>
 5	<executions>
 6		<execution>
 7			<goals>
 8				<goal>exec</goal>
 9			</goals>
10		</execution>
11	</executions>
12	<configuration>
13		<executable>src/main/resources/svelte.sh</executable>
14		<environmentVariables>
15			<LANG>en_US</LANG>
16		</environmentVariables>
17	</configuration>
18</plugin>

Version Svelte

Autre différence: la version Svelte utilise le package UrlRewrite

    
1<dependency>
2	<groupId>org.tuckey</groupId>
3	<artifactId>urlrewritefilter</artifactId>
4	<version>4.0.4</version>
5</dependency>

Contenu du script src/main/resources/svelte.sh

Ce script réalise deux tâches:

  • compiler le code Svelte
  • copier les ressources statiques
    
 1#!/bin/bash
 2
 3set -e
 4
 5echo "GTG# compiling svelte"
 6cd /<*folder*>/wol-svelte
 7npm run build
 8
 9echo "GTG# Copying resources"
10rm -f /<*folder*>/wol-svelte/src/WebContent/project/final/images/*
11cp /<*folder*>/wol-svelte/src/WebContent/project/img/* /<*folder*>/wol-svelte/src/WebContent/project/final/images/

Fichier web.xml

Ici on doit configurer une partie du routage “SPA” (voir l’article “Svelte, Apache TomEE et routage SPA: cas des ressources statiques”).

    
 1<filter>
 2    <filter-name>UrlRewriteFilter</filter-name>
 3    <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
 4</filter>
 5<filter-mapping>
 6    <filter-name>UrlRewriteFilter</filter-name>
 7    <url-pattern>/spa/*</url-pattern>
 8    <dispatcher>REQUEST</dispatcher>
 9    <dispatcher>FORWARD</dispatcher>
10    <filter-name>UrlRewriteFilter</filter-name>
11    <url-pattern>/img/*</url-pattern>
12    <dispatcher>REQUEST</dispatcher>
13    <dispatcher>FORWARD</dispatcher>
14</filter-mapping>

En complément au fichier web.xml, il faut ajouter le fichier de configuration pour UrlRewrite: /WEB-INF/urlrewrite.xml

Fichier urlrewrite.xml

    
 1<urlrewrite>
 2	<rule>
 3		<note>
 4			Transfer all urls starting with /spa/ to index page so client can route itselfs correctly
 5		</note>
 6		<from>/spa/(.*)</from>
 7		<to type="redirect">%{context-path}/index.html</to>
 8	</rule>
 9	<rule>
10		<note>
11			Transfer all urls starting with /img/ to folder /project/final/images
12		</note>
13		<from>/img/(.*)</from>
14		<to type="redirect">%{context-path}/project/final/images/$1</to>
15	</rule>
16</urlrewrite>

Ici, vu que l’application est minimaliste, tous les appels à une url de la forme “/wolsv/spa/…” sont redirigés vers la page principale /wolsv/index.html.

Taille finale

Le fichier applicatif War pèse

  • 9.2 Mo pour la version jQuery
  • 9.5 Mo pour la version Svelte La différence est somme toute raisonnable.

Le dossier du projet, lui, pèse:

  • 46 Mo pour la version jQuery
  • 144 Mo pour la version Svelte. La différence s’explique par 3 lettres: N. P. M.

Sur ce point, gros avantage à la version jQuery.

Conclusion

Pour moi, les deux versions jQuery et Svelte se valent mais la version Svelte propose framework plus moderne.

Code source

Comme annoncé dans l’article Fuyez GitHub, le code est disponible sur mon CodeBerg: https://codeberg.org/GoboTheGeek/WOL-svelte