Mcsd 70-480 2.5 Create A Web Worker Process

Front 1

HTML5 Web Workers

Back 1

enable processing of javascript outside of the main execution thread. For background and long-running javascript processes that don't block the user interface.

Front 2

Create a web worker

Back 2

var myWebWorker = new Worker("myWebWorkerFile.js");

Front 3

Start a web worker

Back 3

myWebWorker.postMessage("any message sent to a worker will cause it to start");

Front 4

Pass an object in a web worker

Back 4

myWebWorker.postMessage(myObject); //the browser will serialize the object for you

Front 5

Terminate a web worker

Back 5

myWebWorker.terminate();

Front 6

Handle posted message in web worker

Back 6

self.onmessage = function(event) { var data = event.data; };

Front 7

Pass data from web worker to main page

Back 7

self.onmessage = function( event) { var data = event.data; // receive the data in our WebWorker // process the data here var returnMessage = MyProcessingFunction(); // then return our results self.postMessage( returnMessage); };

Front 8

recieve data from web worker in main page

Back 8

myWebWorker.onmessage = function( event) { var data = event.data; // process the data returned from the WebWorker }

Front 9

Web Worker timers

Back 9

setTimeout(), clearTimeout(), setInterval(), clearInterval()

Front 10

handle error from web worker in main page

Back 10

myWebWorker.onerror = function( event) { // event.message will be set to the error message // event.filename will be set to the filename of the file that contains the code that errored // event.lineno will be set to the line number where the error occurred }

Front 11

Web Worker limitations

Back 11

No access to global scope, or the DOM. They cannot directly acces functions on main page.