Geräteüberwachung im Browser
Strapsenkönig
- javascript
Guten Tag zusammen.
Ich studiere Elektrotechnik und arbeite zur Zeit an mehreren Hardwareprojekten. Da ich dabei mit vielen verschiedenen Betriebssystemen in Kontakt komme, versuche ich Teile meiner GUI für den Benutzer meines Systems, in den Browser auszulagern. Allerdings habe ich nur sehr sparsame Kenntnisse zur Webentwicklung.
Grundsätzlich ist mir bekannt, dass ich für den Inhalt einer Webseite HTML brauche, für das Aussehen CSS und für dynamische Inhalte JavaScript. Dann hab ich gelesen das man mit Hilfe von AJAX Inhalte von Webseiten aktualisieren/verändern kann, ohne die gesamte Seite neu zu laden.
Was mir vollkommen schleierhaft ist, ist wie JavaScript Daten vom Server kriegt die von außen zugeführt werden.
Mein Problem: Ich habe eine unbegrenzte Menge von Geräten die Daten an einen zentralen Server senden. Der Server wandelt diese Daten in bestimmte Datensätze um, die wiederum unbegrenzt viele Daten von verschiedenen Eingangsgeräten enthalten können. Auch die Anzahl der Datensätze ist nicht begrenzt. Jedes Eingangsgerät sendet die Daten kontinuierlich, als unendlichen Datenstrom. Der Server speichert alle Werte die zu einem Datensatz gehören ab. Jetzt möchte ich gerne eine Webseite anlegen die die Daten die zuletzt am Server angekommen sind in irgendeiner Form anzeigt. Und die diese Werte auch kontinuierlich aktualisiert sobald neue Werte verfügbar sind.
Durch meine Recherchen weiß ich, dass ich hierzu JavaScript und AJAX verwenden sollte. Nach meinem aktuellen Kenntnisstand sendet man mit AJAX Anfragen an einen Server und dieser antwortet dann wenn Veränderungen eintreten mit neuen Werten.
Meine Frage ist nun: Wie bekomme ich die aktuellen Daten, von meinem selbst geschriebenen Serverprogramm, in die Antwort die vorher mit AJAX angefragt wurde?
Ich gehe davon aus das ich hier serverseitig noch etwas an Software schreiben muss. Außerdem möchte ich nicht das die beiden Anwendungen, also mein Datenserver und der Webserver, über die Festplatte kommunizieren, was ich bisher als den einfachsten Weg empfinden würde.
Ich würde mich sehr über einige inspirierende Antworten freuen und ein paar Tipps in die richtige Richtung.
Gerne gebe ich auch weitere Informationen falls ich wichtige Punkte vergessen haben sollte.
Hallo
Grundsätzlich ist mir bekannt, dass ich für den Inhalt einer Webseite HTML brauche, für das Aussehen CSS und für dynamische Inhalte JavaScript. Dann hab ich gelesen das man mit Hilfe von AJAX Inhalte von Webseiten aktualisieren/verändern kann, ohne die gesamte Seite neu zu laden.
Soweit richtig.
Was mir vollkommen schleierhaft ist, ist wie JavaScript Daten vom Server kriegt die von außen zugeführt werden.
JavaScript läuft im Kontext eines HTML-Dokuments im Browser des Nutzers. Wenn per Ajax Daten vom Server nachgeladen werden sollen, passiert folgendes.
Jedes Eingangsgerät sendet die Daten kontinuierlich, als unendlichen Datenstrom. Der Server speichert alle Werte die zu einem Datensatz gehören ab.
Auf diese abgespeicherten Daten musst du, nach Anfrage, mit einem serverseitigen Skript (z.B. in PHP, Perl, Python, Java) zugreifen.
Tschö, Auge
Tach!
- Ein JS-Event (z.B. ein Klick, eine Eingabe, das Scrollen zu einer Stelle der Seite) wird ausgelöst und ein Ajax-Request erfolgt.
Timer-Ereignisse gibt es auch und wären in dem Fall vermutlich angebracht (wenn man Polling als Methode der Wahl einsetzt).
dedlfix.
Hallo.
Timer-Ereignisse gibt es auch und wären in dem Fall vermutlich angebracht (wenn man Polling als Methode der Wahl einsetzt).
Diese können doch soweit ich weiß auch asynchron ausgelöst werden. Also ich sende einen Request und der Server antwortet erst wenn er neue Werte hat. Wenn ich den Repost kriege löse ich dann einen neuen Timer/Request aus.
Viele Grüße Strapsenkönig
Tach!
Timer-Ereignisse gibt es auch und wären in dem Fall vermutlich angebracht (wenn man Polling als Methode der Wahl einsetzt).
Diese können doch soweit ich weiß auch asynchron ausgelöst werden. Also ich sende einen Request und der Server antwortet erst wenn er neue Werte hat. Wenn ich den Repost kriege löse ich dann einen neuen Timer/Request aus.
Asynchron heißt, dass der Browser nicht blockiert. Synchron heißt, der Browser stellt eine Anfrage, wartet auf die Antwort, lässt in der Zeit keine weiteren Aktionen zu, und baut dann die Antwort in die Seite ein. Asynchron heißt, dass dei Anfrage im Hintergrund gesendet wird und irgendwann ein Callback aufgerufen wird, wenn die Antwort eingetrudelt ist. Das heißt nicht, dass er da bis in alle Ewigkeit wartet. Da gibt es auch Timeouts.
dedlfix.
Hallo
Timer-Ereignisse gibt es auch und wären in dem Fall vermutlich angebracht (wenn man Polling als Methode der Wahl einsetzt).
Diese können doch soweit ich weiß auch asynchron ausgelöst werden.
Also ich sende einen Request und der Server antwortet erst wenn er neue Werte hat.
Das hieße, dass das auf dem Server anfragende JS-Skript solange im Browser läuft, bis angefragte das Skript auf dem Server neue Werte hat und dann eine Antwort sendet. ich würde infrage stellen, dass man als Benutzer des Browsers das will.
Wenn ich den Repost kriege löse ich dann einen neuen Timer/Request aus.
Ich würde, wenn ich diesen Weg beschritte, alle X Sekunden einen Request auslösen, der, wenn es keine neuen Daten gibt, mit einer entsprechenden Info beantwortet wird. Gibt es neue Daten, würden stattdessen diese geliefert und verarbeitet.
Tschö, Auge
Tach!
Das hieße, dass das auf dem Server anfragende JS-Skript solange im Browser läuft, bis angefragte das Skript auf dem Server neue Werte hat und dann eine Antwort sendet. ich würde infrage stellen, dass man als Benutzer des Browsers das will.
Das geht schon. Das läuft, wenn man es richtig macht, auch im Hintergrund. Nennt sich Long Polling oder für uralte Browser auch Forever Frame. Man (der Javascript-Code) muss nur selbst, wenn der Timeout kommt, wieder eine neue Anfrage starten.
dedlfix.
Vielen Dank für die schnelle Antwort.
Das heißt ich kann im AJAX-Request das Script angeben das die Anfrage verarbeitet? Und ich kann das Script mit Java umsetzen?
Das grundlegende Problem, dass ich für mich sehe ist, dass ich auf dem Server einen Webserver laufen haben muss der die Webseite bereitstellt. Und ich nicht weiß wie ich die AJAX Anfrage auf ein Programm/Script außerhalb des Webservers umleite. Der Datenserver ist in Java geschrieben und könnte Objekte erzeugen, die die aktuellen Werte enthalten. Diese müsste ich dann nur noch per IPC in das Script kriegen das die AJAX Anfrage bearbeitet.
Kann das Script das die AJAX Anfrage bearbeitet eigenständig ausgeführt werden, oder wird bei jeder Anfrage das Script vom Server neu gestartet?
Viele Grüße Strapsenkönig
Hallo
Das heißt ich kann im AJAX-Request das Script angeben das die Anfrage verarbeitet? Und ich kann das Script mit Java umsetzen?
Wenn Java auf dem Webserver läuft, ja. Wenn nicht, dann nicht. Das per Ajax angefragte Skript muss mit HTTP(S) erreichbar sein, deshalb die Bedingung „Webserver“.
Das grundlegende Problem, dass ich für mich sehe ist, dass ich auf dem Server einen Webserver laufen haben muss der die Webseite bereitstellt. Und ich nicht weiß wie ich die AJAX Anfrage auf ein Programm/Script außerhalb des Webservers umleite.
Das ginge nur in dem Fall, wenn ein auf dem Webserver ereichbares Skript (siehe oben) ein anderes Programm starten und mit ihm kommunizieren kann. Ein Skript, das auf dem Webserver per Ajax angesprochen wird und dann auf die vorhandenen Daten über das Dateisystem zugreift, ist wohl einfacher umzusetzen.
Kann das Script das die AJAX Anfrage bearbeitet eigenständig ausgeführt werden, oder wird bei jeder Anfrage das Script vom Server neu gestartet?
Das Skript würde bei jedem Request neu gestartet.
Tschö, Auge
Tach!
Das heißt ich kann im AJAX-Request das Script angeben das die Anfrage verarbeitet? Und ich kann das Script mit Java umsetzen?
Es gibt auch in Java geschriebene Application-Server, die als Webserver oder in Zusammenarbeit mit einem Webserver arbeiten.
Das grundlegende Problem, dass ich für mich sehe ist, dass ich auf dem Server einen Webserver laufen haben muss der die Webseite bereitstellt. Und ich nicht weiß wie ich die AJAX Anfrage auf ein Programm/Script außerhalb des Webservers umleite.
Der einfachste Fall ist, dass der Webserver eine Datei ausliefert, die in seinem Dateisystem rumliegt. Dann kommen Scripts und Programme, die der Webserver auf einen Request hin aufruft und deren Ergebnis er zurückgibt. Üblich sind vor allem PHP und in der Windows-Welt auch .NET-Sprachen. Wenn man was mit Java macht, nimmt man nach meinen Bauchgefühl eher Application-Server à la Tomcat.
Der Datenserver ist in Java geschrieben und könnte Objekte erzeugen, die die aktuellen Werte enthalten. Diese müsste ich dann nur noch per IPC in das Script kriegen das die AJAX Anfrage bearbeitet.
Wenn das PHP ist, dann müsste PHP diese Abfragen erzeugen können. Kann es aber nicht von selbst, da brauchst du wohl eine Bibliothek oder musst das zu Fuß mit grundlegender Netzwerkkommunikation tun.
Kann das Script das die AJAX Anfrage bearbeitet eigenständig ausgeführt werden, oder wird bei jeder Anfrage das Script vom Server neu gestartet?
Request-Response lautet das Spielchen. Nur auf einen Request hin, wird in einem normalen Webserver irgendwas ausgelöst, die Antwort generiert und danach wird zu dem Vorgang alles vergessen und das Spiel muss von vorn beginnen. Hier setzen Application-Server ein, die auch zwischen den Requests Zustände (Daten) beibehalten können. Wenn man sich bei einfachem Webserver Daten merken muss, nimmt man einen Session-Mechanismus. Da wird der Client mittels eines Tokens (Cookie meist) identifiziert und ihn betreffende Daten zwischenzeitlich in einer Datei aufgehoben.
dedlfix.
Okay, also müsste ich zusehen das ich einen Webserver auf dem Server laufen habe der die Kommunikation mit den Clients übernimmt die die Webseite aufrufen.
Der Webserver müsste mit einem Application-Server, wie dem genannten Tomcat, zusammenarbeiten. In dem Application Server läuft das Script, das auf die AJAX Anfragen antwortet und eventuell könnte in ihm auch direkt der Datenerfassungsserver laufen(das hab ich noch nicht ganz raus).
Die Geräte, die die Daten erzeugen sind einzelne ARM-Cortex Mikrocontroller, das heißt auf der Seiten läuft die Kommunikation sowieso byteweise, es wäre also kein zu großes Problem die Kommunikation zwischen Application-Server/AJAX-Script und dem Datenserver von Hand zu machen, beispielsweise über Pipes oder Sockets.
Das Projekt dient hauptsächlich der eigenen Fortbildung, also geht es mir nicht primär darum den einfachsten Weg umzusetzen, sondern den sinnvollsten bzw. den skalierbarsten.
Viele Grüße Strapsenkönig
Tach!
Okay, also müsste ich zusehen das ich einen Webserver auf dem Server laufen habe der die Kommunikation mit den Clients übernimmt die die Webseite aufrufen.
Ja, oder dein Datenserver kann so konfiguriert/erweitert werden, dass er ein Webserver ist.
Der Webserver müsste mit einem Application-Server, wie dem genannten Tomcat, zusammenarbeiten. In dem Application Server läuft das Script, das auf die AJAX Anfragen antwortet und eventuell könnte in ihm auch direkt der Datenerfassungsserver laufen(das hab ich noch nicht ganz raus).
Application-Server ist nicht unbedingt ein Muss. Ich dachte nur, wenn du schon mit Java hantierst, wäre das eine Möglichkeit, weil der Tomcat ebenfalls Java verwendet.
Alternativ kannst du auch PHP oder irgendwas anderes im Webserver laufen haben, das als Mittler zwischen dem Browserrequest und dem Datenserver fungiert.
Die Geräte, die die Daten erzeugen sind einzelne ARM-Cortex Mikrocontroller, das heißt auf der Seiten läuft die Kommunikation sowieso byteweise, es wäre also kein zu großes Problem die Kommunikation zwischen Application-Server/AJAX-Script und dem Datenserver von Hand zu machen, beispielsweise über Pipes oder Sockets.
Das geht nicht so einfach, weil der Browser für das Web gestaltet wurde, in dem eben Request und Response angesagt sind. Damit byteweise Daten zu übertragen ist mit einem sehr großen Overhead verbunden. Was nimmt man denn dann? Ob es mit Ajax-Polling weniger "overheadig" abläuft, vermag ich grad nicht zu sagen. Da muss man erstmal schauen, ob das generell geht, dass man Bytes innerhalb eines Requests einzeln senden kann. Dann wäre wohl eher der Weg zu Websockets sinnvoll. Nach dem Verbindungsaufbau werden die ausgetauschten Messages nur noch mit geringem Overhead eingepackt.
dedlfix.
Tach!
Was mir vollkommen schleierhaft ist, ist wie JavaScript Daten vom Server kriegt die von außen zugeführt werden.
Gar nicht (so einfach). Das Web ist ausgelegt, dass die Clients einen Request stellen und der Server antwortet. Dass Server von sich aus Daten zu Clients senden, war eigentlich nicht vorgesehen. Aber es gibt dafür Lösungen. Zum einen ist das ein ständiges Pollen/Anfragen seitens der Clients und der Server antwortet mit Daten oder auch ohne. Das belastet natürlich Clients und Server, wenn ständig "Hast du was? - Ich schau mal. Nö." ausgetauscht wird. Dann wurden Websockets erfunden. Das ist eine bidirektionale Kommunikation, erfordert aber einen speziellen Server, der üblicherweise unabhängig vom Webserver betrieben wird.
Jetzt möchte ich gerne eine Webseite anlegen die die Daten die zuletzt am Server angekommen sind in irgendeiner Form anzeigt. Und die diese Werte auch kontinuierlich aktualisiert sobald neue Werte verfügbar sind.
Durch meine Recherchen weiß ich, dass ich hierzu JavaScript und AJAX verwenden sollte. Nach meinem aktuellen Kenntnisstand sendet man mit AJAX Anfragen an einen Server und dieser antwortet dann wenn Veränderungen eintreten mit neuen Werten.
Wie der Server antwortet, ist Sache des Servers. Da gibt es keine Regeln. Aber ja, wenn du ein solches System erstellst, ist das eine der Vorgehensweisen.
Wie bekomme ich die aktuellen Daten, von meinem selbst geschriebenen Serverprogramm, in die Antwort die vorher mit AJAX angefragt wurde?
DU musst die Frage erstmal allgemeiner stellen: Wie bekommst du die aktuellen Daten? Das musst du erstmal selbst herausfinden. Zum Beispiel hast du einen Timestamp/Zeitpunkt zum Beispiel aus der vorherigen Abfrage. Den Wert shickt dir der Client mit und du musst nun die Daten ab dem Zeitpunkt heraussuchen. Die in eine Antwort zu packen, ist ein anderes Thema.
Ich gehe davon aus das ich hier serverseitig noch etwas an Software schreiben muss. Außerdem möchte ich nicht das die beiden Anwendungen, also mein Datenserver und der Webserver, über die Festplatte kommunizieren, was ich bisher als den einfachsten Weg empfinden würde.
Wie du die Zwischenspeicherung in deiner Serverkomponente regelst, ist dir überlassen. Es gibt da den Hauptspeicher, selbst beschriebene Dateien oder Datenbanken.
Gerne gebe ich auch weitere Informationen falls ich wichtige Punkte vergessen haben sollte.
Naja, so völlig ohne Ahnung vom Programmieren und Programmieren für das Web ist das eine ziemliche Herausforderung. Du müsstest da erstmal die Gurndlagen lernen, anschließend mal rumschauen, was es für Tools und Frameworks gibt, die dir grundlegende Arbeiten abnehmen können und dir eine Struktur bereitstellen, an die du dich halten kannst.
dedlfix.
Mahlzeit.
DU musst die Frage erstmal allgemeiner stellen: Wie bekommst du die aktuellen Daten? Das musst du erstmal selbst herausfinden. Zum Beispiel hast du einen Timestamp/Zeitpunkt zum Beispiel aus der vorherigen Abfrage. Den Wert shickt dir der Client mit und du musst nun die Daten ab dem Zeitpunkt heraussuchen. Die in eine Antwort zu packen, ist ein anderes Thema.
An die Daten zu kommen ist aus meiner Sicht kein Problem, mir geht es hauptsächlich darum die zum Client zu kriegen, also eher wie ich die in die Antwort kriege.
Wie du die Zwischenspeicherung in deiner Serverkomponente regelst, ist dir überlassen. Es gibt da den Hauptspeicher, selbst beschriebene Dateien oder Datenbanken.
Das ist nicht das Problem, ich möchte nur lieber eine Kommunikation zwischen dem Datenserver und dem Script das die Anfrage beantwortet haben, die nicht über die Festplatte läuft.
Naja, so völlig ohne Ahnung vom Programmieren und Programmieren für das Web ist das eine ziemliche Herausforderung. Du müsstest da erstmal die Gurndlagen lernen, anschließend mal rumschauen, was es für Tools und Frameworks gibt, die dir grundlegende Arbeiten abnehmen können und dir eine Struktur bereitstellen, an die du dich halten kannst.
Programmieren an sich ist nicht das Problem, und auch die Webseite, an meine Ansprüche angepasst, hinzukriegen ist nicht das Problem. hauptsächlich ist es die Kommunikation zwischen Webserver und Datenserver.
Viele Grüße Strapsenkönig
Tach!
An die Daten zu kommen ist aus meiner Sicht kein Problem, mir geht es hauptsächlich darum die zum Client zu kriegen, also eher wie ich die in die Antwort kriege.
Du formatierst sie in einer bestimmten Form, die du im Browser mit Javascript wieder entziffern musst. Es gibt da bereits grundlegende Formate, die du mit deinen individuellen Daten bestücken kannst, beispielsweise JSON.
Das ist nicht das Problem, ich möchte nur lieber eine Kommunikation zwischen dem Datenserver und dem Script das die Anfrage beantwortet haben, die nicht über die Festplatte läuft.
Dann musst du eben immer den Datenserver befragen, wenn der Browser einen Request sendet. Da kommt es darauf an, welche Schnittstellen der Datenserver hat. Ich würde schauen, ob der JSON liefern kann, das ist am einfachsten im Browser auszuwerten.
dedlfix.
Moin,
Jetzt möchte ich gerne eine Webseite anlegen die die Daten die zuletzt am Server angekommen sind in irgendeiner Form anzeigt. Und die diese Werte auch kontinuierlich aktualisiert sobald neue Werte verfügbar sind.
Das klingt für mich, als wäre Node.js/socket.io etwas für dich. Denn hier "weiß" der Server wann neue Daten angekommen sind, was der Client (mit Ajax) nicht wissen kann.
Gruß
Jo
Hallo,
hier mal ein Link zu einem Posting, in dem ich zeige, wie ich die Ports von einem Raspberry PI steuere.
Zum Einsatz kommen
auf dem Clienten:
HTML
Javascript/Ajax
und auf dem Server:
PHP
C++
Gruß
Jürgen
Aloha ;)
hier
wo? :P bin ich blind oder fehlt der Link?
Grüße,
RIDER
Hallo,
hier
wo? :P bin ich blind oder fehlt der Link?
Gruß
Jürgen
PS: Warum meckert die Forensoftware nicht, wenn im Text das Wort Link ohne Link erscheint? :)
Hallo
hier
wo? :P bin ich blind oder fehlt der Link?
PS: Warum meckert die Forensoftware nicht, wenn im Text das Wort Link ohne Link erscheint? :)
Dieser Vorwurf ist aber ganz schön link! Jetzt mach' was draus! ;-)
Tschö, Auge
Hallo,
hier
wo? :P bin ich blind oder fehlt der Link?
Cool. Bitmuster ins Register schieben... sowas hab ich in grauer Vorzeit mal mit FlipFlops zusammengelötet. Hier noch eine Template-Lösung für Lauflicht mit JS.
Hi,
PS: Warum meckert die Forensoftware nicht, wenn im Text das Wort Link ohne Link erscheint? :)
Das ist "the missing link" ... ;-)
cu,
Andreas a/k/a MudGuard
Du brauchst am Webserver eine Scriptsprache, die eine Verbindung zur Datenbank herstellt. Eine entsprechende Abfrage liefert {feldname => inhalt} Hier ein Beispiel für eine solche Datenstruktur in Perl:
$array = [
{
datetime => '2016-12-02 00:00:00',
leistung => '1.2kW',
unit => 'Heizung'
},
{
datetime => '2016-12-02 01:01:01',
leistung => '2.7kW',
unit => 'Heizung'
},
# usw.
]
Der Clou an dieser Datenstruktur ist, dass diese von gängigen Template-Engines verstanden wird und sich bestens zur Darstellung tabellarischer Inhalte eignet. Nun, zur Übertragung in der AJAX-Response wir dieses Array serialisiert, und als Message-Body gesendet, z.B.:
$response = $json->encode($array);
In der Callbackfunktion, also da wo die Ajax-Response ankommt, wird obenstehendes Array wiederhergestellt, damit ein Template gerendert und anschließend ins DOM gepflanzt, z.B.:
xhr.onload = function(){
if(this.status != 200) return alert(this.response); // Fehlerbehandlung
var array = JSON.parse( this.response );
var table = Mustache.render(template, {slice: array});
$('#out').html( table ); // ab ins DOM
};
Das Template hat die Feldnamen als Platzhalter, {{datetime}}, {{leistung}}, {{unit}}, also dieselben Namen / Aliase welche auch die Abfrage liefert. Also guckst Du Mustache auf Git. /pl
Du brauchst am Webserver eine Scriptsprache, die eine Verbindung zur Datenbank herstellt. Eine entsprechende Abfrage liefert {feldname => inhalt} Hier ein Beispiel für eine solche Datenstruktur in Perl:
$array = [ { datetime => '2016-12-02 00:00:00', leistung => '1.2kW', unit => 'Heizung' }, { datetime => '2016-12-02 01:01:01', leistung => '2.7kW', unit => 'Heizung' }, # usw. ]
Der Clou an dieser Datenstruktur ist, dass diese von gängigen Template-Engines verstanden wird und sich bestens zur Darstellung tabellarischer Inhalte eignet.
Falls außer den Tabellendaten weitere Daten (Schlüssel => Wert) gesendet werden sollen, werden diese einfach an das Array gehängt, z.B.:
unshift @$array, {
title => 'Zeit-Leistungskurve Heizung',
cnt => '128 Schaltvorgänge'
};
in der Callbackfunktion wieder extrahiert:
var param = slice.shift();
und schließlich ohne Umschweife ins Template gerendert (SchlüsselName == PlatzhalterName, z.B. für die Überschrift und Titel der Seite). Eine solche Schablonenarbeit erfordert nur noch minimale Programmierkenntnisse -- das war ja auch eines Deiner Anliegen.
Beispiel fürs Polling alle 5 Sekunden, das Bild steht sauber, da flackert nichts.pl
PS/Edit: Poll-Intervall hochgesetzt.
Hallo und guten Morgen,
Grundsätzlich ist mir bekannt, dass ich für den Inhalt einer Webseite HTML brauche, für das Aussehen CSS und für dynamische Inhalte JavaScript. Dann hab ich gelesen das man mit Hilfe von AJAX Inhalte von Webseiten aktualisieren/verändern kann, ohne die gesamte Seite neu zu laden.
Und als neues Element im Mix gibt es noch Websockets.
So ganz rund läuft das in den APIs der verschiedenen Programmiersprachen wohl noch nicht, aber man sollte sie bei der Planung von Webapplikationen nicht vergessen.
Grüße
TS