├── README.md └── web-workers └── simple-shared-worker ├── README.md ├── index.html ├── index2.html ├── multiply.js ├── nosubmit.js ├── square.js ├── style.css └── worker.js /README.md: -------------------------------------------------------------------------------- 1 | # simple-shared-worker 2 | 3 | > NOTE: This example repository has been archived. The example code and live example can now be found at [dom-examples/web-workers/simple-shared-worker](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-shared-worker) 4 | -------------------------------------------------------------------------------- /web-workers/simple-shared-worker/README.md: -------------------------------------------------------------------------------- 1 | # simple-shared-worker 2 | 3 | > NOTE: This example repository has moved to [dom-examples/web-workers/simple-shared-worker](https://github.com/mdn/dom-examples/tree/master/web-workers/simple-shared-worker) 4 | -------------------------------------------------------------------------------- /web-workers/simple-shared-worker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Shared Workers basic example 9 | 10 | 11 | 14 | 15 | 16 | 17 |

Shared
Workers
basic
example

18 | 19 |
20 | 21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 |

Result: 0

33 | 34 |

Go to second worker page

35 | 36 |
37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /web-workers/simple-shared-worker/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Shared Workers basic example 9 | 10 | 11 | 14 | 15 | 16 | 17 |

Shared
Workers
basic
example

18 | 19 |
20 | 21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 |

Result: 0

29 | 30 |
31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /web-workers/simple-shared-worker/multiply.js: -------------------------------------------------------------------------------- 1 | var first = document.querySelector('#number1'); 2 | var second = document.querySelector('#number2'); 3 | 4 | var result1 = document.querySelector('.result1'); 5 | 6 | if (!!window.SharedWorker) { 7 | var myWorker = new SharedWorker("worker.js"); 8 | 9 | first.onchange = function() { 10 | myWorker.port.postMessage([first.value, second.value]); 11 | console.log('Message posted to worker'); 12 | } 13 | 14 | second.onchange = function() { 15 | myWorker.port.postMessage([first.value, second.value]); 16 | console.log('Message posted to worker'); 17 | } 18 | 19 | myWorker.port.onmessage = function(e) { 20 | result1.textContent = e.data; 21 | console.log('Message received from worker'); 22 | console.log(e.lastEventId); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /web-workers/simple-shared-worker/nosubmit.js: -------------------------------------------------------------------------------- 1 | var form = document.querySelector('form'); 2 | 3 | form.onsubmit = function(e) { 4 | e.preventDefault(); 5 | }; 6 | -------------------------------------------------------------------------------- /web-workers/simple-shared-worker/square.js: -------------------------------------------------------------------------------- 1 | var squareNumber = document.querySelector('#number3'); 2 | 3 | var result2 = document.querySelector('.result2'); 4 | 5 | if (!!window.SharedWorker) { 6 | var myWorker = new SharedWorker("worker.js"); 7 | 8 | squareNumber.onchange = function() { 9 | myWorker.port.postMessage([squareNumber.value, squareNumber.value]); 10 | console.log('Message posted to worker'); 11 | } 12 | 13 | myWorker.port.onmessage = function(e) { 14 | result2.textContent = e.data; 15 | console.log('Message received from worker'); 16 | } 17 | } -------------------------------------------------------------------------------- /web-workers/simple-shared-worker/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | background-color: #7D2663; 3 | font-family: sans-serif; 4 | } 5 | 6 | h1 { 7 | margin: 0; 8 | font-size: 15vw; 9 | letter-spacing: -0.2rem; 10 | position: absolute; 11 | top: 0; 12 | z-index: -1; 13 | } 14 | 15 | p { 16 | margin: 0 0 1rem 0; 17 | } 18 | 19 | .controls { 20 | padding: 4vw; 21 | width: 75%; 22 | margin: 3vw auto; 23 | background-color: rgba(255, 255, 255, 0.7); 24 | border: 5px solid black; 25 | opacity: 0.3; 26 | transition: 1s all; 27 | } 28 | 29 | .controls:hover, .controls:focus { 30 | opacity: 1; 31 | } 32 | 33 | .controls label, .controls p, .controls input { 34 | font-size: 3vw; 35 | } 36 | 37 | .controls div { 38 | padding-bottom: 1rem; 39 | } 40 | 41 | -------------------------------------------------------------------------------- /web-workers/simple-shared-worker/worker.js: -------------------------------------------------------------------------------- 1 | onconnect = function(e) { 2 | var port = e.ports[0]; 3 | 4 | port.onmessage = function(e) { 5 | var workerResult = 'Result: ' + (e.data[0] * e.data[1]); 6 | port.postMessage(workerResult); 7 | } 8 | 9 | } 10 | --------------------------------------------------------------------------------