Implement a Web Worker

Our Web Worker doesn't do anything yet. Let's change that!

example/web-worker/main.js
function readFile(input) {
    const reader = new FileReader();
    reader.onload = () => {
        const ifcWorker = new Worker('worker/worker.js');
        ifcWorker.onmessage = function (e) {
            // DO STUFF HERE
        };
        ifcWorker.postMessage(reader.result);
    };
    reader.readAsText(input.files[0]);
}

Just as the FileReader has an onload fucntion, the Web worker has an onmessage function. This function is called when the Web Worker is complete.

To start the Web Worker, we post a message. We want to post the result of the FileReader. Let's open our worker.js file.

example/web-worker/worker/worker.js
onmessage = (e) => {
  const ifcData = e.data;
  
  let output = "Hello Worker";
  postMessage(output);
};

The ifcData variable contians the result from the FileReader. Note that this worker doesn't do anything yet. We simply return a string.

Last updated