Architekturfrage: Programm als Internetseite

[Panthrax]

Hallo.

Gesucht sind Möglichkeiten, die Oberfläche eines Programms als Internetseite darzustellen.

Der Soll-Zustand besteht hieraus:

• statische Inhalte darstellen
• Echtzeitwerte darstellen
• Formulare absenden, Antworten empfangen
• benötigte Steuerelemente: Tasten, Text

Die Ist-Zustand:

• Das Programm liegt bereits in einer Dienst-Architektur vor.
• Dienstgeber und -nehmer kommunizieren in einem proprietären, XML-basierten Protokoll auf einer TCP-IP-Verbindung.
• Der Dienstgeber enthält sämtliche Funktion und Zustände des Systems, und verwaltet für jede aufgebaute Verbindung eine Sitzung, in der er auch unaufgefordert Daten (Messwerte) an die Dienstnehmer sendet.
• Der Dienstnehmer ist nur die Schnittstelle zum Menschen. Er „übersetzt“ zwischen dem Menschen an der Oberfläche und dem Dienstgeber an der TCP-IP-Verbindung. (Darstellung, Aufnehmen von Eingaben, Auslösen von Funktionen)
• Ein Sitzung beginnt mit einer Anmeldung. Sie hat mehrere Schritte. Und sie endet mit einer Abmeldung. Eine Sitzung ist vergleichbar mit einem Installationsdialog durch den geblättert wird, mit der Besonderheit, dass für jeden Schritt Messwerte empfangen werden, auf die der Nutzer mit dem Aufrufen verschiedener Funktionen reagiert, bevor er zum nächsten Schritt blättert.
• Geht die TCP-IP-Verbindung verloren, ist die Sitzung verloren.
• Alles läuft in einem lokalen Netzwerk.

Schwierigkeiten:

• Welche Möglichkeiten gibt es, die Oberfläche auf eine Internetseite zu bringen? – Ansatz: Das XML kann durch XSL angemessen dargestellt werden.
• statische Inhalte darstellen – Ansatz: Diese können direkt im XSL untergebracht werden.
• Echtzeitwerte darstellen: Der Dienstgeber kann nicht unaufgefordert die Messwerte senden. – Ansatz: JavaScript erfragt häufig die Messwerte und aktualisiert die Oberfläche. JavaScript-Bibliotheken zu verwenden wäre denkbar. Wie macht man das möglichst einfach?
• Der Dienstgeber bemerkt das Ausfallen eines Dienstnehmers nicht. – Ansatz: Sitzungen erhalten eine Verfallsdauer.
• Die einzelnen Anfragen müssen eine Sitzung zuordenbar sein. - Ansatz: Einfach eine Sitzungskennung?

Die Echtzeitwerte darzustellen sehe ich als die größte Schwierigkeit, da es mir am wenigsten klar ist, wie man das durch möglichst wenig Arbeitsaufwand bewerkstelligt. Die Netzwerklast kann vernachlässigt werden. Und die Verzögerung sollte nicht zu groß werden. Gibt es JavaScript-Bibliotheken, die helfen können?

[Phoenix]

Für Echtzeitwerte auf Webseiten zu bringen kenne ich eine gute Lösung - die ist allerdings nicht ganz billig: http://www.lightstreamer.com/

Die haben einige Demos da, z.B: die Telemetrie-Demo http://www.lightstreamer.com/demo/WebTelemetryDemo/ oder die Börsen-Demo: http://www.lightstreamer.com/demo/StockListDemo/

Wir setzen die mit bis zu 20.000 gleichzeitig aktiven Verbindungen pro Webseite ein, und sind ziemlich happy.

Natürlich kann man sowas mit node.js als Server oder SignalR (wenn man .NET als Unterbau verwendet) auch nachbauen, aber bis man dann die Client-Bibliothek dafür so weit hat, das das mit allen nötigen Browsern geht, ggf. Fallbacks hat wenn da ein Proxy zwischen hängt der keine long-tunning-requests kann oder der Browser Websockets nicht kann, da verbringt man locker-flockig etliche Monate mit bis das einigermaßen zuverlässig tut.

Edit Nachtrag: Lightstreamer hat eine Kostenlose 'moderato' Lizenz im Angebot, die pro Item ein Update pro Sekunde kann und nur Webseiten supported (und z.B. keine echten Anwendungen bzw. Mobile Apps). Die könnte ggf. schon helfen.

[mjustin]

Zitat von Panthrax:

Die Ist-Zustand:

• Der Dienstgeber (...) verwaltet für jede aufgebaute Verbindung eine Sitzung, in der er auch unaufgefordert Daten (Messwerte) an die Dienstnehmer sendet.

Schwierigkeiten:

• Echtzeitwerte darstellen: Der Dienstgeber kann nicht unaufgefordert die Messwerte senden.

Ich habe da ein kleines Verständnisproblem: im Ist-Zustand konnte der Dienstgeber Messwerte senden (an den Dienstnehmer), und dann wieder nicht

Bei Webseiten gibt es zwei Möglichkeiten, Daten "unaufgefordert" an den Browser zu senden: Ajax Long Polling, und WebSocket. Ersteres ist schon länger möglich, letzteres erfordert einen HTML5 fähigen Browser, ist dafür aber noch eleganter.

Welche Einschränkungen bestehen denn auf der Serverseite für die Implementierung, soll es eine Delphi oder kannes auch eine .Net oder Java Serveranwendung sein?

Bei kleineren Systemen (Anzahl Requests/Sekunde) ist schon Indy als Server einsetzbar, eventuell mit einem Apache Reverse Proxy.

[Panthrax]

Phoenix, vielen Dank. Die Beispiele erfüllen die richtige Aufgabe. Mir ist jedoch nicht klar, wie ich das nun auf für den Dienst angepassen kann? Vielleicht ist diese Bibliothek auch etwas groß geschossen?

MJustin, der Ist-Zustand verwendet eine TCP-IP-Verbindung, bei der beide Partner voneinander wissen und unaufgefordert Daten senden können. Im Soll-Zustand ist die Oberfläche dann eine Internetseite, hier muss entsprechend eine Anfrage an den Dienstgeber gesendet werden ("get http;//..."), damit dieser eine Gelegenheit erhält mit dem aktuellen Messwertsatz zu antworten. Eine andere Möglichkeit ist mir nicht bekannt.

Von anderer Stelle habe ich diesen Vorschlag erhalten: JavaScript aktualisiert den Inhalt eines HTML-Div-Elements. Verwendet wird JQuery 2. Beim Ausführen ist nur eine Zeitüberschreitung zu sehen, da hinter der Adresse zum Abfragen des Messwertes natürlich kein Dienst antwortet. Der Quelltext dort zeigt aber wie es gehen könnte.
http://jsfiddle.net/PTQ99/2/

Weil ich es nicht ausdrücklich geschrieben hatte: Der Dienstgeber wird so gekapselt, dass er über eine URL angesprochen werden kann ("http://Dienst..."). Dafür werden möglicherweise die Indys verwendet. Er antwortet dann mit XML oder HTML; es ist noch unentschieden, ob die XSL-Verarbeitung beim Dienstgeber oder im Browser (neuer Dienstnehmer) passieren soll. Unklar ist, wie man der Internetseite nun ausreichend Leben einhaucht, damit einige Daten automatisch aktualisiert werden, bspw. die Messwerte.

Gibt es noch andere Ansätze?

[mjustin]

Zitat von Panthrax:

JavaScript aktualisiert den Inhalt eines HTML-Div-Elements. Verwendet wird JQuery 2. Beim Ausführen ist nur eine Zeitüberschreitung zu sehen, da hinter der Adresse zum Abfragen des Messwertes natürlich kein Dienst antwortet. Der Quelltext dort zeigt aber wie es gehen könnte.

jQuery 2.x ist brandneu und unterstützt ältere Browser nicht mehr - die 1.x Version wird noch gepflegt.

Das "Fiddle" greift alle 100 Millisekunden auf den Server zu, d.h. der Client erzeugt zehn HTTP GET Anforderungen pro Sekunde. Bei Ajax Long Polling steuert der Server die Zeit bis zum Update, indem er die Response mehr oder weniger lang zurückhält - zum Beispiel solange bis tatsächlich (neue) Daten vorhanden sind. Ajax Long Polling geht auch mit der jQuery Ajax Funktion gut.

Update:

Zitat von Panthrax:

Im Soll-Zustand ist die Oberfläche dann eine Internetseite, hier muss entsprechend eine Anfrage an den Dienstgeber gesendet werden ("get http;//..."), damit dieser eine Gelegenheit erhält mit dem aktuellen Messwertsatz zu antworten. Eine andere Möglichkeit ist mir nicht bekannt.

Siehe oben - man im Browser WebSocket verwenden, das ohne GET arbeitet. Der Server kann dazu über den gleichen Port auch aktiv Daten an den Client (Webbrowser) senden, über TCP Streams in beiden Richtungen. Problem: es gibt m.W. für Indy nur eine "experimentelle" WebSocket Implementierung. Eine kommerzielle WebSocket Lösung andererseits gibt es auch, aber sie ist nicht Indy-basiert.

Für die Gestaltung der Oberfläche noch ein Tip: http://dvdchief.com/delphi/ ist eine freie, open source Template Engine wie Smarty für PHP, mit der man HTML Seiten anhand von Templates erstellen kann. Getestet habe ich es noch nicht, aber es ist die erste mir bekannte Lösung für Delphi.

[Panthrax]

Vielen Dank!

Nach einigen Versuchen sind das hier die wesentlichen Lösungsteile:

einen Messwert liefern, tatsächlich dann vom Programm:

Code:

<?php
  header('Content-Type: text/html; charset=UTF-8'); 

  $Result = date('Y-m-d H:i:s') . ' ' . rand();
  exit($Result);
?>

Bibliothek JQuery 2:

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Ausgabeziel:

Code:

<div id="Inhalt">Inhalt</div>

Messwert abrufen und ausgeben:

Code:

function poll()
{
  $.ajax({
    url: '<?php print($EscapedQueryURL); ?>', 
    cache: false, 
    success: function(data){
      $("#Inhalt").html(data);
    }, 
    complete: poll, 
    timeout: 1000
  });
};

$(document).ready(function () {
  poll();
});