├── .gitignore ├── README.md ├── d1-1-worker-setup ├── app.js ├── index.html └── w │ └── main-worker.js ├── d1-2-alternative-communication ├── app.js ├── index.html └── w │ └── main-worker.js ├── d10-passing-window ├── app.js ├── index.html └── w │ └── main-worker.js ├── d11-change-detection ├── MOCK_DATA_2.json ├── app.js ├── index.html └── w │ ├── main-worker.js │ └── utils.js ├── d2-prime-numbers-without-worker-until-number ├── app.js └── index.html ├── d2-prime-numbers-without-worker ├── app.js └── index.html ├── d2-prime-numbers ├── app.js ├── index.html └── w │ └── main-worker.js ├── d3-sub-worker ├── app.js ├── index.html └── w │ ├── main-worker.js │ └── network-check.js ├── d4-random-users ├── app.js ├── index.html └── w │ ├── main-worker.js │ └── network-check.js ├── d5-mix-d2-3-4-random-images ├── app.css ├── app.js ├── image-worker │ └── image.js ├── index.html ├── main-worker │ ├── main-worker.js │ └── network-check.js └── primes-worker │ └── primes.js ├── d5-mix-no-worker ├── app.css ├── app.js └── index.html ├── d6-mix-d2-3-4-random-images-alt ├── app.css ├── app.js ├── image-worker │ └── image.js ├── index.html ├── main-worker │ ├── main-worker.js │ └── network-check.js └── primes-worker │ └── primes.js ├── d7-transferables └── index.html ├── d8-transferables-2 ├── app.css ├── app.js ├── index.html └── main-worker │ └── main-worker.js └── d9-too-many-messages ├── app.js ├── index.html └── w ├── w1.js └── w2.js /.gitignore: -------------------------------------------------------------------------------- 1 | .project 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WebWorkers 2 | Demos with web workers 3 | 4 | 1. Basic setup 5 | 2. Heavy calculations 6 | 3. Sub worker 7 | 4. API implementation 8 | 5. Multiple threads 9 | 6. Transferable objects 10 | -------------------------------------------------------------------------------- /d1-1-worker-setup/app.js: -------------------------------------------------------------------------------- 1 | var worker = new Worker('w/main-worker.js'); 2 | worker.postMessage('message to worker'); 3 | 4 | worker.onmessage = function(e) { 5 | console.log(e.data); 6 | }; 7 | 8 | //worker.terminate(); -------------------------------------------------------------------------------- /d1-1-worker-setup/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /d1-1-worker-setup/w/main-worker.js: -------------------------------------------------------------------------------- 1 | onmessage = function(e) { 2 | console.log(e.data); 3 | postMessage('message from worker'); 4 | }; 5 | 6 | //close(); -------------------------------------------------------------------------------- /d1-2-alternative-communication/app.js: -------------------------------------------------------------------------------- 1 | var APP = {}; 2 | 3 | function commInterface(fns){ 4 | for(var fn in fns){ 5 | if(typeof APP[fn] === 'function') { 6 | APP[fn](fns[fn]); 7 | } 8 | } 9 | } 10 | 11 | APP.callback = function(prop) { 12 | console.log(prop); 13 | }; 14 | 15 | 16 | 17 | worker = new Worker('w/main-worker.js'); 18 | worker.postMessage({test: 'message to worker'}); 19 | 20 | worker.onmessage = function(e) { 21 | commInterface(e.data); 22 | }; 23 | 24 | //worker.terminate(); -------------------------------------------------------------------------------- /d1-2-alternative-communication/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /d1-2-alternative-communication/w/main-worker.js: -------------------------------------------------------------------------------- 1 | var APP = {}; 2 | 3 | function commInterface(fns){ 4 | for(var fn in fns){ 5 | if(typeof APP[fn] === 'function') { 6 | APP[fn](fns[fn]); 7 | } 8 | } 9 | } 10 | 11 | APP.test = function(prop) { 12 | console.log(prop); 13 | postMessage({callback: 'message to parent'}) 14 | }; 15 | 16 | onmessage = function(e) { 17 | commInterface(e.data); 18 | }; 19 | 20 | //close(); -------------------------------------------------------------------------------- /d10-passing-window/app.js: -------------------------------------------------------------------------------- 1 | var worker = new Worker('w/main-worker.js'); 2 | worker.postMessage(window.requestAnimationFrame); 3 | 4 | worker.onmessage = function(e) { 5 | console.log(e.data); 6 | }; 7 | 8 | //worker.terminate(); -------------------------------------------------------------------------------- /d10-passing-window/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /d10-passing-window/w/main-worker.js: -------------------------------------------------------------------------------- 1 | onmessage = function(e) { 2 | console.log(e.data); 3 | //postMessage('message from worker'); 4 | }; 5 | 6 | //close(); -------------------------------------------------------------------------------- /d11-change-detection/app.js: -------------------------------------------------------------------------------- 1 | var worker = new Worker('w/main-worker.js'); 2 | worker.postMessage('message to worker'); 3 | 4 | var api = { 5 | html: function(content){ 6 | console.log("\n-----UPDATE-----\n") 7 | document.getElementById("t").innerHTML = content; 8 | } 9 | } 10 | 11 | worker.onmessage = function(e) { 12 | if(typeof e.data === "object"){ 13 | for (var i in e.data ){ 14 | api[i](e.data[i]); 15 | } 16 | }else{ 17 | console.log(e.data); 18 | } 19 | }; 20 | 21 | //worker.terminate(); -------------------------------------------------------------------------------- /d11-change-detection/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

There would be table ...

9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /d11-change-detection/w/main-worker.js: -------------------------------------------------------------------------------- 1 | importScripts("utils.js"); 2 | 3 | var CACHE = ""; 4 | 5 | var templates = { 6 | tr: { tag: "tr", attr: { } }, 7 | th: { tag: "th", attr: { }, text: "1" }, 8 | td: { tag: "td", attr: { }, text: "1" } 9 | }; 10 | 11 | var generatedTemplate = []; 12 | 13 | function changeDetection(s){ 14 | if(CACHE === s){ 15 | return false; 16 | } 17 | else{ 18 | CACHE = s; 19 | return true; 20 | } 21 | } 22 | 23 | function init(e){ 24 | var s = e.currentTarget.response; 25 | if(changeDetection(s)){ 26 | var json = JSON.parse(CACHE); 27 | var keys = _getJSONKeys(json); 28 | 29 | // build headings 30 | var trth = Object.assign( {}, templates.tr, { attr: { class: "bold" } } ); 31 | trth.content = []; 32 | for(var i = 0; i < keys.length; i++){ 33 | trth.content.push(Object.assign( {}, templates.th, { 34 | text: keys[i] 35 | })); 36 | } 37 | generatedTemplate.push(trth); 38 | 39 | // build cells 40 | json.reduce(function(trs, cell){ 41 | var tr = Object.assign( {},templates.tr, {} ); 42 | tr.content = []; 43 | 44 | for(var i = 0; i < keys.length; i++){ 45 | tr.content.push(Object.assign( {}, templates.td, { 46 | text: cell[keys[i]] 47 | })); 48 | } 49 | trs.push(tr); 50 | return trs; 51 | 52 | }, generatedTemplate); 53 | 54 | postMessage({ 55 | html: _buildHtml(generatedTemplate) 56 | }); 57 | 58 | generatedTemplate = []; 59 | 60 | return true; 61 | } 62 | return false; 63 | } 64 | 65 | setInterval(_getData.bind(null, '../MOCK_DATA_2.json', init), 250); 66 | //_getData.bind(null, '../MOCK_DATA_2.json', init)(); 67 | 68 | 69 | onmessage = function(e) { 70 | console.log(e.data); 71 | postMessage('message from worker'); 72 | }; 73 | 74 | //close(); -------------------------------------------------------------------------------- /d11-change-detection/w/utils.js: -------------------------------------------------------------------------------- 1 | function _empty() { while (this.hasChildNodes()) { this.removeChild(this.firstChild); } } 2 | function _isHtmlElement(o) { return (typeof HTMLElement === "object" ? o instanceof HTMLElement : o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string"); } 3 | function _getData(url, callback) { var oReq = new XMLHttpRequest(); oReq.addEventListener("load", callback); oReq.open("GET", url); oReq.send(); } 4 | function _getJSONKeys(arr) { var a = [], i, j; for ( i = 0; i < arr.length; i++) { for (j in arr[i]) { if (arr[i].hasOwnProperty(j) && a.indexOf(j) === -1) { a.push(j); } } } return a; } 5 | 6 | function _prepareTemplate(s, o) { return Object.keys(o).reduce(function (s, x) { return s.replace("{{" + x + "}}", o[x]); }, s); } 7 | function _createElement(o, t) { 8 | var e = "<" + o.tag, 9 | a; 10 | 11 | if (o.attr) { 12 | for (a in o.attr) { 13 | e += " " + a + "=" + "\"" + o.attr[a] + "\""; 14 | } 15 | } 16 | 17 | e += ">"; 18 | 19 | if (o.text) e += o.text; 20 | if (t) e += t; 21 | 22 | e += ""; 23 | return e; 24 | } 25 | 26 | function _buildHtml(o) { 27 | var h = ""; 28 | if(typeof o === "object") { 29 | o.forEach(function(x) { 30 | h += _createElement(x, _buildHtml(x.content)); 31 | }); 32 | } 33 | return h; 34 | } -------------------------------------------------------------------------------- /d2-prime-numbers-without-worker-until-number/app.js: -------------------------------------------------------------------------------- 1 | var txt = document.getElementById('primes'); 2 | 3 | function generatePrimes() { 4 | 5 | var maxNumber = Number(document.getElementById("maxNumber").value); 6 | txt.innerHTML = ''; 7 | 8 | // generate array with false values 9 | (function _arrayGenerate() { 10 | var out = []; 11 | return new Promise(function (_resolve) { 12 | (function _arrayGenerate() { 13 | if (out.length <= maxNumber) { 14 | out.push(true); 15 | setTimeout( 16 | _arrayGenerate 17 | , 0); 18 | } else { 19 | _resolve(out); 20 | } 21 | }(0)); 22 | }); 23 | }()).then(function (inputArray) { 24 | return new Promise(function (preparedResolve) { 25 | (function _arrayIterate(index) { 26 | if (index <= Math.sqrt(maxNumber) && inputArray[index] === true) { 27 | (function _iterate(i) { 28 | console.log("iterate " + i); 29 | if (i <= maxNumber) { 30 | inputArray[i] = false; 31 | i += index; 32 | setTimeout(function () { 33 | _iterate(i); 34 | }, 0); 35 | } else { 36 | setTimeout(function () { 37 | _arrayIterate(++index); 38 | }, 0); 39 | } 40 | }(Math.pow(index, 2))); 41 | } else if (index <= Math.sqrt(maxNumber)) { 42 | inputArray[index] = false; 43 | setTimeout(function () { 44 | _arrayIterate(++index); 45 | }, 0); 46 | } else { 47 | preparedResolve(inputArray); 48 | } 49 | }(2)); 50 | }); 51 | }).then(function (result) { 52 | // here we will display generated primes 53 | (function _displayResult(index) { 54 | if (index >= 2 && index <= result.length && result[index] === true) { 55 | var _div = document.createElement("div"), 56 | _p = document.createElement("p"), 57 | _hr = document.createElement("hr"); 58 | 59 | _p.innerHTML = index; 60 | _div.appendChild(_p); 61 | _div.appendChild(_hr); 62 | txt.appendChild(_div); 63 | } 64 | 65 | if (index <= result.length) { 66 | setTimeout(function () { 67 | _displayResult(++index) 68 | }, 0); 69 | } 70 | }(0)); 71 | }); 72 | 73 | return false; 74 | } 75 | -------------------------------------------------------------------------------- /d2-prime-numbers-without-worker-until-number/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 |
11 |
12 |
Primes: 13 |
14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /d2-prime-numbers-without-worker/app.js: -------------------------------------------------------------------------------- 1 | var txt = document.getElementById('primes'); 2 | 3 | function generatePrimes() { 4 | var n = 1, i = 2; 5 | (function _primes() { 6 | n++; 7 | (function _generator() { 8 | return new Promise(function (resolve) { 9 | (function _iterator() { 10 | if (i <= Math.sqrt(n) && n % i == 0) { 11 | resolve(); 12 | } else if (i <= Math.sqrt(n)) { 13 | txt.innerHTML = n; 14 | i++; 15 | setTimeout(_iterator, 0); 16 | } else { 17 | resolve(); 18 | } 19 | }()); 20 | }); 21 | }()).then(function () { 22 | setTimeout(_primes, 0); 23 | }); 24 | }()); 25 | } 26 | -------------------------------------------------------------------------------- /d2-prime-numbers-without-worker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Give me primes 8 |
9 |
10 |
Latest prime:
11 | 12 | 13 | -------------------------------------------------------------------------------- /d2-prime-numbers/app.js: -------------------------------------------------------------------------------- 1 | var txt = document.getElementById('primes'), 2 | worker = new Worker('w/main-worker.js'); 3 | 4 | 5 | worker.onmessage = function(e) { 6 | txt.innerHTML = e.data; 7 | }; 8 | 9 | //worker.terminate(); -------------------------------------------------------------------------------- /d2-prime-numbers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Give me primes 8 |
9 |
10 |
Latest prime:
11 | 12 | 13 | -------------------------------------------------------------------------------- /d2-prime-numbers/w/main-worker.js: -------------------------------------------------------------------------------- 1 | var n = 1, i = 2; 2 | 3 | primes: while (true) { 4 | n += 1; 5 | for (; i <= Math.sqrt(n); i += 1) { 6 | if (n % i == 0) { 7 | continue primes; 8 | } 9 | postMessage(n); 10 | } 11 | } 12 | 13 | onmessage = function(e) { 14 | console.log(e.data); 15 | }; 16 | 17 | //close(); -------------------------------------------------------------------------------- /d3-sub-worker/app.js: -------------------------------------------------------------------------------- 1 | var APP = {}, 2 | worker, 3 | title = document.getElementById('notification'); 4 | 5 | APP.isOnline = true; 6 | 7 | worker = new Worker('w/main-worker.js'); 8 | worker.postMessage(''); 9 | 10 | worker.onmessage = function(e) { 11 | var status = e.data === 'true' ? 'online' : 'offline'; 12 | APP.isOnline = status; 13 | title.innerHTML = 'App ' + status; 14 | }; -------------------------------------------------------------------------------- /d3-sub-worker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 |

10 | App online 11 |

12 | 13 | 14 | -------------------------------------------------------------------------------- /d3-sub-worker/w/main-worker.js: -------------------------------------------------------------------------------- 1 | importScripts('network-check.js'); 2 | 3 | onmessage = function(e) { 4 | }; -------------------------------------------------------------------------------- /d3-sub-worker/w/network-check.js: -------------------------------------------------------------------------------- 1 | function handler(){ 2 | if(this.readyState === XMLHttpRequest.DONE){ 3 | if(this.status === 200){ 4 | postMessage('true'); 5 | } 6 | else{ 7 | postMessage('false'); 8 | } 9 | } 10 | } 11 | 12 | function testConnection(){ 13 | var r = new XMLHttpRequest(); 14 | r.open('GET', 'http://localhost/'); 15 | r.onreadystatechange = handler; 16 | r.send(); 17 | } 18 | 19 | setInterval(testConnection, 1000); -------------------------------------------------------------------------------- /d4-random-users/app.js: -------------------------------------------------------------------------------- 1 | var worker, 2 | users = document.getElementById('users'); 3 | 4 | function getUser(){ 5 | worker.postMessage(''); 6 | }; 7 | 8 | function setUser(user){ 9 | var img = new Image(), 10 | h2 = document.createElement('h2'), 11 | p = document.createElement('p'), 12 | div = document.createElement('div'); 13 | 14 | img.src = user.picture.large; 15 | h2.innerHTML = user.name.first + ' ' + user.name.last; 16 | p.innerHTML = user.email + '
' + user.cell; 17 | 18 | div.appendChild(img); 19 | div.appendChild(h2); 20 | div.appendChild(p); 21 | 22 | users.insertAdjacentElement('afterbegin', div); 23 | }; 24 | 25 | worker = new Worker('w/main-worker.js'); 26 | 27 | worker.onmessage = function(e) { 28 | setUser(e.data); 29 | }; 30 | 31 | //setInterval(getUser, 500); 32 | -------------------------------------------------------------------------------- /d4-random-users/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 22 | 23 | 24 | 25 |
26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /d4-random-users/w/main-worker.js: -------------------------------------------------------------------------------- 1 | onmessage = function(e) { 2 | getUser(); 3 | }; 4 | 5 | function getUser(){ 6 | var r = new XMLHttpRequest(); 7 | r.open('GET', 'https://randomuser.me/api/'); 8 | 9 | r.onreadystatechange = function(){ 10 | 11 | if(this.readyState === XMLHttpRequest.DONE){ 12 | if(this.status === 200){ 13 | postMessage(JSON.parse(this.response).results[0]); 14 | } 15 | } 16 | }; 17 | 18 | r.send(); 19 | }; -------------------------------------------------------------------------------- /d4-random-users/w/network-check.js: -------------------------------------------------------------------------------- 1 | function handler(){ 2 | if(this.readyState === XMLHttpRequest.DONE){ 3 | if(this.status === 200){ 4 | postMessage({status: true}); 5 | } 6 | else{ 7 | postMessage({status: false}); 8 | } 9 | } 10 | } 11 | 12 | function testConnection(){ 13 | var r = new XMLHttpRequest(); 14 | r.open('GET', 'http://localhost/'); 15 | r.onreadystatechange = handler; 16 | r.send(); 17 | } 18 | 19 | setInterval(testConnection, 1000); -------------------------------------------------------------------------------- /d5-mix-d2-3-4-random-images/app.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | .notification { 7 | padding: 10px; 8 | margin-bottom: 10px; 9 | font-size: 14px; 10 | padding: 10px; 11 | text-align: center; 12 | text-transform: uppercase; 13 | background: #dedede; 14 | border-bottom: 1px solid #cecece; 15 | } 16 | 17 | .isOnline .notification { 18 | font-weight: bold; 19 | background: #d9ffd9; 20 | border-bottom: 1px solid #adccad; 21 | } 22 | 23 | .users div { 24 | font-size: 11px; 25 | overflow: hidden; 26 | padding: 20px; 27 | text-align: left; 28 | white-space: nowrap; 29 | border: 1px solid #cecece; 30 | display: inline-block; 31 | width: 48%; 32 | height: 90px; 33 | box-sizing: border-box; 34 | } 35 | .users img { 36 | float: left; 37 | margin-right: 20px; 38 | } 39 | .users h2 { 40 | font-size: 14px; 41 | text-transform: capitalize; 42 | } 43 | .users img { 44 | border-radius: 10px; 45 | } 46 | 47 | .menu { 48 | padding: 0 5px; 49 | } 50 | 51 | .menu * { 52 | opacity: .3; 53 | pointer-events: none; 54 | } 55 | 56 | .isOnline .menu * { 57 | opacity: 1; 58 | pointer-events: auto; 59 | } 60 | 61 | .primes { 62 | position: fixed; 63 | background: #fff; 64 | padding: 10px; 65 | width: 33%; 66 | box-sizing: border-box; 67 | text-align: center; 68 | will-change: transform; 69 | } 70 | 71 | table { 72 | width: 100%; 73 | } 74 | table td { 75 | text-align: center; 76 | vertical-align: top; 77 | width: 33%; 78 | } 79 | -------------------------------------------------------------------------------- /d5-mix-d2-3-4-random-images/app.js: -------------------------------------------------------------------------------- 1 | // GLOBALS 2 | var APP = {}, 3 | worker, 4 | images = document.getElementById('images'), 5 | primesTxt = document.getElementById('primes'), 6 | title = document.getElementById('notification'), 7 | users = document.getElementById('users'), 8 | interval = 1000; 9 | 10 | APP.isOnline = true; 11 | 12 | 13 | // HELPERS 14 | var rafPaint = ( function() { 15 | if (!window.requestAnimationFrame) { 16 | return function(func) { 17 | return func.bind(this); 18 | }; 19 | } 20 | 21 | return function(func) { 22 | return function() { 23 | var context = this, 24 | args = 25 | arguments; 26 | 27 | return requestAnimationFrame(function() { 28 | func.apply(context, args); 29 | }); 30 | }; 31 | }; 32 | }()); 33 | 34 | 35 | function commInterface(fns){ 36 | for(var fn in fns){ 37 | if(typeof APP[fn] === 'function') { 38 | APP[fn](fns[fn]); 39 | } 40 | } 41 | } 42 | 43 | function workerInterface(e){ 44 | commInterface(e.data); 45 | } 46 | 47 | 48 | // STATUS 49 | function status(online){ 50 | var status; 51 | 52 | if(online === true){ 53 | status = 'online'; 54 | APP.isOnline = online; 55 | document.body.classList.add('isOnline'); 56 | 57 | } else { 58 | status = 'offline'; 59 | APP.isOnline = false; 60 | document.body.classList.remove('isOnline'); 61 | } 62 | 63 | title.innerHTML = 'App ' + status; 64 | } 65 | APP.status = rafPaint(status); 66 | 67 | 68 | // USERS 69 | APP.getUser = function(){ 70 | if(APP.isOnline){ 71 | return mainWorker.postMessage({getUser: ''}); 72 | } 73 | alert('APP OFFLINE!'); 74 | }; 75 | 76 | function setUser(user){ 77 | var img = new Image(), 78 | h2 = document.createElement('h2'), 79 | p = document.createElement('p'), 80 | div = document.createElement('div'); 81 | 82 | img.src = user.picture.thumbnail; 83 | h2.innerHTML = user.name.first + ' ' + user.name.last; 84 | p.innerHTML = user.email + '
' + user.cell; 85 | 86 | div.appendChild(img); 87 | div.appendChild(h2); 88 | div.appendChild(p); 89 | 90 | users.insertAdjacentElement('afterbegin', div); 91 | } 92 | APP.setUser = rafPaint(setUser); 93 | 94 | 95 | // PRIMES 96 | APP.getPrimes = function(){ 97 | primesWorker.postMessage({primes: ''}); 98 | }; 99 | 100 | function setPrime(prime){ 101 | primesTxt.innerHTML = prime; 102 | } 103 | APP.setPrime = rafPaint(setPrime); 104 | 105 | 106 | // IMAGES 107 | APP.getImage = function(){ 108 | if(APP.isOnline){ 109 | return imageWorker.postMessage({getImage: ''}); 110 | } 111 | alert('APP OFFLINE!'); 112 | }; 113 | 114 | function setImage(dataurl){ 115 | var img = new Image(); 116 | img.src = dataurl; 117 | images.insertAdjacentElement('afterbegin', img); 118 | } 119 | APP.setImage = rafPaint(setImage); 120 | 121 | 122 | // CLEAR HTML 123 | APP.clearHTML = function(){ 124 | images.innerHTML = ''; 125 | primesTxt.innerHTML = ''; 126 | users.innerHTML = ''; 127 | }; 128 | 129 | // INTERVALS 130 | APP.int1; 131 | APP.int2; 132 | APP.ints = false; 133 | APP.intervals = function(action){ 134 | if(!action && APP.ints === true){ 135 | APP.ints = false; 136 | clearInterval(APP.int1); 137 | clearInterval(APP.int2); 138 | } else { 139 | APP.ints = true; 140 | APP.int1 = setInterval(APP.getImage, interval); 141 | APP.int2 = setInterval(APP.getUser, interval / 4); 142 | } 143 | }; 144 | 145 | 146 | // WORKERS 147 | mainWorker = new Worker('main-worker/main-worker.js'); 148 | mainWorker.onmessage = workerInterface; 149 | 150 | primesWorker = new Worker('primes-worker/primes.js'); 151 | primesWorker.onmessage = workerInterface; 152 | 153 | imageWorker = new Worker('image-worker/image.js'); 154 | imageWorker.onmessage = workerInterface; 155 | 156 | 157 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /d5-mix-d2-3-4-random-images/image-worker/image.js: -------------------------------------------------------------------------------- 1 | var APP = {}; 2 | 3 | function commInterface(fns){ 4 | for(var fn in fns){ 5 | if(typeof APP[fn] === 'function') { 6 | APP[fn](fns[fn]); 7 | } 8 | } 9 | } 10 | 11 | APP.getImage = function() { 12 | var r = new XMLHttpRequest(); 13 | 14 | r.open('GET', 'https://source.unsplash.com/category/nature/100x100', true); 15 | r.responseType = 'arraybuffer'; 16 | 17 | r.onreadystatechange = function(){ 18 | if(this.readyState === XMLHttpRequest.DONE){ 19 | 20 | if (this.status === 200) { 21 | 22 | var blb = new Blob( [this.response] , {type : 'image/jpeg'} ), 23 | reader = new FileReader(); 24 | 25 | 26 | reader.addEventListener("load", function() { 27 | 28 | var dataurl = this.result; 29 | postMessage({setImage : dataurl}); 30 | 31 | }, false); 32 | 33 | reader.readAsDataURL(blb); 34 | } 35 | } 36 | }; 37 | r.send(); 38 | }; 39 | 40 | 41 | onmessage = function(e) { 42 | commInterface(e.data); 43 | }; 44 | 45 | //close(); -------------------------------------------------------------------------------- /d5-mix-d2-3-4-random-images/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | App offline 10 |
11 |
12 | Menu: 13 | Random user | 14 | Primes #s | 15 | Random image | 16 | Clear HTML 17 |
18 |
19 | Intervals: 20 | Start | 21 | Stop 22 |
23 |
24 |
25 |
26 |
27 |
28 | 29 | 30 | 33 | 36 | 39 | 40 | 41 | 44 | 47 | 49 | 50 |
31 | Users 32 | 34 | Latest Prime # 35 | 37 | Image 38 |
42 | 43 | 45 |

46 | 		48 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /d5-mix-d2-3-4-random-images/main-worker/main-worker.js: -------------------------------------------------------------------------------- 1 | importScripts('network-check.js'); 2 | 3 | var APP = {}; 4 | 5 | function commInterface(fns){ 6 | for(var fn in fns){ 7 | if(typeof APP[fn] === 'function') { 8 | APP[fn](fns[fn]); 9 | } 10 | } 11 | } 12 | 13 | onmessage = function(e) { 14 | commInterface(e.data); 15 | }; 16 | 17 | APP.getUser = function(){ 18 | var r = new XMLHttpRequest(); 19 | r.open('GET', 'https://randomuser.me/api/'); 20 | 21 | r.onreadystatechange = function(){ 22 | 23 | if(this.readyState === XMLHttpRequest.DONE){ 24 | 25 | if(this.status === 200){ 26 | postMessage({setUser: JSON.parse(this.response).results[0]}); 27 | } 28 | 29 | } 30 | }; 31 | 32 | r.send(); 33 | }; -------------------------------------------------------------------------------- /d5-mix-d2-3-4-random-images/main-worker/network-check.js: -------------------------------------------------------------------------------- 1 | function handler(){ 2 | if(this.readyState === XMLHttpRequest.DONE){ 3 | if(this.status === 200){ 4 | postMessage({status: true}); 5 | } 6 | else{ 7 | postMessage({status: false}); 8 | } 9 | } 10 | } 11 | 12 | function testConnection(){ 13 | var r = new XMLHttpRequest(); 14 | r.open('GET', 'http://localhost/'); 15 | r.onreadystatechange = handler; 16 | r.send(); 17 | } 18 | 19 | setInterval(testConnection, 1000); -------------------------------------------------------------------------------- /d5-mix-d2-3-4-random-images/primes-worker/primes.js: -------------------------------------------------------------------------------- 1 | var APP = {}, n = 1, i = 2, j; 2 | 3 | function commInterface(fns){ 4 | for(var fn in fns){ 5 | if(typeof APP[fn] === 'function') { 6 | APP[fn](fns[fn]); 7 | } 8 | } 9 | } 10 | 11 | APP.primes = function() { 12 | //j = 1000000000; 13 | primes: while (true) { 14 | n += 1; 15 | for (; i <= Math.sqrt(n); i += 1) { 16 | if (n % i == 0) { 17 | continue primes; 18 | } 19 | postMessage({ 20 | setPrime : n 21 | }); 22 | } 23 | 24 | j--; 25 | } 26 | }; 27 | 28 | onmessage = function(e) { 29 | commInterface(e.data); 30 | }; 31 | 32 | //close(); -------------------------------------------------------------------------------- /d5-mix-no-worker/app.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | .notification { 7 | padding: 10px; 8 | margin-bottom: 10px; 9 | font-size: 14px; 10 | padding: 10px; 11 | text-align: center; 12 | text-transform: uppercase; 13 | background: #dedede; 14 | border-bottom: 1px solid #cecece; 15 | } 16 | 17 | .isOnline .notification { 18 | font-weight: bold; 19 | background: #d9ffd9; 20 | border-bottom: 1px solid #adccad; 21 | } 22 | 23 | .users div { 24 | font-size: 11px; 25 | overflow: hidden; 26 | padding: 20px; 27 | text-align: left; 28 | white-space: nowrap; 29 | border: 1px solid #cecece; 30 | display: inline-block; 31 | width: 48%; 32 | height: 90px; 33 | box-sizing: border-box; 34 | } 35 | .users img { 36 | float: left; 37 | margin-right: 20px; 38 | } 39 | .users h2 { 40 | font-size: 14px; 41 | text-transform: capitalize; 42 | } 43 | .users img { 44 | border-radius: 10px; 45 | } 46 | 47 | .menu { 48 | padding: 0 5px; 49 | } 50 | 51 | .menu * { 52 | opacity: .3; 53 | pointer-events: none; 54 | } 55 | 56 | .isOnline .menu * { 57 | opacity: 1; 58 | pointer-events: auto; 59 | } 60 | 61 | .primes { 62 | position: fixed; 63 | background: #fff; 64 | padding: 10px; 65 | width: 33%; 66 | box-sizing: border-box; 67 | text-align: center; 68 | will-change: transform; 69 | } 70 | 71 | table { 72 | width: 100%; 73 | } 74 | table td { 75 | text-align: center; 76 | vertical-align: top; 77 | width: 33%; 78 | } 79 | -------------------------------------------------------------------------------- /d5-mix-no-worker/app.js: -------------------------------------------------------------------------------- 1 | // GLOBALS 2 | var APP = {}, 3 | images = document.getElementById('images'), 4 | primesTxt = document.getElementById('primes'), 5 | title = document.getElementById('notification'), 6 | users = document.getElementById('users'), 7 | interval = 1000; 8 | 9 | APP.isOnline = true; 10 | 11 | // HELPERS 12 | var rafPaint = ( function() { 13 | if (!window.requestAnimationFrame) { 14 | return function(func) { 15 | return func.bind(this); 16 | }; 17 | } 18 | 19 | return function(func) { 20 | return function() { 21 | var context = this, 22 | args = 23 | arguments; 24 | 25 | return requestAnimationFrame(function() { 26 | func.apply(context, args); 27 | }); 28 | }; 29 | }; 30 | }()); 31 | 32 | 33 | // USERS 34 | APP.getUser = function(){ 35 | var r = new XMLHttpRequest(); 36 | r.open('GET', 'https://randomuser.me/api/'); 37 | 38 | r.onreadystatechange = function(){ 39 | 40 | if(this.readyState === XMLHttpRequest.DONE){ 41 | 42 | if(this.status === 200){ 43 | setUser(JSON.parse(this.response).results[0]); 44 | } 45 | 46 | } 47 | }; 48 | 49 | r.send(); 50 | }; 51 | 52 | function setUser(user){ 53 | var img = new Image(), 54 | h2 = document.createElement('h2'), 55 | p = document.createElement('p'), 56 | div = document.createElement('div'); 57 | 58 | img.src = user.picture.thumbnail; 59 | h2.innerHTML = user.name.first + ' ' + user.name.last; 60 | p.innerHTML = user.email + '
' + user.cell; 61 | 62 | div.appendChild(img); 63 | div.appendChild(h2); 64 | div.appendChild(p); 65 | 66 | users.insertAdjacentElement('afterbegin', div); 67 | } 68 | APP.setUser = rafPaint(setUser); 69 | 70 | 71 | // PRIMES 72 | var primesMax = 100000000; 73 | var n = 1, i = 2; 74 | APP.getPrimes = function(){ 75 | primes: while (primesMax > 0) { 76 | n += 1; 77 | for (; i <= Math.sqrt(n); i += 1) { 78 | if (n % i == 0) { 79 | continue primes; 80 | } 81 | setPrime(n); 82 | } 83 | 84 | primesMax--; 85 | } 86 | primesMax = 100000000; 87 | }; 88 | 89 | function setPrime(prime){ 90 | primesTxt.innerHTML = prime; 91 | } 92 | APP.setPrime = rafPaint(setPrime); 93 | 94 | 95 | // IMAGES 96 | APP.getImage = function() { 97 | var r = new XMLHttpRequest(); 98 | 99 | r.open('GET', 'https://source.unsplash.com/category/nature/100x100', true); 100 | r.responseType = 'arraybuffer'; 101 | 102 | r.onreadystatechange = function(){ 103 | if(this.readyState === XMLHttpRequest.DONE){ 104 | 105 | if (this.status === 200) { 106 | 107 | var blb = new Blob( [this.response] , {type : 'image/jpeg'} ), 108 | reader = new FileReader(); 109 | 110 | 111 | reader.addEventListener("load", function() { 112 | 113 | var dataurl = this.result; 114 | APP.setImage(dataurl); 115 | 116 | }, false); 117 | 118 | reader.readAsDataURL(blb); 119 | } 120 | } 121 | }; 122 | r.send(); 123 | 124 | }; 125 | 126 | function setImage(dataurl){ 127 | var img = new Image(); 128 | img.src = dataurl; 129 | images.insertAdjacentElement('afterbegin', img); 130 | } 131 | APP.setImage = rafPaint(setImage); 132 | 133 | 134 | // CLEAR HTML 135 | APP.clearHTML = function(){ 136 | images.innerHTML = ''; 137 | primesTxt.innerHTML = ''; 138 | users.innerHTML = ''; 139 | }; 140 | 141 | // INTERVALS 142 | APP.int1; 143 | APP.int2; 144 | APP.ints = false; 145 | APP.intervals = function(action){ 146 | if(!action && APP.ints === true){ 147 | APP.ints = false; 148 | clearInterval(APP.int1); 149 | clearInterval(APP.int2); 150 | } else { 151 | APP.ints = true; 152 | APP.int1 = setInterval(APP.getImage, interval); 153 | APP.int2 = setInterval(APP.getUser, interval / 4); 154 | } 155 | }; -------------------------------------------------------------------------------- /d5-mix-no-worker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | App online 10 |
11 |
12 | Menu: 13 | Random user | 14 | Primes #s | 15 | Random image | 16 | Clear HTML 17 |
18 |
19 | Intervals: 20 | Start | 21 | Stop 22 |
23 |
24 |
25 |
26 |
27 |
28 | 29 | 30 | 33 | 36 | 39 | 40 | 41 | 44 | 47 | 49 | 50 |
31 | Users 32 | 34 | Latest Prime # 35 | 37 | Image 38 |
42 | 43 | 45 |

46 | 		48 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /d6-mix-d2-3-4-random-images-alt/app.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | .notification { 7 | padding: 10px; 8 | margin-bottom: 10px; 9 | font-size: 14px; 10 | padding: 10px; 11 | text-align: center; 12 | text-transform: uppercase; 13 | background: #dedede; 14 | border-bottom: 1px solid #cecece; 15 | } 16 | 17 | .isOnline .notification { 18 | font-weight: bold; 19 | background: #d9ffd9; 20 | border-bottom: 1px solid #adccad; 21 | } 22 | 23 | .users div { 24 | font-size: 11px; 25 | overflow: hidden; 26 | padding: 20px; 27 | text-align: left; 28 | white-space: nowrap; 29 | border: 1px solid #cecece; 30 | display: inline-block; 31 | width: 48%; 32 | height: 90px; 33 | box-sizing: border-box; 34 | } 35 | .users img { 36 | float: left; 37 | margin-right: 20px; 38 | } 39 | .users h2 { 40 | font-size: 14px; 41 | text-transform: capitalize; 42 | } 43 | .users img { 44 | border-radius: 10px; 45 | } 46 | 47 | .menu { 48 | padding: 0 5px; 49 | } 50 | 51 | .menu * { 52 | opacity: .3; 53 | pointer-events: none; 54 | } 55 | 56 | .isOnline .menu * { 57 | opacity: 1; 58 | pointer-events: auto; 59 | } 60 | 61 | .primes { 62 | position: fixed; 63 | background: #fff; 64 | padding: 10px; 65 | width: 33%; 66 | box-sizing: border-box; 67 | text-align: center; 68 | will-change: transform; 69 | } 70 | 71 | table { 72 | width: 100%; 73 | } 74 | table td { 75 | text-align: center; 76 | vertical-align: top; 77 | width: 33%; 78 | } 79 | -------------------------------------------------------------------------------- /d6-mix-d2-3-4-random-images-alt/app.js: -------------------------------------------------------------------------------- 1 | // GLOBALS 2 | var APP = {}, 3 | worker, 4 | images = document.getElementById('images'), 5 | primesTxt = document.getElementById('primes'), 6 | title = document.getElementById('notification'), 7 | users = document.getElementById('users'), 8 | interval = 1000; 9 | 10 | APP.users = new Array(); 11 | APP.isOnline = true; 12 | 13 | 14 | // HELPERS 15 | var rafPaint = ( function() { 16 | if (!window.requestAnimationFrame) { 17 | return function(func) { 18 | return func.bind(this); 19 | }; 20 | } 21 | 22 | return function(func) { 23 | return function() { 24 | var context = this, 25 | args = 26 | arguments; 27 | 28 | return requestAnimationFrame(function() { 29 | func.apply(context, args); 30 | }); 31 | }; 32 | }; 33 | }()); 34 | 35 | 36 | function commInterface(fns){ 37 | for(var fn in fns){ 38 | if(typeof APP[fn] === 'function') { 39 | APP[fn](fns[fn]); 40 | } 41 | } 42 | } 43 | 44 | function workerInterface(e){ 45 | commInterface(e.data); 46 | } 47 | 48 | 49 | // STATUS 50 | function status(online){ 51 | var status; 52 | 53 | if(online === true){ 54 | status = 'online'; 55 | APP.isOnline = online; 56 | document.body.classList.add('isOnline'); 57 | 58 | } else { 59 | status = 'offline'; 60 | APP.isOnline = false; 61 | document.body.classList.remove('isOnline'); 62 | } 63 | 64 | title.innerHTML = 'App ' + status; 65 | } 66 | APP.status = rafPaint(status); 67 | 68 | 69 | // USERS 70 | APP.getUser = function(){ 71 | if(APP.isOnline){ 72 | return mainWorker.postMessage({getUser: ''}); 73 | } 74 | alert('APP OFFLINE!'); 75 | }; 76 | 77 | function setUser(user){ 78 | users.insertAdjacentHTML('afterbegin', user); 79 | } 80 | APP.setUser = rafPaint(setUser); 81 | 82 | 83 | // PRIMES 84 | APP.getPrimes = function(){ 85 | primesWorker.postMessage({primes: ''}); 86 | }; 87 | 88 | function setPrime(prime){ 89 | primesTxt.innerHTML = prime; 90 | } 91 | APP.setPrime = rafPaint(setPrime); 92 | 93 | 94 | // IMAGES 95 | APP.getImage = function(){ 96 | if(APP.isOnline){ 97 | return imageWorker.postMessage({getImage: ''}); 98 | } 99 | alert('APP OFFLINE!'); 100 | }; 101 | 102 | function setImage(img){ 103 | images.insertAdjacentHTML('afterbegin', img); 104 | } 105 | APP.setImage = rafPaint(setImage); 106 | 107 | 108 | // CLEAR HTML 109 | APP.clearHTML = function(){ 110 | images.innerHTML = ''; 111 | primesTxt.innerHTML = ''; 112 | users.innerHTML = ''; 113 | }; 114 | 115 | // INTERVALS 116 | APP.int1; 117 | APP.int2; 118 | APP.ints = false; 119 | APP.intervals = function(action){ 120 | if(!action && APP.ints === true){ 121 | APP.ints = false; 122 | clearInterval(APP.int1); 123 | clearInterval(APP.int2); 124 | } else { 125 | APP.ints = true; 126 | APP.int1 = setInterval(APP.getImage, interval); 127 | APP.int2 = setInterval(APP.getUser, interval); 128 | } 129 | }; 130 | 131 | 132 | // WORKERS 133 | mainWorker = new Worker('main-worker/main-worker.js'); 134 | mainWorker.onmessage = workerInterface; 135 | 136 | primesWorker = new Worker('primes-worker/primes.js'); 137 | primesWorker.onmessage = workerInterface; 138 | 139 | imageWorker = new Worker('image-worker/image.js'); 140 | imageWorker.onmessage = workerInterface; 141 | 142 | 143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /d6-mix-d2-3-4-random-images-alt/image-worker/image.js: -------------------------------------------------------------------------------- 1 | var APP = {}; 2 | 3 | function commInterface(fns){ 4 | for(var fn in fns){ 5 | if(typeof APP[fn] === 'function') { 6 | APP[fn](fns[fn]); 7 | } 8 | } 9 | } 10 | 11 | APP.getImage = function() { 12 | var r = new XMLHttpRequest(); 13 | 14 | r.open('GET', 'https://source.unsplash.com/category/nature/100x100', true); 15 | r.responseType = 'arraybuffer'; 16 | 17 | r.onreadystatechange = function(){ 18 | if(this.readyState === XMLHttpRequest.DONE){ 19 | 20 | if (this.status === 200) { 21 | 22 | var blb = new Blob( [this.response] , {type : 'image/jpeg'} ), 23 | reader = new FileReader(); 24 | 25 | 26 | reader.addEventListener("load", function() { 27 | 28 | var dataurl = this.result; 29 | postMessage({setImage : ''}); 30 | 31 | }, false); 32 | 33 | reader.readAsDataURL(blb); 34 | } 35 | } 36 | }; 37 | r.send(); 38 | }; 39 | 40 | 41 | onmessage = function(e) { 42 | commInterface(e.data); 43 | }; 44 | 45 | //close(); -------------------------------------------------------------------------------- /d6-mix-d2-3-4-random-images-alt/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | App offline 10 |
11 |
12 | Menu: 13 | Random user | 14 | Primes #s | 15 | Random image | 16 | Clear HTML 17 |
18 |
19 | Intervals: 20 | Start | 21 | Stop 22 |
23 |
24 |
25 |
26 |
27 |
28 | 29 | 30 | 33 | 36 | 39 | 40 | 41 | 44 | 47 | 49 | 50 |
31 | Users 32 | 34 | Latest Prime # 35 | 37 | Image 38 |
42 | 43 | 45 |

46 | 		48 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /d6-mix-d2-3-4-random-images-alt/main-worker/main-worker.js: -------------------------------------------------------------------------------- 1 | importScripts('network-check.js'); 2 | 3 | var APP = {}; 4 | 5 | function commInterface(fns){ 6 | for(var fn in fns){ 7 | if(typeof APP[fn] === 'function') { 8 | APP[fn](fns[fn]); 9 | } 10 | } 11 | } 12 | 13 | onmessage = function(e) { 14 | commInterface(e.data); 15 | }; 16 | 17 | APP.getUser = function(){ 18 | var r = new XMLHttpRequest(); 19 | r.open('GET', 'https://randomuser.me/api/'); 20 | 21 | r.onreadystatechange = function(){ 22 | 23 | if(this.readyState === XMLHttpRequest.DONE){ 24 | 25 | if(this.status === 200){ 26 | var data = JSON.parse(this.response).results[0]; 27 | user = '
' + 28 | ' ' + 29 | '

' + data.name.first + ' ' + data.name.last + '

' + 30 | '

' + 31 | data.email + 32 | '
' + 33 | data.cell + 34 | '

' + 35 | '
'; 36 | postMessage({setUser: user}); 37 | } 38 | 39 | } 40 | }; 41 | 42 | r.send(); 43 | }; -------------------------------------------------------------------------------- /d6-mix-d2-3-4-random-images-alt/main-worker/network-check.js: -------------------------------------------------------------------------------- 1 | function handler(){ 2 | if(this.readyState === XMLHttpRequest.DONE){ 3 | if(this.status === 200){ 4 | postMessage({status: true}); 5 | } 6 | else{ 7 | postMessage({status: false}); 8 | } 9 | } 10 | } 11 | 12 | function testConnection(){ 13 | var r = new XMLHttpRequest(); 14 | r.open('GET', 'http://localhost/'); 15 | r.onreadystatechange = handler; 16 | r.send(); 17 | } 18 | 19 | setInterval(testConnection, 1000); -------------------------------------------------------------------------------- /d6-mix-d2-3-4-random-images-alt/primes-worker/primes.js: -------------------------------------------------------------------------------- 1 | var APP = {}, n = 1, i = 2, j; 2 | 3 | function commInterface(fns){ 4 | for(var fn in fns){ 5 | if(typeof APP[fn] === 'function') { 6 | APP[fn](fns[fn]); 7 | } 8 | } 9 | } 10 | 11 | APP.primes = function() { 12 | //j = 1000000000; 13 | primes: while (true) { 14 | n += 1; 15 | for (; i <= Math.sqrt(n); i += 1) { 16 | if (n % i == 0) { 17 | continue primes; 18 | } 19 | postMessage({ 20 | setPrime : n 21 | }); 22 | } 23 | 24 | j--; 25 | } 26 | }; 27 | 28 | onmessage = function(e) { 29 | commInterface(e.data); 30 | }; 31 | 32 | //close(); -------------------------------------------------------------------------------- /d7-transferables/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /d8-transferables-2/app.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | .menu { 7 | padding: 10px; 8 | font-size: 2em; 9 | } 10 | -------------------------------------------------------------------------------- /d8-transferables-2/app.js: -------------------------------------------------------------------------------- 1 | // GLOBALS 2 | var APP = {}, 3 | uInt8View = [], 4 | originalLength; 5 | 6 | function commInterface(fns){ 7 | for(var fn in fns){ 8 | if(typeof APP[fn] === 'function') { 9 | APP[fn](fns[fn]); 10 | } 11 | } 12 | } 13 | 14 | function toMB(bytes) { 15 | return Math.round(bytes / 1024 / 1024); 16 | } 17 | 18 | function workerInterface(e){ 19 | commInterface(e.data); 20 | } 21 | 22 | APP.receive = function(buffer) { 23 | console.log('MAIN SCRIPT: Received buffer from worker'); 24 | uInt8View = new Uint8Array(buffer); 25 | originalLength = uInt8View.length; 26 | }; 27 | 28 | APP.test = function() { 29 | console.log('MAIN SCRIPT: ' + uInt8View.length); 30 | console.log(uInt8View); 31 | }; 32 | 33 | APP.sendBuffer = function() { 34 | console.log('MAIN SCRIPT: ' + toMB(originalLength) + ' MB buffer, sent to worker'); 35 | mainWorker.postMessage({receive: uInt8View.buffer}, [uInt8View.buffer]); 36 | }; 37 | 38 | // WORKER 39 | mainWorker = new Worker('main-worker/main-worker.js'); 40 | mainWorker.onmessage = workerInterface; -------------------------------------------------------------------------------- /d8-transferables-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | Worker: 10 | Generate | 11 | Send to main | 12 | Test 13 |
14 |
15 | Main Script: 16 | Send to worker | 17 | Test 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /d8-transferables-2/main-worker/main-worker.js: -------------------------------------------------------------------------------- 1 | var APP = {}, 2 | SIZE = 1024 * 1024 * 32, // 32MB 3 | arrayBuffer = null, 4 | uInt8View = [], 5 | originalLength = null; 6 | 7 | 8 | function commInterface(fns) { 9 | for (var fn in fns) { 10 | if ( typeof APP[fn] === 'function') { 11 | APP[fn](fns[fn]); 12 | } 13 | } 14 | } 15 | 16 | function toMB(bytes) { 17 | return Math.round(bytes / 1024 / 1024); 18 | } 19 | 20 | onmessage = function(e) { 21 | commInterface(e.data); 22 | }; 23 | 24 | 25 | APP.receive = function(buffer) { 26 | console.log('WORKER: Received buffer from main script'); 27 | uInt8View = new Uint8Array(buffer); 28 | }; 29 | 30 | APP.test = function() { 31 | console.log('WORKER: ' + uInt8View.length); 32 | console.log(uInt8View); 33 | }; 34 | 35 | APP.sendBuffer = function(){ 36 | console.log('WORKER: ' + toMB(originalLength) + ' MB buffer, sent to main script'); 37 | postMessage({receive: uInt8View.buffer}, [uInt8View.buffer]); 38 | }; 39 | 40 | APP.generateTransferrable = function() { 41 | var i = 0; 42 | 43 | arrayBuffer = new ArrayBuffer(SIZE); 44 | uInt8View = new Uint8Array(arrayBuffer); 45 | originalLength = uInt8View.length; 46 | 47 | for (; i < originalLength; ++i) { 48 | uInt8View[i] = i; 49 | } 50 | 51 | console.log('WORKER: Generated ' + toMB(originalLength) + ' MB buffer'); 52 | }; -------------------------------------------------------------------------------- /d9-too-many-messages/app.js: -------------------------------------------------------------------------------- 1 | var APP = {}; 2 | 3 | function commInterface(fns){ 4 | for(var fn in fns){ 5 | if(typeof APP[fn] === 'function') { 6 | APP[fn](fns[fn]); 7 | } 8 | } 9 | } 10 | 11 | APP.call1 = function(prop) { 12 | w2.postMessage(''); 13 | }; 14 | APP.call2 = function(prop) { 15 | w1.postMessage(''); 16 | }; 17 | 18 | var w1 = new Worker('w/w1.js'); 19 | var w2 = new Worker('w/w2.js'); 20 | //worker.postMessage('message to worker'); 21 | 22 | w1.onmessage = function(e) { 23 | commInterface(e.data); 24 | }; 25 | 26 | w2.onmessage = function(e) { 27 | commInterface(e.data); 28 | }; 29 | 30 | 31 | //worker.terminate(); -------------------------------------------------------------------------------- /d9-too-many-messages/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /d9-too-many-messages/w/w1.js: -------------------------------------------------------------------------------- 1 | onmessage = function(e) { 2 | console.log('w1'); 3 | postMessage({call1: ''}); 4 | }; 5 | 6 | //close(); -------------------------------------------------------------------------------- /d9-too-many-messages/w/w2.js: -------------------------------------------------------------------------------- 1 | onmessage = function(e) { 2 | console.log('w2'); 3 | postMessage({call2: ''}); 4 | }; 5 | 6 | //close(); --------------------------------------------------------------------------------