Anzeige:

Echtzeit Daten im Browser

mit Node.JS und Socket.IO

Der übliche Weg beim Abruf einer Internet-Seite ist ja der, dass eine Seite vom Browser beim Server angefordert wird, der Server diese Seite ausliefert und der Browser diese dann darsetellt. Nachdem die Seite abgerufen wurde, gibt es keine Verbindung mehr vom Server zum Browser. Um Aktualisierungen zu erhalten, muss die Seite erneut geladen werden.

In den letzten Jahren hat sich das Internet jedoch stark gewandelt Viele Internetseiten können auch dynamische Inhalte darstellen, d.H. die angezeigten Daten können aktualisiert werden, wenn auf dem Server neue Daten bereitstehen.

Hierzu gibt es verschiedene technische Möglichkeiten. Hier soll die Umsetzung mit Node.JS sowie der Socket.io Bibliothek gezeigt werden.

Node.JS ist eine in den letzten Jahren stark gewachsene Umgebung für auf einem Server laufende JavaScript Programme und eignet sich hervorragend für moderne Internet-Anwendungen mit dynamischen Inhalten. Seine besonere Stärke bekommt es im Zusammenspiel mit unzähligen Modulen, die aus dem Internet mit dem integrierten Paketmanager npm installiert werden können.

Eines dieser Pakete ist die socket.io Bibliothek, eine der wohl am einfachsten einzusetzenden Möglichkeiten zur bidirektionalen Kommunikation zwischen Server und Browser.

In dem hier gezeigten kleinen Projekt wird gezeigt, wie man sich ändernde Dateien auf einem Server live im Browser darstellen kann. Dies ist nützlich, um zB /var/log/messages immer im Blick zu haben, ohne eine Terminalverbindung zum Server zu benötigen.

Der Code auf dem Server ist dank Node.JS überaus einfach:

logview.js:

var readline = require('readline');
const io = require('socket.io')(3002);
        
var rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
terminal: false
});
        
rl.on('line', function(line){
let data= {line:line}
io.emit('line',data);
});

Die Funktion ist folgende: Mit dem Modul readline werden alle Eingaben von stdin zeilenweise registriert. Sobald eine Zeile eingegeben wurde, wird das 'line' Event vom Readline-Objekt rl ausgelöst und die hierfür hinterlegte Funktion ausgeführt, die lediglich mit der Socket.io Bibliothek die Zeile an alle verbundenen Endpunkte verschickt. (mit dem io.emit.... Statement);

wenn man nun dieses kleine Programm mit der folgenden Befehlsfolge startet

    tail -f /var/log/messages | node logview.js

geschieht folgendes: Durch den tail -f Befehl werden permanent alle an die LogDatei angefügten Zeilen auf stdout geschrieben. Durch das Pipe Symbol | werden diese jedoch nicht auf der Konsole ausgegeben, sondern landen als Eingabe in unserem logview.js Programm, welches diese postwendend weiterschickt. Voila: Realtime-Versand von Log-Files.

Auf der Browser-Seite gestaltet sich der Empfang der Daten dann ähnlich einfach:

(die Socket.IO Client Bibliothek
 muss natürlich vorher geladen 
 werden,und die IP Adresse angepasst werden )


var socket = io('http://192.168.1.50:3002');

socket.on("line",function(data) { console.log(data.line);});

Dieses kleine Fragment gibt dann die vom Server gesendeten Zeilen in der Browser-Konsole aus. Mehr ist im Prinzip nicht nötig, um in Echtzeit Logfiles von einem Server mit einem Browser anzuzeigen. Um die Sache etwas komfortabler zu machen, habe ich eine kleine Angular App erstellt, welche die Zeilen in einer Liste ausgibt, Quellcode ist hier zu finden

Natürlich muss im Produktiv-Einsatz noch dafür gesorgt werden, dass nur autorisierte Benutzer auf den Socket zugreifen können, aber dies ist nicht Gegenstand dieses Artikels.

Als Fazit bleibt zu sagen, dass sich mit Node.JS und socket.io wirklich einfach Internetseiten so gestalten lassen, dass diese dynamische Inhalte vom server anzeigen können. Der umgekehrte Weg, Daten vom Browser zum Server zu schicken funktioniert mit der Socket.io Bibliothek natürlich genauso einfach, wird für den hier gezeigten Anwendungsfall jedoch nicht benötigt.

Anzeige: