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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
mkdir wol-svelte
npx degit sveltejs/template wol-svelte/
cd wol-svelte/
npm install
npm install --save svelte-routing
git init
git add .
git commit -m "Ajout de svelte"
git remote add wolsv ssh://user@server:22/<*folder*>/wol-svelte
git 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
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<plugin>
	<groupId>org.codehaus.mojo</groupId>
	<artifactId>exec-maven-plugin</artifactId>
	<version>3.0.0</version>
	<executions>
		<execution>
			<goals>
				<goal>exec</goal>
			</goals>
		</execution>
	</executions>
</plugin>

Version jQuery

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

Version Svelte

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

1
2
3
4
5
<dependency>
	<groupId>org.tuckey</groupId>
	<artifactId>urlrewritefilter</artifactId>
	<version>4.0.4</version>
</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
 2
 3
 4
 5
 6
 7
 8
 9
10
11
#!/bin/bash

set -e

echo "GTG# compiling svelte"
cd /<*folder*>/wol-svelte
npm run build

echo "GTG# Copying resources"
rm -f /<*folder*>/wol-svelte/src/WebContent/project/final/images/*
cp /<*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
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<filter>
    <filter-name>UrlRewriteFilter</filter-name>
    <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>UrlRewriteFilter</filter-name>
    <url-pattern>/spa/*</url-pattern>
    <dispatcher>REQUEST</dispatcher>
    <dispatcher>FORWARD</dispatcher>
    <filter-name>UrlRewriteFilter</filter-name>
    <url-pattern>/img/*</url-pattern>
    <dispatcher>REQUEST</dispatcher>
    <dispatcher>FORWARD</dispatcher>
</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
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<urlrewrite>
	<rule>
		<note>
			Transfer all urls starting with /spa/ to index page so client can route itselfs correctly
		</note>
		<from>/spa/(.*)</from>
		<to type="redirect">%{context-path}/index.html</to>
	</rule>
	<rule>
		<note>
			Transfer all urls starting with /img/ to folder /project/final/images
		</note>
		<from>/img/(.*)</from>
		<to type="redirect">%{context-path}/project/final/images/$1</to>
	</rule>
</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