fix: transfer from worker (#455)

Co-authored-by: leonid.polukhin <[email protected]>

examples/webpack5/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "solid-js": "^1.8.7",
-    "workerpool": "8.0.0"
+    "workerpool": "^9.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.23.5",

examples/webpack5/src/App.tsx

@@ -31,21 +31,57 @@ function App() {
     };
     result.appendChild(a);
   };
+
+  const createArray = () => {
+    const size = parseInt(inputArraySize());
+    const results = document.getElementById('arrayResults')!;
+    const result = document.createElement('div');
+    results.appendChild(result);
+    const p = document.createElement('p')!;
+    const promise = pool.exec('createArray', [size], { on: function (array) {
+      const p = document.createElement('p');
+      p.innerHTML = `Array of size ${array.buffer.byteLength} bytes is created in the worker.`;
+      result.appendChild(p);
+    }}).then(function (f) {
+      const p = document.createElement('p');
+      if (f) {
+        p.innerHTML = 'Ok. Array has been transferred.';
+      }
+      else {
+        p.innerHTML = '<b>Warning. Array has been cloned.<b>';
+      }
+      result.appendChild(p);
+    }).catch(function (error) { 
+        result.innerHTML = `${error}`;
+    });
+
+  };
+
   const [inputValue, setInputValue] = createSignal('30')
-  return <section>
-    Calculate fibonacci:
-    <input type="text" id="input" value={inputValue()} oninput={(e) => setInputValue(e.target.value)} />
-    <input type="button" id="calculate" value="Calculate" onclick={calculate} />
-
-    <p>
-      Try entering values in the range of 10 to 50.
-      Verify that the browser stays responsive when working on a large calculation.
-      We have created 3 workers, so the worker pool will handle a maximum of three
-      tasks at a time. When exceeding this, tasks will be put in a queue.
-    </p>
-
-    <div id="results"></div>
-  </section>
+  const [inputArraySize, setArraySize] = createSignal('100')
+
+  return <div>
+    <section>
+      <h4>Calculate fibonacci:</h4>
+      <input type="text" id="input" value={inputValue()} oninput={(e) => setInputValue(e.target.value)} />
+      <input type="button" id="calculate" value="Calculate" onclick={calculate} />
+
+      <p>
+        Try entering values in the range of 10 to 50.
+        Verify that the browser stays responsive when working on a large calculation.
+        We have created 3 workers, so the worker pool will handle a maximum of three
+        tasks at a time. When exceeding this, tasks will be put in a queue.
+      </p>
+      <div id="results"></div>
+    </section>
+    <section>
+      <h4>Test transferring array from a worker:</h4>
+      Input array size:      
+      <input type="text" id="inputArraySize" value={inputArraySize()} oninput={(e) => setArraySize(e.target.value)} />
+      <input type="button" id="createArray" value="Create array!" onclick={createArray} />
+      <div id="arrayResults"></div>
+    </section>
+  </div>
 }
 
 export default App

examples/webpack5/src/worker/worker.ts

@@ -1,12 +1,31 @@
-import workerpool from 'workerpool'
+import { arrayBuffer } from 'stream/consumers';
+import workerpool, { worker } from 'workerpool'
 
 // a deliberately inefficient implementation of the fibonacci sequence
 function fibonacci(n: number): number {
   if (n < 2) return n;
   return fibonacci(n - 2) + fibonacci(n - 1);
 }
 
+// As ArrayBuffer.prototype.detached is a rather recent feature it is not used here.
+function isDetached (buffer: ArrayBuffer) : boolean {
+  try {
+    const array = new Uint8Array (buffer);
+    return false;
+  } 
+  catch (error) {
+    return true;
+  }
+}
+
+function createArray(size: number) : boolean {
+  const array = size > 0 ? new Uint8Array(size) : new Uint8Array();
+  workerpool.workerEmit(new workerpool.Transfer(array, [array.buffer]));
+  return isDetached(array.buffer);
+}
+
 // create a worker and register public functions
 workerpool.worker({
-  fibonacci: fibonacci
+  fibonacci: fibonacci,
+  createArray: createArray
 });

src/worker.js

@@ -24,8 +24,8 @@ if (typeof self !== 'undefined' && typeof postMessage === 'function' && typeof a
       callback(message.data);
     })
   };
-  worker.send = function (message) {
-    postMessage(message);
+  worker.send = function (message, transfer) {
+     transfer ? postMessage(message, transfer) : postMessage (message);
   };
 }
 else if (typeof process !== 'undefined') {