Viele Jahre ist es her, als Ich dieses Stück Software programmiert hatte: Eine Web-Anwendung zum Fernsteuern von Motoren einer Biogasanlage. Im März 2012 hatte Ich die Dokumentation dazu im internen Wiki angelegt und März 2015 das ganze auf unseren Git-Server gepackt. Das coole ist, dass die Anwendung bis heute fehlerfrei auf einem Debian-Server läuft, der direkt vor Ort beim Bauernhof betrieben wird.

Erstaunlicherweise hatte weder DynDNS, Domain, Debian noch noVNC fehler verursacht. Dennoch habe Ich vor einigen Tagen den Code mal wieder angeschaut, die Javascript-Bibliotheken aktualisiert und den Programmcode grundlegend aufgeräumt. Das ganze Projekt ist jetzt von 14 MB auf 300 KB geschrumpft und auch besser für moderne Browser angepasst.

Technisch handelt es sich bei der Software um eine Web-VNC Lösung namens noVNC. Damit kann man direkt im Browser auf die Desktops von anderen Rechnern zugreifen, die die Vernwartung via. VNC aktiviert haben. Ermöglicht wird dies, ohne Verwendung von Browser-Plugins, mit Hilfe von Websockets und der HTML5 Render-Engine Canvas. Auf dem Backend muss dafür noch zusätzlich ein Skript laufen, dass die Websockets-Anfragen vom Browser  an die verschiedenen VNC-Server im internen Netzwerk weiterleitet und quasi übersetzt. Meine Anwendung kombiniert dies nun, zusammen mit JQuery und Bootstrap zu einem benutzerfreundlichen Interface für Desktop- und Mobiltelefon, von dem aus man sich zu allen unterschiedlichen Desktops mit einem klick verbinden kann.

Damit hat man sozusagen ein Kontrollzentrum bzw. Anlaufstelle für alle unterschiedlichen Biogasanlagen und muss nicht auf unterschiedliche Hersteller-Apps zurückgreifen.

Die Fernwartungssoftware auf einem Desktop-Browse

Auf dem folgenden Demo-Video sieht man dieselbe Seite in Benutzung auf einem Smartphone (Name der Seite unkenntlich gemacht). Zur Erklärung sei noch erwähnt, dass man mit dem Klick auf das Cursor-Symbol oben rechts wechseln kann zwischen “Bild/Ansicht verschieben” und “Klicken”.

Installation

Hier möchte Ich nur die Installation der Web-Anwendung und der dazugehörigen Skripte beschreiben. Das Einrichten und Absichern eines Server-Betriebssystemes wird vorausgesetzt. Die beispielhafte Einrichtung wird hier für das Betriebssystem Debian beschrieben (ab Version 8.0), das ganze sollte aber auch unter anderen Linux-System funktionieren und ähnlich ablaufen.
Als erstes werden folgende Anwendungen installiert:

apt-get install nginx websockify

Dem Netzwerk-Adapter eine feste IP-Adresse vergeben

auto eth0
iface eth0 inet static
        address 192.168.1.2
        netmask 255.255.255.0
        gateway 192.168.1.254

Eine Beispiel-Konfiguration für den Nginx-Webserver anlegen

# redirect to https
server {
	listen 80;
	listen [::]:80;
	server_name status.example.com;
	return 301 https://$host$request_uri;
}

server {
	listen 443 ssl;
	listen [::]:443 ssl;
	ssl_certificate /etc/letsencrypt/live/status.example.com/fullchain.pem;
	ssl_certificate_key /etc/letsencrypt/live/status.example.com/privkey.pem;
	ssl_trusted_certificate /etc/letsencrypt/live/status.example.com/chain.pem;
	ssl_session_timeout 1d;
	ssl_session_cache shared:SSL:50m;
	ssl_session_tickets off;
	ssl_protocols TLSv1.2;
	ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256';
	ssl_prefer_server_ciphers on;
	add_header Strict-Transport-Security max-age=15768000;
	ssl_stapling on;
	ssl_stapling_verify on;
	server_name status.example.com;

	root /var/www;

	location / {
		auth_basic            "Restricted";
		auth_basic_user_file  htpasswd;
		try_files $uri $uri/ =404;
	}

	location ^~ /.well-known {
		allow all;
		#alias /var/lib/letsencrypt/.well-known/;
		default_type "text/plain";
		try_files $uri =404;
	}
}

Diese Beispiel-Konfiguration ist an die SSL-Installation von Let’s Encrypt angepasst. Anleitungen hierfür sind auf der Projektwebseite zu finden. Die Startseite der Anwendung ist mit einem Http-Basic-Auth gesichert. Benutzername und Passwort werden mit folgenden Befehl definiert:

sudo htpasswd -c /etc/nginx/htpasswd status meinpasswort

Der Webserver kann gestartet und aktiviert werden mit:

sudo ln -s /etc/nginx/sites-available/status.example.com /etc/nginx/sites-enabled/
sudo systemctl enable nginx
sudo systemctl restart nginx

Web-Anwendung herunterladen

cd /var/www
git clone https://git.project-insanity.org/onny/web-status.git

Wir legen in der Konfigurationsdatei der Web-Anwendung eine VNC-Verbindung an, in Form der Angaben von Host, Port und Passwort des websocket-Relay-Server:

{
    "connections": {
      "Motor 1": {
        "Host" : "status.example.com",
        "Port" : "6080",
        "Password" : "",
        "Encryption" : true
      }
    }
}

Eine Konfigurationsdatei für den Websockify-Relay-Server wird angelegt

sudo mkdir /etc/websockify
Host="192.168.1.23"
Port="5900"
ListeningPort="6080"
CertPath="/etc/letsencrypt/live/status.example.com/cert.pem"
KeyPath="/etc/letsencrypt/live/status.example.com/privkey.pem"

Mit folgenden Befehlen richten wir ein Systemd-Dienst ein, der eine Instanz von Websockify mit den passenden Parametern aus motor1.conf startet:

sudo cp /var/www/utils/websockify@.service /usr/lib/systemd/system/
sudo systemctl start websockify@motor1
sudo systemctl enable websockify@motor1

Websockify verbindet sich nun mit dem VNC-Server auf 192.168.1.23 und dem Port 5900 und öffnet einen neuen Websocket-kompatiblen Port auf 6080, auf die sich letztendlich die Web-Anwendung verbindet.

Je nach Bedarf können nun weitere VNC-Verbindungen hinzugefügt werden durch anlegen und starten neuer Websocket-Server und durch die Anpassung der config.json der Web-Anwendung.

💬 Are you interested in our work or have some questions? Join us in our public Signal chat pi crew 👋
🪙 If you like our work or want to supprot us, you can donate MobileCoins to our address.