-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
71 lines (58 loc) · 1.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<style>
body { font-family: sans-serif; }
div { margin-top: 8px; }
.weather {
border: 1px solid lightblue;
padding: 16px;
}
</style>
<script src="worker-service-api.js"></script>
<p id="message"></p>
<script>
(async () => {
// Create a worklet, for now each Worklet is backed by a Worker thread.
let worklet = new Worklet();
// Expose a service to the worklet.
worklet.register('dom', class {
// We have to list what methods are exposed.
static get exposed() { return ['appendText', 'appendBox']; }
appendText(text) {
let div = document.createElement('div');
document.body.appendChild(div).textContent = text;
}
appendBox(text, style) {
let div = document.createElement('div');
if (style) {
for (let [property, value] of style)
div.style[property] = value;
}
document.body.appendChild(div).textContent = text;
}
});
// Load the code into the worklet.
await worklet.importScripts('worker.js');
(async () => {
// Create an instance.
let speak = await worklet.connect('speak', ['Hello ']);
// Invoke a method.
let response = await speak.concat('World');
// For now we need to manually disconnect, eventually we might clean up the
// instances automatically and auto reconnect when a method is called if the
// end point has been cleaned up.
worklet.disconnect(speak);
document.getElementById('message').textContent = response;
})();
// Example using a different service that will make network requests.
(async () => {
let weather = await worklet.connect('weather');
let result = await weather.query('san francisco, ca');
worklet.disconnect(weather);
let div = document.createElement('div');
div.className = 'weather';
div.textContent = `It's currently ${result.temp}F and ${result.text} in ` +
`San Francisco with wind of ${result.wind}mph.`;
document.body.appendChild(div);
})();
})();
</script>