feat(webworkers) Add MessageBus, Broker, and Serializer

This commit is contained in:
Jason Teplitz
2015-07-10 16:09:18 -07:00
parent b26f99787e
commit 33500e986b
22 changed files with 1097 additions and 28 deletions

Binary file not shown.

View File

@ -0,0 +1,25 @@
library angular2.examples.message_broker.background_index;
import "package:angular2/src/web-workers/worker/application.dart"
show WorkerMessageBus, WorkerMessageBusSource, WorkerMessageBusSink;
import "package:angular2/src/web-workers/worker/broker.dart"
show MessageBroker, UiArguments;
import "dart:isolate";
main(List<String> args, SendPort replyTo) {
ReceivePort rPort = new ReceivePort();
WorkerMessageBus bus = new WorkerMessageBus.fromPorts(replyTo, rPort);
bus.source.listen((message) {
if (identical(message['data']['type'], "echo")) {
bus.sink
.send({"type": "echo_response", "value": message['data']['value']});
}
});
MessageBroker broker = new MessageBroker(bus);
var args = new UiArguments("test", "tester");
broker.runOnUiThread(args).then((data) {
bus.sink.send({"type": "result", "value": data.value});
});
}

View File

@ -0,0 +1,20 @@
import {
WorkerMessageBus,
WorkerMessageBusSource,
WorkerMessageBusSink
} from "angular2/src/web-workers/worker/application";
import {MessageBroker, UiArguments} from "angular2/src/web-workers/worker/broker";
export function main() {
var bus = new WorkerMessageBus(new WorkerMessageBusSink(), new WorkerMessageBusSource());
bus.source.listen((message) => {
if (message.data.type === "echo") {
bus.sink.send({type: "echo_response", 'value': message.data.value});
}
});
var broker = new MessageBroker(bus);
var args = new UiArguments("test", "tester");
broker.runOnUiThread(args)
.then((data) => { bus.sink.send({type: "result", value: data.value}); });
}

View File

@ -0,0 +1,31 @@
library angular2.examples.message_broker.index;
import "package:angular2/src/web-workers/ui/application.dart"
show spawnWorker, UIMessageBus, UIMessageBusSink, UIMessageBusSource;
import "dart:html";
main() {
var VALUE = 5;
spawnWorker(Uri.parse("background_index.dart")).then((bus) {
querySelector("#send_echo").addEventListener("click", (e) {
var val = (querySelector("#echo_input") as InputElement).value;
bus.sink.send({'type': 'echo', 'value': val});
});
bus.source.listen((message) {
var data = message['data'];
if (identical(data['type'], "echo_response")) {
querySelector("#echo_result")
.appendHtml("<span class='response'>${data['value']}</span>");
} else if (identical(data['type'], "test")) {
bus.sink.send(
{'type': "result", 'value': {'id': data['id'], 'value': VALUE}});
} else if (identical(data['type'], "result")) {
querySelector("#ui_result")
.appendHtml("<span class='result'>${data['value']}</span>");
} else if (identical(data['type'], "ready")) {
bus.sink.send({'type': "init"});
}
});
});
}

View File

@ -0,0 +1,11 @@
<!doctype html>
<html>
<title>Message Broker Example</title>
<body>
<input type="text" id="echo_input" />
<button type="button" id="send_echo">Send Echo</button>
<p id="echo_result"></p>
<p id="ui_result"></p>
$SCRIPTS$
</body>
</html>

View File

@ -0,0 +1,28 @@
import {
UIMessageBus,
UIMessageBusSink,
UIMessageBusSource
} from "angular2/src/web-workers/ui/application";
var worker = new Worker("loader.js");
var bus = new UIMessageBus(new UIMessageBusSink(worker), new UIMessageBusSource(worker));
var VALUE = 5;
document.getElementById("send_echo")
.addEventListener("click", (e) => {
var val = (<HTMLInputElement>document.getElementById("echo_input")).value;
bus.sink.send({type: "echo", value: val});
});
bus.source.listen((message) => {
if (message.data.type === "echo_response") {
document.getElementById("echo_result").innerHTML =
`<span class='response'>${message.data.value}</span>`;
} else if (message.data.type === "test") {
bus.sink.send({type: "result", value: {id: message.data.id, value: VALUE}});
} else if (message.data.type == "result") {
document.getElementById("ui_result").innerHTML =
`<span class='result'>${message.data.value}</span>`;
} else if (message.data.type == "ready") {
bus.sink.send({type: "init"});
}
});

View File

@ -0,0 +1,29 @@
$SCRIPTS$
//importScripts("math_worker.js").execute();
//System.import("examples/src/web_workers/math_worker").then(function(m){console.log("got", m)});
//importScripts("rx.js");
// TODO: do this correctly with lang facade
window = {
setTimeout: setTimeout,
Map: Map,
Set: Set,
Array: Array,
Reflect: Reflect,
RegExp: RegExp,
Promise: Promise,
Date: Date
}
assert = function(){}
System.import("examples/src/message_broker/background_index").then(function(m){
console.log("running main");
try{
m.main();
} catch (e){
console.error(e);
}
}, function(error){
console.error("error loading background", error);
});