Skip to content

Commit 6370bef

Browse files
MrMadClownMrMadClown
authored
Merge branch 'master' into master
2 parents cb2e488 + a44ed20 commit 6370bef

File tree

4 files changed

+111
-0
lines changed

4 files changed

+111
-0
lines changed

‎README.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,60 @@ async function remoteFunction(cb) {
9494
Comlink.expose(remoteFunction);
9595
```
9696

97+
### [`SharedWorker`](./docs/examples/07-sharedworker-example)
98+
99+
When using Comlink with a [`SharedWorker`](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker) you have to:
100+
101+
1. Use the [`port`](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker/port) property, of the `SharedWorker` instance, when calling `Comlink.wrap`.
102+
2. Call `Comlink.expose` within the [`onconnect`](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorkerGlobalScope/onconnect) callback of the shared worker.
103+
104+
**Pro tip:** You can access DevTools for any shared worker currently running in Chrome by going to: **chrome://inspect/#workers**
105+
106+
**main.js**
107+
108+
```javascript
109+
import * as Comlink from "https://unpkg.com/comlink/dist/esm/comlink.mjs";
110+
async function init() {
111+
const worker = new SharedWorker("worker.js");
112+
/**
113+
* SharedWorkers communicate via the `postMessage` function in their `port` property.
114+
* Therefore you must use the SharedWorker's `port` property when calling `Comlink.wrap`.
115+
*/
116+
const obj = Comlink.wrap(worker.port);
117+
alert(`Counter: ${await obj.counter}`);
118+
await obj.inc();
119+
alert(`Counter: ${await obj.counter}`);
120+
}
121+
init();
122+
```
123+
124+
**worker.js**
125+
126+
```javascript
127+
importScripts("https://unpkg.com/comlink/dist/umd/comlink.js");
128+
// importScripts("../../../dist/umd/comlink.js");
129+
130+
const obj = {
131+
counter: 0,
132+
inc() {
133+
this.counter++;
134+
},
135+
};
136+
137+
/**
138+
* When a connection is made into this shared worker, expose `obj`
139+
* via the connection `port`.
140+
*/
141+
onconnect = function (event) {
142+
const port = event.ports[0];
143+
144+
Comlink.expose(obj, port);
145+
};
146+
147+
// Single line alternative:
148+
// onconnect = (e) => Comlink.expose(obj, e.ports[0]);
149+
```
150+
97151
**For additional examples, please see the [docs/examples](./docs/examples) directory in the project.**
98152

99153
## API

‎docs/examples/07-sharedworker-example/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
This example shows how to setup Comlink between a website and a `SharedWorker`.

‎docs/examples/07-sharedworker-example/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
3+
<script type="module">
4+
import * as Comlink from "https://unpkg.com/comlink@alpha/dist/esm/comlink.mjs";
5+
// import * as Comlink from "../../../dist/esm/comlink.mjs";
6+
7+
async function init() {
8+
const worker = new SharedWorker("worker.js");
9+
/**
10+
* SharedWorkers communicate via the `postMessage` function in their `port` property.
11+
* Therefore you must use the SharedWorker's `port` property when calling `Comlink.wrap`.
12+
*/
13+
const obj = Comlink.wrap(worker.port);
14+
15+
alert(`Counter: ${await obj.counter}`);
16+
await obj.inc();
17+
alert(`Counter: ${await obj.counter}`);
18+
}
19+
20+
init();
21+
</script>

‎docs/examples/07-sharedworker-example/worker.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* Copyright 2017 Google Inc. All Rights Reserved.
3+
* Licensed under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License.
5+
* You may obtain a copy of the License at
6+
* http://www.apache.org/licenses/LICENSE-2.0
7+
* Unless required by applicable law or agreed to in writing, software
8+
* distributed under the License is distributed on an "AS IS" BASIS,
9+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10+
* See the License for the specific language governing permissions and
11+
* limitations under the License.
12+
*/
13+
14+
importScripts("https://unpkg.com/comlink@alpha/dist/umd/comlink.js");
15+
// importScripts("../../../dist/umd/comlink.js");
16+
17+
const obj = {
18+
counter: 0,
19+
inc() {
20+
this.counter++;
21+
},
22+
};
23+
24+
/**
25+
* When a connection is made into this shared worker, expose `obj`
26+
* via the connection `port`.
27+
*/
28+
onconnect = function (event) {
29+
const port = event.ports[0];
30+
31+
Comlink.expose(obj, port);
32+
};
33+
34+
// Single line alternative:
35+
// onconnect = (e) => Comlink.expose(obj, e.ports[0]);

0 commit comments

Comments
 (0)