ReactorJS ist ein Javascript Bibliothek für HTTP/HTTPS-Requests. Neben traditionellen GET- und POST-Requests wird vor allem die neuen Stream-Mime-Types unterstützt.
Verwendung#
Das Skript unterstützt RequireJS, das Einbinden erfolgt daher wie folgt:
require(["vue-resource/integrate/reactor"], function(reactor) {
[...]
};
Interface#
Nach dem Einbinden durch den Require-Aufruf ist die Nutzung sehr einfach:
reactor.subscribe({
url: "/service",
onmessage: function(data) {
[...]
}
});
Erklärung: Der Parameter "url" ist erforderlich um die Verbindung zu einem Web-Service aufzunehmen. Der Parameter "onmessage" enthält eine Callback-Funktion. Diese Funktion wird pro empfangenes Datenelement aufgerufen. Je nach aufgerufener Service-Methode kann diese Funktion also ein- oder mehrfach aufgerufen werden.
Parameter#
Im Folgenden werden all unterstützten Parameter erklärt:| Name | Beispiel | Erklärung |
|---|---|---|
| method | "GET" | HTTP-Methode die verwendet werden soll. Hiermit wird ein traditioneller Request erzeugt anstatt eines Streams. |
| data | {id:1} | Mit diesem Parameter werden die Query-Parameter an den Request übergeben. Verschachtelte Objekte werden zu "."-getrennten Objekten deserialisiert, sodass diese kompatibel zu Spring Web Request Parameter Objekten sind z.B. {a:{b:1} wird zu <url>?a.b=1 |
| body | {a:1,b:2,c:3} | JSON-Body für einen POST-Request. Hier ist zu beachten dass die Angabe des Parameters "body" automatisch zu einem POST-Request führt. |
| onmessage | function(data) {[...]} | Callback-Funktion für die Entgegennahme der Datenelemente aus dem Stream bzw. die kompletten Daten im Fall eines traditionellen GET- oder POST-Requests. |
| onmessages | function(array) {[...]} | Aggregierte Callback-Funktion für die Entgegennahme eines Daten-Arrays aus dem Stream. Diese Funktion vereinfacht das Verarbeiten größerer Datenmengen. Das hochfrequente Ändern der Daten führt bei reaktiven Frontend-Systemen zu ineffektivem Rendern. Durch Verwenden von "onmessages" statt "onmessage" wird dieser Sachverhalt effizient gelöst. Siehe auch "backpressure". |
| backpressure | function(callback) {setTimeout(callback, 200);} | Ein Funktion um die Frequenz der "onmessages" Callback-Aufrufe zu steuern. Die Default Funktion für die "backpressure" beginnt mit einer Datenaggregation von 200ms und verdoppelt die Aggregationszeit dann bei jedem nachfolgenden Aufruf. Bei tatsächlichen Echtzeitstreams kann hier auch "window.requestAnimationFrame" bzw. das Vue Jquery-Äquivalent $rendered verwendet werden. |
| onclose | function() {[...]} | Argumentslose Funktion die am Ende des Streams aufgerufen wird. |
| autoclose | false | Per Default werden Streams am Ende geschlossen, wie dies bei Spring Webflux bzw. Project Reactor üblich ist. Das Browser-Objekt "EventSource" kann auch einen infiniten Re-subscribe ausführen, wenn hier false angegeben wird. |
| onerror | function(error) {[...]} | Callback-Funktion im Fall dass ein Fehler aufgetreten ist. |
| onopen | function() {[...]} | Callback-Funktion die einmalig beim Öffnen des Streams aufgerufen wird. |
Subscribtion#
Die Funktion reactor.subscribe([...]) gibt die aktuelle Subscription in Form eines Objekts zurück:var subscription = reactor.subscribe([...]); [...] subscription.close();
Erklärung: Der einzige Zweck die Subscription zu speichern besteht darin, den Request vorzeitig abbrechen zu wollen. Beispielsweise beim Scrollen oder Echtzeitsuche beim Tippen können die Server-Anfragen abgebrochen werden um Zeit zu sparen.
Download#
ReactorJS ist momentan Beispiel des Projekts Vue Resource und kann im Intersult Nexus
downgeloadet werden.