|
| 1 | +--- |
| 2 | +id: using-web-workers |
| 3 | +titile: Using Web Workers |
| 4 | +--- |
| 5 | + |
| 6 | +[Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) |
| 7 | +can be used by including files with the `.worker.js` in your application. Files |
| 8 | +with this extension make use of [`worker-loader`](https://github.com/webpack-contrib/worker-loader) |
| 9 | +to bundle worker files which can be used by your main application. |
| 10 | + |
| 11 | +A sample WebWorker may look like: |
| 12 | + |
| 13 | +```js |
| 14 | +// hello.worker.js |
| 15 | + |
| 16 | +let helloInterval; |
| 17 | + |
| 18 | +const sayHello = () => { |
| 19 | + self.postMessage({ message: 'Hello' }); |
| 20 | +}; |
| 21 | + |
| 22 | +self.addEventListener('message', event => { |
| 23 | + if (event.data.run === true) { |
| 24 | + self.postMessage({ status: 'Worker started' }); |
| 25 | + helloInterval = setInterval(sayHello, 1000); |
| 26 | + } |
| 27 | + |
| 28 | + if (event.data.run === false) { |
| 29 | + self.postMessage({ status: 'Worker stopped' }); |
| 30 | + clearInterval(helloInterval); |
| 31 | + } |
| 32 | +}); |
| 33 | +``` |
| 34 | + |
| 35 | +This can subsequently be imported and used in your application as: |
| 36 | + |
| 37 | +```js |
| 38 | +// index.js |
| 39 | + |
| 40 | +import HelloWorker from './hello.worker.js'; |
| 41 | + |
| 42 | +const helloWorker = new HelloWorker(); |
| 43 | +let messageCount = 0; |
| 44 | + |
| 45 | +helloWorker.postMessage({ run: true }); |
| 46 | + |
| 47 | +helloWorker.onmessage = event => { |
| 48 | + if (event.data.status) { |
| 49 | + console.log('STATUS', event.data.status); |
| 50 | + } |
| 51 | + |
| 52 | + if (event.data.message) { |
| 53 | + messageCount += 1; |
| 54 | + console.log('MESSAGE', event.data.message); |
| 55 | + |
| 56 | + if (messageCount >= 5) { |
| 57 | + helloWorker.postMessage({ run: false }); |
| 58 | + } |
| 59 | + } |
| 60 | +}; |
| 61 | +``` |
| 62 | + |
| 63 | +## Importing modules into your workers |
| 64 | + |
| 65 | +Worker files can import modules just the same as the rest of your |
| 66 | +application. These will be compiled following the same rules and features as |
| 67 | +regular `.js` or `.ts` files. |
| 68 | + |
| 69 | +## Usage with TypeScript |
| 70 | + |
| 71 | +Workers can be written in TypeScript, however you are required to declare the |
| 72 | +file as a worker in order for the compiler to understand that it is a worker. |
| 73 | +This can be done by including: |
| 74 | + |
| 75 | +```ts |
| 76 | +/// <reference lib="webworker" /> |
| 77 | +``` |
| 78 | + |
| 79 | +at the beginning of all of your `.worker.ts` files. |
| 80 | + |
| 81 | +Because the interface imported is different from what is in your worker files, |
| 82 | +you'll also need to tell TypeScript what you're expecting this interface to look |
| 83 | +like. To achieve this, you will need to have a module declaration in each of |
| 84 | +your worker files like so: |
| 85 | + |
| 86 | +```ts |
| 87 | +// my.worker.ts |
| 88 | +// <worker code> |
| 89 | + |
| 90 | +// Necessary to tell typescript that this worker file is a module even though |
| 91 | +// it may not have any explicit imports or exports |
| 92 | +export {}; |
| 93 | + |
| 94 | +// Override the module declaration to tell Typescript that when imported, this |
| 95 | +// is what the imported types will look like. |
| 96 | +declare module './my.worker' { |
| 97 | + export default class TestWorker extends Worker { |
| 98 | + constructor(); |
| 99 | + } |
| 100 | +} |
| 101 | +``` |
0 commit comments