Merge pull request GoogleChromeLabs#516 from serg-io/sharedworker-exa…

…mple
davidyxu · Feb 5, 2021 · a44ed20 · a44ed20
2 parents 520e4d6 + 1e77848
commit a44ed20
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -94,6 +94,60 @@ async function remoteFunction(cb) {
 Comlink.expose(remoteFunction);
 ```
 
+### [`SharedWorker`](./docs/examples/07-sharedworker-example)
+
+When using Comlink with a [`SharedWorker`](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker) you have to:
+
+1. Use the [`port`](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker/port) property, of the `SharedWorker` instance, when calling `Comlink.wrap`.
+2. Call `Comlink.expose` within the [`onconnect`](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorkerGlobalScope/onconnect) callback of the shared worker.
+
+**Pro tip:** You can access DevTools for any shared worker currently running in Chrome by going to: **chrome://inspect/#workers**
+
+**main.js**
+
+```javascript
+import * as Comlink from "https://unpkg.com/comlink/dist/esm/comlink.mjs";
+async function init() {
+  const worker = new SharedWorker("worker.js");
+  /**
+   * SharedWorkers communicate via the `postMessage` function in their `port` property.
+   * Therefore you must use the SharedWorker's `port` property when calling `Comlink.wrap`.
+   */
+  const obj = Comlink.wrap(worker.port);
+  alert(`Counter: ${await obj.counter}`);
+  await obj.inc();
+  alert(`Counter: ${await obj.counter}`);
+}
+init();
+```
+
+**worker.js**
+
+```javascript
+importScripts("https://unpkg.com/comlink/dist/umd/comlink.js");
+// importScripts("../../../dist/umd/comlink.js");
+
+const obj = {
+  counter: 0,
+  inc() {
+    this.counter++;
+  },
+};
+
+/**
+ * When a connection is made into this shared worker, expose `obj`
+ * via the connection `port`.
+ */
+onconnect = function (event) {
+  const port = event.ports[0];
+
+  Comlink.expose(obj, port);
+};
+
+// Single line alternative:
+// onconnect = (e) => Comlink.expose(obj, e.ports[0]);
+```
+
 **For additional examples, please see the [docs/examples](./docs/examples) directory in the project.**
 
 ## API

diff --git a/docs/examples/07-sharedworker-example/README.md b/docs/examples/07-sharedworker-example/README.md
@@ -0,0 +1 @@
+This example shows how to setup Comlink between a website and a `SharedWorker`.
diff --git a/docs/examples/07-sharedworker-example/index.html b/docs/examples/07-sharedworker-example/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+
+<script type="module">
+  import * as Comlink from "https://unpkg.com/comlink@alpha/dist/esm/comlink.mjs";
+  // import * as Comlink from "../../../dist/esm/comlink.mjs";
+
+  async function init() {
+    const worker = new SharedWorker("worker.js");
+    /**
+     * SharedWorkers communicate via the `postMessage` function in their `port` property.
+     * Therefore you must use the SharedWorker's `port` property when calling `Comlink.wrap`.
+     */
+    const obj = Comlink.wrap(worker.port);
+
+    alert(`Counter: ${await obj.counter}`);
+    await obj.inc();
+    alert(`Counter: ${await obj.counter}`);
+  }
+
+  init();
+</script>
diff --git a/docs/examples/07-sharedworker-example/worker.js b/docs/examples/07-sharedworker-example/worker.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+importScripts("https://unpkg.com/comlink@alpha/dist/umd/comlink.js");
+// importScripts("../../../dist/umd/comlink.js");
+
+const obj = {
+  counter: 0,
+  inc() {
+    this.counter++;
+  },
+};
+
+/**
+ * When a connection is made into this shared worker, expose `obj`
+ * via the connection `port`.
+ */
+onconnect = function (event) {
+  const port = event.ports[0];
+
+  Comlink.expose(obj, port);
+};
+
+// Single line alternative:
+// onconnect = (e) => Comlink.expose(obj, e.ports[0]);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		This example shows how to setup Comlink between a website and a `SharedWorker`.